使用シナリオアプレットはページ A からページ B にジャンプし、ページ B で値を選択し、ページ B で選択した値をページ A で使用してページ A に戻ります。たとえば、注文ページで住所リストに移動し、住所を選択した後、注文ページに戻ります。注文ページの配送先住所は同期的に更新する必要があります。 解決一般的で簡単な解決策は、アプレットのグローバル ストレージ globalData、ローカル キャッシュ ストレージを使用し、アプレットのページ スタックを取得し、前のページの setData メソッドを呼び出し、wx.navigateTo の events プロパティを使用して、開いているページから現在のページに送信されるデータをリッスンすることです。以下に、4 つの方法の長所と短所を簡単に比較します。 1. globalDataを使用して実装する//ページA const app = getApp() //App.js インスタンスを取得する onShow() { //ライフサイクル関数 - ページ表示を監視する if (app.globalData.backData) { this.setData({ //ページBの更新された値をページにレンダリングします backData: app.globalData.backData },()=>{ delete app.globalData.backData //onShow の繰り返しレンダリングを避けるためにデータを削除します}) } } //ページB const app = getApp() //App.jsインスタンスを取得する changeBackData(){ app.globalData.backData = '変更されました' wx.back() へ移動 } 2. ローカルキャッシュストレージを使用して実装する//ページA onShow: 関数() { backData = wx.getStorageSync('backData') とします。 if(backData){ this.setData({ バックデータ },()=>{ wx.removeStorageSync('backData') }) } }, //ページB 戻りデータの変更(){ wx.setStorageSync('backData', '変更されました') wx.back() へ移動 }, 3. アプレットのページスタックを使用して実装するミニプログラムのページスタックは、他の 2 つの方法よりも便利で、レンダリングが高速です。データをレンダリングするためにページ A に戻るまで待つ必要はありません。ページ A の値はページ B で直接更新されます。ページ A に戻ると、値が更新されています。 globalData と Storage の原則は、ページ B の値を変更し、ページ A に戻り、onShow ライフサイクル関数をトリガーして、ページのレンダリングを更新することです。 //ページB 戻りデータの変更(){ const ページ = getCurrentPages(); const beforePage = pages[pages.length - 2] beforePage.setData({ // ページ A のデータをそのまま更新し、ページ A は他の操作を必要としません backData: "変更されました" }) } 4. wx.navigateTo APIを使用したイベントの実装wx.navigateTo イベントの実装原理は、デザイン パターンのパブリッシュ/サブスクライブ モデルを使用して実装されます。興味のある学生は、自分で簡単なものを実装して同じ効果を実現できます。 //ページA ページB() { wx.navigateTo({ URL: 'B', イベント: { getBackData: res => { //イベントにリスナーイベントを追加 this.setData({ バックデータ: res.backData }) }, }, }) }, //ページB 戻りデータの変更(){ const イベントチャネル = this.getOpenerEventChannel() イベントチャネル.emit('getBackData', { backData: '変更されました' }); wx.back() へ移動 } 要約する方法 1 と 2 は、ページのレンダリング効果の点では、後者の 2 つよりもわずかに遅くなります。方法 3 と 4 は、ページ B がページ A にフォールバックする前に更新をトリガーしますが、方法 1 と 2 は、ページ A に戻った後にページ A で更新をトリガーします。また、方法 1 と 2 の場合、ページ A が更新された後、ページを更新するために onShow メソッドで setData が繰り返しトリガーされるのを避けるために、globalData と Storage のデータを削除する必要があることに注意する必要があります。そのため、個人的には次の方法 3 と 4 を使用することをお勧めします。 これで、WeChatミニプログラムページで値を返したり渡したりするための4つのソリューションに関するこの記事は終了です。WeChatミニプログラムページで値を返したり渡したりすることに関するより関連性の高いコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、次の関連記事を引き続き閲覧してください。今後も123WORDPRESS.COMを応援してください。 以下もご興味があるかもしれません:
|
<<: Docker buildx を使用してマルチプラットフォーム イメージをビルドし、プライベート リポジトリにプッシュする方法
>>: sysbenchツールによるMySQLデータベースのパフォーマンステストの実装方法
質問: DockerにNginxをインストールするときに次のエラーが発生しました: docker: ...
共通コンベンションタグ自己終了タグ。閉じる必要はありません (例: img input br hr ...
シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...
この記事では主にDockerを使ってElasticSearch:バージョン6.8.4をデプロイする方...
この記事では、MySQL のスケジュールされたデータベース バックアップ操作の例について説明します。...
この例の Web カラー ピッカー機能は、ページ効果を実現するために CSS3 を使用します。つまり...
HTMLでは、中国語のフレーズ「學好好學」は「學好好學」と表現できます。プロジェクトでは、SMSアラ...
親ファイル React をインポートし、{useState} を 'react' か...
運用保守エンジニアは、初期段階では非常に大変な仕事です。この期間中、コンピューターの修理、ネットワー...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
MySQL にリモートでログインする場合、使用するアカウントには特別な要件があります。アカウントのデ...
方法 1: Google の詳細検索を使用します。たとえば、次に示すように.asp?id=9などの ...
目次1. 構造体はメモリにどのように保存されますか? 2. container_ofマクロ3. 型4...
COALESCE は、各パラメータ式 (expression_1、expression_2、...、...
1.ピクセルpx はピクセルの略語で、画面解像度に対する相対的な長さの単位です。 2. えむ参照は親...