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を応援してください。

以下もご興味があるかもしれません: