使用シナリオアプレットはページ 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データベースのパフォーマンステストの実装方法
目次1. 遅延読み込みとは何ですか? 2. 遅延読み込みを実装する🌄: 2.1 最初の方法: 2.2...
目次1. はじめに2. 実際の事例1. App.vueを変更する2. レイアウトを調整する3. ジャ...
最近、会社でアプリを開発する準備をしており、最終的に開発には uni-app フレームワークを使用す...
目次ベース戻り値の型文字列とブール値数値とbigintシンボル未定義関数物体他のよくある質問参照エラ...
今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。定義と使用法: <...
序文JavaScript を学習した人なら誰でも、さまざまな環境で this がどこを指すかという問...
この記事の著者@子木yoyoが個人ブログに投稿したものです。 Web ページでもモバイル アプリでも...
1. 機能紹介sed (Stream EDitor) は、コンテンツを 1 行ずつ処理するストリーム...
目次概要コンポーネント間でデータを共有する方法Vuex の原則の紹介Vuexはコンポーネントのグロー...
今日はたまたま友人のサーバーの移転を手伝うことになり、サーバーの基本的な設備の設定を行ったのですが、...
目次キューマイクロタスク非同期/待機メッセージチャネルやっと付録ここ二日間、「タイムリーな setT...
目次序文1. Tomcat クラスローダー構造図: 2. Tomcat のクラスロードプロセスの説明...
MySQL グリーンバージョン設定コードと 1067 エラーMySQL エンコーディングを表示 ...
序文モバイル端末のREM適応ソリューションのレビューと概要remの使い方rem 単位の計算は、HTM...
pre 要素は、フォーマット済みのテキストを定義します。 pre 要素で囲まれたテキストでは、通常、...