WeChatアプレット開発の実践スキル:データの転送と保存

WeChatアプレット開発の実践スキル:データの転送と保存

日々の開発で遭遇した様々な問題と、その解決策を閲覧しながら、日々の開発でよく使用するスキルや知識ポイントをまとめてみました。皆様のアドバイスを頂ければ幸いです。

1. 短寿命データ保存

アプレットの起動から完全なシャットダウンまでのデータを app.js フォルダーに保存し、app.js を参照することをお勧めします。

const app = getApp();

Value は、API を要求するためのトークンや動的トークンなど、ミニプログラムのライフサイクルで頻繁に使用されるデータであると想定します。次に、この値をグローバル変数に割り当てることができます。実際、app.js の globalData は唯一のグローバル変数ではなく、独自のデータ セットを定義することができます。

アプリ({
  教育OS:
    トークン:''
  },
  ...
})

app.jsのトークンに値を割り当てるのは非常に簡単です。ページがapp.jsを参照している限り

app.eduOS.token = 値;

このデータは、ミニプログラムの開始からバックグラウンドの完全な終了まで長期間存在し、必要に応じて変更できます。値はオブジェクトにすることができます。

2. 長期ライフサイクルまたはプライバシーデータの保存

このタイプのデータの注目すべき特徴は、ミニプログラムが終了して再起動された後もデータがまだ存在すること、またはユーザーのプライバシー情報に関係しているが再利用する必要があることです。この場合、ローカル キャッシュを使用してこの問題を解決できます。

ローカル キャッシュのライフ サイクル: ミニ プログラムが使用開始されます -----> ミニ プログラムは使用リストから完全に削除されます。

アプレットでキャッシュを設定する方法:

wx.setStorage({
            キー: 'educookie'、
            データ: {
              xh: that.data.xh、
              パスワード: that.data.pwd
            }
          })

ミニプログラムがキャッシュを取得する方法:

 var that = this;
 wx.getStorage({
      キー: 'educookie'、
      成功: function(res) {
        that.setData({xh:res.data.xh,pwd:res.data.pwd});
      },
    })

たとえば、ユーザーのログイン情報は保存したいが、ユーザーの個人データは保存したくない場合は、この方法を使用できます。

または、時間に敏感でないデータの場合は、この方法で保存できます。

3. 動的情報または構成情報の保存

ユーザーの設定情報を保存し、携帯電話を変更するときに設定の同期を迅速に完了します。

マーチャントのミニプログラムで推奨商品を変更したり、コンテンツを改訂したり、アクティビティを追加したりする必要がある場合、そのたびにミニプログラムを書き直して、ミニプログラムに再度レビューさせることは不可能です。

この目的のために、この情報はバックエンド サーバーに保存できます。

ミニプログラムのカルーセル ビルボードを例に挙げます。

{
 ad1:'imgurl1',
 ad2:'imgurl2',
 ad3:'imgurl3'
}

このデータをバックグラウンド サーバーに保存し、ページが更新されるたびにバックグラウンド データを要求してコンテンツを変更します。

wx.リクエスト({
 url:'XXX',
 データ:{}、
 成功(res){
  that.setData({
   広告リスト:res.data
  })
 }
})

同様の方法で、一部のデータの動的な制御やクラウド同期を実現できます。

4. ページ間のデータ転送

1. URLパラメータ化

ページ間のデータ転送は一般的に単純です。このタイプのデータのライフ サイクルは 1 回限りで、使用後は削除されます。

wx.navigatorTo({
 url:'../index/index?param1=value1&param2=value2'
})
//onLoad(オプション) を取得します{
 console.log(options.param1);//値1
}

ページ間でのパラメータの受け渡しを記述するには、Http リクエストの Get フォーム パラメータ受け渡しメソッドを参照してください。

2.保管形態の配送

送信するデータが多すぎる場合は、Map<key, Storge> を介して送信できます。詳細については、公式ドキュメントを参照してください。

wx.setStorage({
  キー:'xxx',
  データ:mydata
})
//wx.getStorgeSync('') を取得します

パラメータを渡すには、キーを渡すだけでよく、このキーを使用して他のインターフェースでローカル キャッシュを再度取得します。このタイプのデータの場合、使用後はすぐにキャッシュを削除することをお勧めします。

wx.removeStorage({
  キー: 'xxx'、
  成功(res) {
    コンソール.log(res)
  }
})

3. グローバル変数を仲介として使う

const app = getApp();
ページ({
 app.globalData.isBackvalue = true; // 返された値であることを確認する app.globalData.tmpData = value; // 渡したい値、キャッシュを設定することもできます })

返されたページにアクセスする

const app = getApp();
...
onShow(){
  if(app.globalData.isBackValue){
   this.setData({
    XXX:app.globalData.tmpデータ
   })
   //またはキャッシュメソッドを取得して値を割り当てる}
}

4. ページスタック

このメソッドは、スタックにプッシュされたすべてのページに値を割り当てることができます。専門的な経験を持つ学生は、ツリーの DFS トラバーサルをプッシュ/ポップすると理解でき、スタック内のすべてのページでデータを転送できます。

var allpages = getCurrentPages(); //すべてのページデータを取得します //スタックインデックスは0から始まります。ページに入るときに読み込まれる最初のページデータはallpages[0]、現在のページはallpages[allpages.length - 1]、前のページはallpages[allpages.length - 2]です
var prepagedata = allpages[allpages.length - 2].data; // 前のページのデータを取得します。
var prepage = allpages[allpages.length - 2]; //データとメソッドを含む前のページを取得します //データを設定するメソッド prepage.setData({
 XXX:値 //XXXは前のページのデータ内のパラメータ、値は設定する値です})
//function メソッドを呼び出す場合、prepage.callfunction() を呼び出す前に、prepage で callfunction 関数を定義する必要があります。

5. コミュニケーションチャネル イベントチャネル

ヒント (通信パイプラインの理解方法): パイプラインは、URL またはストレージによる情報伝送の形式と考えることができますが、オブジェクトの形式でカプセル化されています。

ページ配信

wx.navigateTo({
      url: 'ページ B',
      成功:res=>{
        res.eventChannel.emit('channeldata', {name:'kindear'})
      }
})

Bページ受付

  onLoad: 関数 (オプション) {
    eventChannel を this.getOpenerEventChannel() に設定します。
    イベントチャネル.on('チャネルデータ', データ => {
      コンソール.log(データ)
        // 正常に印刷されました {name:'kindear'}
    })
  }

要約する

WeChatミニプログラム開発の実践スキルであるデータ転送と保存に関するこの記事はこれで終わりです。WeChatミニプログラムデータ転送と保存に関するより関連性の高いコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • WeChatアプレットのページジャンプとデータ転送の例の詳細な説明
  • WeChatミニプログラムのページジャンプとデータ送信の詳細
  • WeChatアプレットはページデータとパラメータ転送プロセスを動的に変更します
  • WeChatアプレット学習ノート:ページをジャンプし、パラメータを渡してデータ操作を取得し、グラフィックとテキストの詳細を取得する
  • WeChatアプレット開発データ保存パラメータ転送データキャッシュ
  • WeChatアプレットクロスページデータ転送イベント応答の実装プロセスの分析
  • WeChatアプレットジャンプ転送データの例

<<:  Centos7.6にTomcat-8.5.39をインストールする方法

>>:  インスタンス化されたオブジェクトパラメータによるMySQLクエリ例の説明

推薦する

CentOS 8 仮想マシンから Windows 10 ホスト フォルダーにアクセスする方法の簡単な分析

VMware Toolsをインストールすると、仮想マシンホスト間で①テキストをコピーして貼り付けるこ...

MySQL の悲観的ロックと楽観的ロックの理解と応用分析

この記事では、例を使用して MySQL の悲観的ロックと楽観的ロックについて説明します。ご参考までに...

Vue はウェブページの言語切り替えの国際化を実装します

1. 基本的な手順1: yarn add vue-i18nをインストールするこのパスに新しい .js...

Vue 仮想 Dom から実際の Dom への変換

別のツリー構造があるJavascriptオブジェクトでは、このツリーが本物であると伝えるだけでよいD...

Mysql SQL ステートメントのコメント

MySQL SQL ステートメントにコメントを追加できます。MySQL SQL ステートメントのコメ...

Vue3 テーブルコンポーネントの使用

目次1. Antデザインビュー1. 公式ウェブサイトアドレス2. 使い方3.電子書籍テーブルを表示す...

分散ロックの原理と3つの実装方法の詳細な説明

現在、ほぼすべての大規模な Web サイトとアプリケーションは分散方式で展開されています。分散シナリ...

VC6.0をWIN10にインストールすると使用できない問題の解決方法

VC6.0は確かに古すぎるVC6.0は昔の開発ツールです。現在のwin10では対応していません。しか...

ubuntu16.04 で nginx を完全にアンインストールするための関連コマンド

nginx の概要nginx は、無料のオープンソースの高性能 HTTP サーバーおよびリバース プ...

Baidu Maps を Web ページに埋め込み、Baidu Maps API を使用してマップをカスタマイズする詳細な手順

ウェブページにBaiduマップを挿入するBaidu Maps を自分の Web ページに追加したい場...

Vue 大画面データ表示例

効率的に要件を満たし、コンポーネント ライブラリの肥大化や車輪の再発明を避けるために、私は以前、大画...

MySQLのトランザクションとデータ一貫性処理の問題を分析する

この記事では、セキュリティ、使用方法、同時処理などを通じて、MySQL トランザクションとデータの一...

MySQL データベース JDBC プログラミング (Java は MySQL に接続します)

目次1. データベースプログラミングの基本条件2. Java でのデータベースプログラミング: JD...

MySQL 5.6 圧縮パッケージのインストール方法

MySQL には、msi インストールと zip 解凍の 2 つのインストール方法があります。 zi...

nginx で Vue プロジェクトをデプロイする方法

今日は nginx サーバーを使用するのですが、vue プロジェクトをサーバーにデプロイする必要もあ...