目錄

• 使用場景
  
• 解決方案
  
• 1、使用globalData實現
• 2、使用本地快取Storage實現
• 3、使用小程式的Page頁面棧實現
• 4、使用wx.navigateTo API的events實現
• 總結
  

使用場景

小程式從A頁面跳轉到B頁面，在B頁面選擇一個值後返回到A頁面，在A頁面使用在B頁面選中的值。例如：在購買訂單頁面跳轉到地址列表，選擇完地址以後回退到訂單頁面，訂單頁面的配送地址需要同步更新。

解決方案

常見的比容要容易解決的方案是使用小程式的全域性儲存globalData、本地快取storage、獲取小程式的頁面棧，呼叫上一個Page的setData方法、以及利用wx.navigateTo的events屬性監聽被開啟頁面傳送到當前頁面的資料。下面給大家簡單對比下四種方法的優缺點：

1、使用globalData實現

//page A
const app = getApp() //獲取App.例項
onShow() {//生命週期函式--監聽頁面顯示
  if (app.globalData.backData) {
    this.setData({ //將B頁面更新完的值渲染到頁面上
      backData: app.globalData.backData
    },()=>{
     	delete app.globalData.backData //刪除資料 避免onShow重複渲染
    })
  }
}
//page B
const app = getApp() //獲取App.js例項
changeBackData(){
   app.globalData.backData = '我被修改了'
   wx.navigateBack()
}

2、使用本地快取Storage實現

//page A
  onShow: function () {
    let backData = wx.getStorageSync('backData')
    if(backData){
       this.setData({
     		 backData
    	},()=>{
     		 wx.removeStorageSync('backData')
    	})
    }
  },//page B
 changeBackData(){
    wx.setStorageSync('backData','我被修改了')
    wx.navigateBack()
 },

3、使用小程式的Page頁面棧實現

使小程式的頁面棧，比其他兩種方式會更方便一點而且渲染的會更快一些，不需要等回退到A頁面上再把資料渲染出來，在B頁面上的直接就會更新A頁面上的值，回退到A頁面的時候，值已經被更新了。globalData和Storage實現的原理都是在B頁面上修改完值以後，回退到A頁面，觸發onShow生命週期函式，來更新頁面渲染。

//page B
changeBackData(){
    const pages = getCurrentPages();
    const beforePage = pages[pages.length - 2]
    beforePage.setData({  //會直接更新A頁面的資料，A頁面不需要其他操作
      back客棧Data: "我被修改了"
    })
}

4、使用wx.navigateTo API的events實現

wx.navigateTo的events的實現原理是利用設計模式的釋出訂閱模式實現的，有興趣的同學可以自己動手實現一個簡單的，也可以實現相同的效果。

//page A
 goPageB() {
    wx.navigateTo({
      url: 'B',events: {
        getBackData: res => { //在events裡面新增監聽事件
          this.setData({
            backData: res.backData
          })
        },},})
  },//page B	
changeBackData(){
    const eventChannel = this.getOpenerEventChannel()
       eventChannel.emit('getBackData',{  
     	 backData: '我www.cppcns.com被修改了'
    });
     wx.na程式設計客棧vigateBack()
 }

總結

1和2兩種方法在頁面渲染效果上比後面兩種稍微慢一點，3和4兩種方法在B頁面回退到A頁面之前已經觸發了更新，而1和2兩種方法是等返回到A頁面之後，在A頁面才觸發更新。並且1和2兩種方式，要考慮到A頁面更新完以後要刪除globalData和Storage的資料，避免onShow方法裡面重複觸發setData更新頁面，所以個人更推薦大家使用後面的3和4兩種方式。

到此這篇關於微信小程式頁面返回傳值的4種解決方案的文章就介紹到這了,更多相關微信小程式頁面返回傳值內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！