WeChatミニプログラムページで値を返す4つの解決策のまとめ

WeChatミニプログラムページで値を返す4つの解決策のまとめ

使用シナリオ

アプレットはページ 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を応援してください。

以下もご興味があるかもしれません:
  • WeChatアプレットで値を渡したり取得したりするいくつかの方法のまとめ
  • WeChatアプレットページの価値転送の詳細な説明
  • WeChatアプレットのカスタムコンポーネントのカプセル化と親子コンポーネントの値転送方法
  • WeChatアプレットデータのパッケージ化、パラメータ値の転送、その他の経験の共有
  • WeChatアプレットでページジャンプ値転送と値取得を実装する方法の分析
  • WeChatアプレットのカスタムコンポーネント値転送ページとコンポーネントデータ転送操作例
  • WeChatアプレットで値を渡したり取得したりする方法の詳細な説明
  • WeChatアプレットで子ページから親ページに値を渡す例の詳細な説明
  • WeChatミニプログラムページにリダイレクトするときに値を転送する方法
  • WeChatミニプログラム:データの保存、値の転送、値の取得の詳細な説明

<<:  Docker buildx を使用してマルチプラットフォーム イメージをビルドし、プライベート リポジトリにプッシュする方法

>>:  sysbenchツールによるMySQLデータベースのパフォーマンステストの実装方法

推薦する

フロントエンドは画像を遅延ロードする方法を知っている必要があります(3つの方法)

目次1. 遅延読み込みとは何ですか? 2. 遅延読み込みを実装する🌄: 2.1 最初の方法: 2.2...

Vue3 (III) ウェブサイトホームページレイアウト開発

目次1. はじめに2. 実際の事例1. App.vueを変更する2. レイアウトを調整する3. ジャ...

uni-app を使用して上部のナビゲーション バーにボタンと検索ボックスを表示する方法

最近、会社でアプリを開発する準備をしており、最終的に開発には uni-app フレームワークを使用す...

js での typeof の使い方を理解するための記事

目次ベース戻り値の型文字列とブール値数値とbigintシンボル未定義関数物体他のよくある質問参照エラ...

HTML サブタグと sup タグ

今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。定義と使用法: <...

NodeJSとブラウザにおけるこのキーワードの違い

序文JavaScript を学習した人なら誰でも、さまざまな環境で this がどこを指すかという問...

インタラクティブデザインでページングと読み込みのどちらを選択するかについての説明

この記事の著者@子木yoyoが個人ブログに投稿したものです。 Web ページでもモバイル アプリでも...

Linux sedコマンドの使用

1. 機能紹介sed (Stream EDitor) は、コンテンツを 1 行ずつ処理するストリーム...

Vuexの役割についての深い理解

目次概要コンポーネント間でデータを共有する方法Vuex の原則の紹介Vuexはコンポーネントのグロー...

Docker nginx + https サブドメイン設定の詳細なチュートリアル

今日はたまたま友人のサーバーの移転を手伝うことになり、サーバーの基本的な設備の設定を行ったのですが、...

js で 0ms 遅延タイマーを実装するいくつかの方法

目次キューマイクロタスク非同期/待機メッセージチャネルやっと付録ここ二日間、「タイムリーな setT...

Tomcatのクラスロードメカニズムのプロセスとソースコード分析

目次序文1. Tomcat クラスローダー構造図: 2. Tomcat のクラスロードプロセスの説明...

MySQL グリーンバージョン設定コードと 1067 エラーの詳細

MySQL グリーンバージョン設定コードと 1067 エラーMySQL エンコーディングを表示 &#...

rem をモバイル デバイスに適応させる方法の例

序文モバイル端末のREM適応ソリューションのレビューと概要remの使い方rem 単位の計算は、HTM...

preタグを自動的に折り返すためのサンプルコード

pre 要素は、フォーマット済みのテキストを定義します。 pre 要素で囲まれたテキストでは、通常、...