微信小程序頁(yè)面返回傳值的4種解決方案匯總

目錄

使用場(chǎng)景

小程序從A頁(yè)面跳轉到B頁(yè)面，在B頁(yè)面選擇一個(gè)值后返回到A頁(yè)面，在A(yíng)頁(yè)面使用在B頁(yè)面選中的值。例如：在購買(mǎi)訂單頁(yè)面跳轉到地址列表，選擇完地址以后回退到訂單頁(yè)面，訂單頁(yè)面的配送地址需要同步更新。

解決方案

常見(jiàn)的比容要容易解決的方案是使用小程序的全局存儲globalData、本地緩存、獲取小程序的頁(yè)面棧，調用上一個(gè)Page的setData方法、以及利用的events屬性監聽(tīng)被打開(kāi)頁(yè)面發(fā)送到當前頁(yè)面的數據。下面給大家簡(jiǎn)單對比下四種方法的優(yōu)缺點(diǎn)：

1、使用globalData實(shí)現

//page A
const app = getApp() //獲取App.js實(shí)例
onShow() {//生命周期函數--監聽(tīng)頁(yè)面顯示
  if (app.globalData.backData) {
    this.setData({ //將B頁(yè)面更新完的值渲染到頁(yè)面上
      backData: app.globalData.backData
    },()=>{
     	delete app.globalData.backData //刪除數據 避免onShow重復渲染
    })
  }
}
//page B
const app = getApp() //獲取App.js實(shí)例
changeBackData(){
   app.globalData.backData = '我被修改了'
   wx.navigateBack()
}

2、使用本地緩存Storage實(shí)現

//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頁(yè)面棧實(shí)現

使小程序的頁(yè)面棧，比其他兩種方式會(huì )更方便一點(diǎn)而且渲染的會(huì )更快一些，不需要等回退到A頁(yè)面上再把數據渲染出來(lái)，在B頁(yè)面上的直接就會(huì )更新A頁(yè)面上的值，回退到A頁(yè)面的時(shí)候，值已經(jīng)被更新了。globalData和Storage實(shí)現的原理都是在B頁(yè)面上修改完值以后，回退到A頁(yè)面，觸發(fā)onShow生命周期函數，來(lái)更新頁(yè)面渲染。

//page B
changeBackData(){
    const pages = getCurrentPages();
    const beforePage = pages[pages.length - 2]
    beforePage.setData({  //會(huì )直接更新A頁(yè)面的數據，A頁(yè)面不需要其他操作
      backData: "我被修改了"
    })
}

4、使用wx.navigateTo API的events實(shí)現

wx.navigateTo的events的實(shí)現原理是利用設計模式的發(fā)布訂閱模式實(shí)現的，有興趣的同學(xué)可以自己動(dòng)手實(shí)現一個(gè)簡(jiǎn)單的，也可以實(shí)現相同的效果。

//page A
 goPageB() {
    wx.navigateTo({
      url: 'B',
      events: {
        getBackData: res => { //在events里面添加監聽(tīng)事件
          this.setData({
            backData: res.backData
          })
        },
      },
    })
  },
//page B	
changeBackData(){
    const eventChannel = this.getOpenerEventChannel()
       eventChannel.emit('getBackData', {  
     	 backData: '我被修改了'
    });
     wx.navigateBack()
 }

總結

1和2兩種方法在頁(yè)面渲染效果上比后面兩種稍微慢一點(diǎn)，3和4兩種方法在B頁(yè)面回退到A頁(yè)面之前已經(jīng)觸發(fā)了更新，而1和2兩種方法是等返回到A頁(yè)面之后，在A(yíng)頁(yè)面才觸發(fā)更新。并且1和2兩種方式，要考慮到A頁(yè)面更新完以后要刪除globalData和Storage的數據，避免onShow方法里面重復觸發(fā)setData更新頁(yè)面，所以個(gè)人更推薦大家使用后面的3和4兩種方式。

到此這篇關(guān)于微信小程序頁(yè)面返回傳值的4種解決方案的文章就介紹到這了,更多相關(guān)微信小程序頁(yè)面返回傳值內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！