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データベースのパフォーマンステストの実装方法

推薦する

Nginx の Docker インストールの問題とエラー分析

質問: DockerにNginxをインストールするときに次のエラーが発生しました: docker: ...

HTML コード作成ガイド

共通コンベンションタグ自己終了タグ。閉じる必要はありません (例: img input br hr ...

js を使用して 2 つの HTML ウィンドウ間で通信する方法

シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...

ElasticSearch と ElasticSearch-Head の Docker デプロイメントの実装

この記事では主にDockerを使ってElasticSearch:バージョン6.8.4をデプロイする方...

MySQL スケジュールされたデータベース バックアップ操作の例

この記事では、MySQL のスケジュールされたデータベース バックアップ操作の例について説明します。...

CSS3 と JavaScript を使用して Web カラー ピッカーのサンプル コードを開発する

この例の Web カラー ピッカー機能は、ページ効果を実現するために CSS3 を使用します。つまり...

HTML で中国語を UTF-8 に変換する方法

HTMLでは、中国語のフレーズ「學好好學」は「學好好學」と表現できます。プロジェクトでは、SMSアラ...

React 手書きタブ切り替え問題

親ファイル React をインポートし、{useState} を 'react' か...

Linuxの運用・保守の基礎知識から上級者向け知識までをまとめました

運用保守エンジニアは、初期段階では非常に大変な仕事です。この期間中、コンピューターの修理、ネットワー...

HTML マークアップ言語 - テーブルタグ

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

MySQL ユーザーのホスト属性を素早く変更する方法

MySQL にリモートでログインする場合、使用するアカウントには特別な要件があります。アカウントのデ...

SQL インジェクションのある Web サイトを見つける方法 (必読)

方法 1: Google の詳細検索を使用します。たとえば、次に示すように.asp?id=9などの ...

LinuxカーネルマクロContainer_Ofの詳細な説明

目次1. 構造体はメモリにどのように保存されますか? 2. container_ofマクロ3. 型4...

MySql COALESCE 関数の使用コード例

COALESCE は、各パラメータ式 (expression_1、expression_2、...、...

CSS における px、em、rem、%、vw、vh 単位の違いの詳細な説明

1.ピクセルpx はピクセルの略語で、画面解像度に対する相対的な長さの単位です。 2. えむ参照は親...