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を応援していただければ幸いです。

以下もご興味があるかもしれません: