WeChatアプレットにおけるデータ保存実装方法

WeChatアプレットにおけるデータ保存実装方法

グローバル変数 globalData

ミニプログラムが最初に作成されると、app.js ファイルの App メソッドに渡されるオブジェクトに、globalData パラメータがデフォルトで追加されます。すべてのページで、getApp メソッドを使用して、App メソッドによって渡されたオブジェクトを取得し、その中の globalData を取得できます。

const App = getApp();
定数 openId = App.globalData.openId;
App.globalData.openId = 1;
App.globalData.openId を削除します。

globalData の値はオブジェクトであり、オブジェクトと同じ方法で呼び出すことができます。 (globalData は必ずしもこの名前で呼ばれるわけではありません)

ページプライベート変数データ

各ページの js ロジック レイヤー ページは、オブジェクトを Page メソッドに渡します。データの値は、通常、現在のページの変数値を格納するために使用されます。その主な目的は、setData インターフェイスを介してビュー レイヤーと対話し、wxml ビュー レイヤーの表示コンテンツを変更することです。

データの値をビューレイヤーに渡す必要がない場合は、setData を使用するのではなく、代わりにオブジェクト操作を使用することをお勧めします。パフォーマンスを効果的に節約できます。
ページが初期化されると、データ内のデータがビュー レイヤーと対話します。さらに処理を進めると、オブジェクトに localData を追加して、現在のページに必要な変数を具体的に保存することもできます。

ページ({
 データ: {
  オープンID: 123
 },
 ローカルデータ: {
  タイムスタンプ: Date.now()
 }
})
this.setData({
 オープンID: 321
})
this.data.openId = 321;
this.localData.timeStamp = Data.now();

ストレージ

ストレージは、グローバル変数 globalData と同様に、ミニプログラムで非常に一般的な保存方法です。特定のページに限定されず、wx が提供するインターフェースを通じてどこからでも値を取得できます。

データは長期間保存でき、ログアウトして再度ログインしても消えないのが利点です。 (上限保存容量10M)
欠点は、非同期動作のため、各アクセスに比較的長い時間がかかることです。
wx は、追加、削除、変更、およびチェック インターフェイスを提供します (追加と変更は両方とも設定インターフェイスです)。以下は、データを保存する例です。

非同期ストレージ(デバイスのパフォーマンスによっては、実際にどれくらいの期間保存されるかはわかりません)

wx.setStorage({
 キー: 'キー',
 データ: '値',
 成功: res => {
  ...
 }
})
// サポートプロミス
wx.setStorage({キー: 'キー', データ: '値'})
 .then(res => {
  ...
 })

同期ストレージ(ブロッキングが発生します)

wx.setStorageSync('キー', '値')
...

ファイルストレージ fileSysteManager

fileSysteManager(以下、fs)は、テキストや画像データをファイルの形式でローカルに保存することができます。保存制限​​は10M(以前は200Mだったと記憶していますが、後で資料で10と見ました)。長期間保存され、削除しない限りミニプログラムのデータは消えません。

書く:

定数 fs = wx.getFileSystemManager();
fs.writeFile({
  ファイルパス: `${wx.env.USER_DATA_PATH}/_l${fileName}.txt`,
  データ: JSON.stringify(データ),
  エンコーディング: 'utf8'、
  成功(res) { ... }
})
  • filePath の env.userDatapath は、wx によって現在のプログラムに割り当てられたデフォルトのスペースです。コーダーは、その下にフォルダーを作成したり、ファイルを追加したりできます。
  • fileName はデータを保存するときのファイル名です。
  • data は保存されるデータであり、画像である場合もあります。
  • エンコーディング: エンコーディング形式。データが画像の場合はバイナリに調整できます。

読む

データにアクセスするときは、ファイル名と保存場所に注意してください。

fs.readFile({
  ファイルパス: `${wx.env.USER_DATA_PATH}/_l${fileName}.txt`,
  エンコーディング: 'utf8'、
  位置: 0,
  成功(res) {
 JSON.parse(res.data) 
  }
})

取り除く

fs.unlink({
  ファイルパス: `${wx.env.USER_DATA_PATH}/_l${fileName}.txt`,
  エンコーディング: 'utf8'、
  成功(res) {
 ...
  }
})

すべての fs 操作は非同期なので、処理ロジックに注意してください。

WeChatミニプログラムでのデータストレージの実装に関するこの記事はこれで終わりです。より関連性の高いミニプログラムのデータストレージコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatミニプログラム:データの保存、値の転送、値の取得の詳細な説明
  • WeChatアプレットのデータ保存と値の取得の詳細
  • WeChatアプレットのローカルデータ保存例の詳細な説明
  • WeChatアプレット開発データ保存パラメータ転送データキャッシュ
  • WeChatアプレットのデータストレージとDjangoおよびその他のサービスがリクエストを送信する

<<:  mysql charset=utf8 本当に意味が分かりますか

>>:  Nginxサービス500:内部サーバーエラーの原因の1つ

推薦する

Node8 における AsyncHooks 非同期ライフサイクル

Async Hooks は Node8 の新機能です。NodeJs の非同期リソースのライフサイクル...

MySQL マルチバージョン同時実行制御 MVCC の基本原理の分析

目次1 トランザクションの同時実行で発生する問題1.1 ダーティリード1.2 繰り返し不可能な読み取...

CSSにおけるマージン値と垂直マージンの重なりについて

平行ボックスの余白 (二重余白の重なり) に関する面接の質問: 1 つのボックスに上余白があり、もう...

CentOS で yum を使用して rabbitmq-server をインストールする方法

RabbitMQをインストールする前にSocatをインストールする必要があります。そうしないと、Ra...

CSS の clip-path プロパティの使用方法の詳細な説明

クリップパスの使用ポリゴン値は複数の座標点で構成されます。最初の値は x 方向、2 番目の値は y ...

MySQL インデックスの詳細な説明

目次1. インデックスの基本1.1 はじめに1.2 インデックスの仕組み1.3 インデックスの種類1...

Ubuntu 16.04 64 ビット版の VMware Tools のインストールと構成のグラフィック チュートリアル

この記事では、VMware Toolsのインストールと構成に関するグラフィックチュートリアルを参考と...

vue keep-alive の簡単な概要

1. 機能主にコンポーネントの状態を保持したり、再レンダリングを回避したりするために使用されます。 ...

HTML 適応テーブル方式

<body style="scroll:no"> <テーブルの...

Mysql 主キー UUID と自動増分主キーの違いと利点と欠点

導入私はしばらくの間、postgresql データベースを使用していました。クラウドに移行した後、自...

CentOS6.5にpython3.7をインストールする詳細な手順

1. Python 3をダウンロードする https://www.python.org/ftp/py...

MySQLは間違ったパスワードを入力する試行回数を制御します

1. 本番環境でMySQLのデッドロックを監視し、デッドロックの可能性を減らす方法まず、デッドロック...

Centos7 での NFS サービス構築の紹介

目次1. サーバー2. クライアント3. テストサービス1. サーバー1. YUMソースを使用してN...

MYSQL トランザクション チュートリアル Yii2.0 マーチャント引き出し機能

序文私はプログラマーとしてスタートした PHP プログラマーです。これまで、トレーニング コースで勉...

ネイティブ JavaScript 継承方法とその長所と短所の詳細な説明

目次序文プロトタイプ継承アドバンテージ欠点コンストラクタの継承アドバンテージ欠点組み合わせ継承寄生的...