微信小程序頁面返回傳值的解決方案是什么

這篇文章主要介紹“微信小程序頁面返回傳值的解決方案是什么”，在日常操作中，相信很多人在微信小程序頁面返回傳值的解決方案是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”微信小程序頁面返回傳值的解決方案是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

使用場景

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

解決方案

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

1、使用globalData實(shí)現(xiàn)

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

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

//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頁面棧實(shí)現(xiàn)

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

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

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

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

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

到此，關(guān)于“微信小程序頁面返回傳值的解決方案是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！