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つ

推薦する

setup+ref+reactive は vue3 の応答性を実装します

セットアップは、結合された API を記述するために使用されます。テンプレートが使用できるようにする...

Nginx におけるサーバーとロケーションのマッチングロジックの詳細な理解

サーバーマッチングロジックNginx は、リクエストを実行するサーバー ブロックを決定するときに、サ...

JavaScript に関する 6 つの奇妙で便利な点

目次1. 解体のヒント2. デジタルセパレーター3. try...catch...finally が...

Zenコーディングリソース更新機能強化

公式サイト: http://code.google.com/p/zen-coding/ Zen コー...

独自のネイティブ JavaScript ルーターを作成する方法

目次序文導入JavaScript 履歴 API独自のネイティブJSルーティングを実装するHistor...

MySQL ストアド プロシージャと共通関数のコード分析

mysql ストアド プロシージャの概念:特定のタスク (クエリと更新) を実行できる、データベース...

共有サイドバーを実装するためのネイティブJS

この記事では、ネイティブ JS で実装された共有サイドバーを紹介します。効果は次のとおりです。 以下...

Linux環境変数の設定に関する完全なガイド

Linux環境変数の設定ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定...

HTML の基本概要推奨事項 (段落)

HTML段落段落は <p> タグによって定義されます。例<p>これは段落で...

Tomcat マルチポートドメイン名アクセスと gzip 圧縮方式を有効にする構成

1. デフォルトのポート8080に加えて、ドメイン名のアクセスとserver.xmlのオープンにポー...

Webフロントエンドの一般的な操作(JS/HTML/CSSなどの知識を含む)

ul liの前のアイコン1をキャンセルしますクリア値1値を1に設定ラベル中央値1をクリアラベルの中央...

dockerにmysqlをインストールした後にNavicatが接続できない問題に対する完璧な解決策

1. Dockerがイメージをプルするdocker pull mysql (デフォルトで最新バージョ...

Linuxのsortコマンドの複数のパラメータを理解するための1つの質問

sort コマンドは非常によく使用されますが、-o、-n、-u、-r などの多くのパラメーターがあり...

Innodb で MySQL の 2T テーブルをすばやく削除する方法の例

序文この記事は主に、MySQL の Innodb で 2T の大きなテーブルをすばやく削除する方法に...

Ubuntu 18.0.4 は mysql をインストールし、エラー 1698 (28000): ユーザー ''root''@''localhost'' のアクセスが拒否されましたを解決します

序文最近 Linux を学び、その後 Win から Ubuntu に変更しました。以前インストールし...