微信小程序頁面返回傳值的4種解決方案匯總
使用場(chǎng)景
小程序從A頁面跳轉(zhuǎn)到B頁面,在B頁面選擇一個(gè)值后返回到A頁面,在A頁面使用在B頁面選中的值。例如:在購買訂單頁面跳轉(zhuǎn)到地址列表,選擇完地址以后回退到訂單頁面,訂單頁面的配送地址需要同步更新。
解決方案
常見的比容要容易解決的方案是使用小程序的全局存儲(chǔ)globalData、本地緩存storage、獲取小程序的頁面棧,調(diào)用上一個(gè)Page的setData方法、以及利用wx.navigateTo的events屬性監(jiān)聽被打開頁面發(fā)送到當(dāng)前頁面的數(shù)據(jù)。下面給大家簡(jiǎn)單對(duì)比下四種方法的優(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)
使小程序的頁面棧,比其他兩種方式會(huì)更方便一點(diǎn)而且渲染的會(huì)更快一些,不需要等回退到A頁面上再把數(shù)據(jù)渲染出來,在B頁面上的直接就會(huì)更新A頁面上的值,回退到A頁面的時(shí)候,值已經(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({ //會(huì)直接更新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é)可以自己動(dòng)手實(shí)現(xiàn)一個(gè)簡(jiǎ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()
}
總結(jié)
1和2兩種方法在頁面渲染效果上比后面兩種稍微慢一點(diǎn),3和4兩種方法在B頁面回退到A頁面之前已經(jīng)觸發(fā)了更新,而1和2兩種方法是等返回到A頁面之后,在A頁面才觸發(fā)更新。并且1和2兩種方式,要考慮到A頁面更新完以后要?jiǎng)h除globalData和Storage的數(shù)據(jù),避免onShow方法里面重復(fù)觸發(fā)setData更新頁面,所以個(gè)人更推薦大家使用后面的3和4兩種方式。
到此這篇關(guān)于微信小程序頁面返回傳值的4種解決方案的文章就介紹到這了,更多相關(guān)微信小程序頁面返回傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在JavaScript里防止事件函數(shù)高頻觸發(fā)和高頻調(diào)用的方法
這篇文章主要介紹了在JavaScript里防止事件函數(shù)高頻觸發(fā)和高頻調(diào)用的方法,本文方法從Underscore.js中摘錄而來,需要的朋友可以參考下2014-09-09
JS獲取checkbox的個(gè)數(shù)簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄狫S獲取checkbox的個(gè)數(shù)簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
JS圖片自動(dòng)輪換效果實(shí)現(xiàn)思路附截圖
這篇文章主要介紹了JS實(shí)現(xiàn)的圖片自動(dòng)輪換效果,有具體的實(shí)現(xiàn)思路及截圖,希望對(duì)大家學(xué)習(xí)有所幫助2014-04-04
js實(shí)現(xiàn)帶簡(jiǎn)單彈性運(yùn)動(dòng)的導(dǎo)航條
本篇文章主要分享了js實(shí)現(xiàn)帶簡(jiǎn)單彈性運(yùn)動(dòng)導(dǎo)航條的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02
Javascript 生成無限下拉列表實(shí)現(xiàn)代碼
js生成無線下拉列表的實(shí)現(xiàn)代碼。2009-03-03
Bootstrap彈出框(modal)垂直居中的問題及解決方案詳解
這篇文章主要介紹了Bootstrap彈出框(modal)垂直居中的問題及解決方案詳解的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
JAVA Web實(shí)時(shí)消息后臺(tái)服務(wù)器推送技術(shù)---GoEasy
本篇文章主要介紹了PHP實(shí)現(xiàn)Web實(shí)時(shí)消息后臺(tái)服務(wù)器推送技術(shù),這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2016-11-11
JavaScript數(shù)據(jù)分析之交集,并集,對(duì)稱差集

