前幾天查看小程序的API，突然發(fā)現(xiàn)wx.navigateTo()的功能升級(jí)了，出于好奇，對(duì)其進(jìn)行研究了一番。
我們知道wx.navigateTo(Object object)是保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不能跳到 tabbar 頁(yè)面。之前我們從A頁(yè)面向B頁(yè)面?zhèn)髦档臅r(shí)候，都是在URL里添加參數(shù)，在B頁(yè)面里的onLoad里進(jìn)行接收數(shù)據(jù)；但從B頁(yè)面里不能向A頁(yè)面?zhèn)鬏敂?shù)據(jù)。
現(xiàn)在，wx.navigateTo(Object object)的新功能就解決了A頁(yè)面和B頁(yè)面互相通信的問(wèn)題。
下面我們具體實(shí)踐一下這個(gè)功能，重新認(rèn)識(shí)一下wx.navigateTo(Object object)吧。
//注意事項(xiàng)//
在實(shí)踐之前，我們需要注意一下，此功能需要最低基礎(chǔ)庫(kù)為 2.7.3，我們需要設(shè)置一下基礎(chǔ)庫(kù)，設(shè)置如下：
//代碼示例//
A頁(yè)面和B頁(yè)面
A頁(yè)面向B頁(yè)面?zhèn)鬏數(shù)臄?shù)據(jù)是：“這是從A頁(yè)面向B頁(yè)面?zhèn)鬏數(shù)臄?shù)據(jù)”；
B頁(yè)面向A頁(yè)面?zhèn)鬏數(shù)臄?shù)據(jù)是：“這是從B頁(yè)面向A頁(yè)面?zhèn)鬏數(shù)臄?shù)據(jù)”。
A頁(yè)面代碼：
toA() {
wx.navigateTo({
url: '../test/test?id=1',
events: {
//events里的函數(shù)是兼聽(tīng)B頁(yè)面的事件，獲取其傳過(guò)來(lái)的數(shù)據(jù)。events里可以有多個(gè)兼聽(tīng)事件
acceptDataFromB: function(data){
console.log(data) //這是從B頁(yè)面向A頁(yè)面?zhèn)鬏數(shù)臄?shù)據(jù)
},
success: function(res) {
//通過(guò)eventChannel向B頁(yè)面發(fā)送數(shù)據(jù)。
res.eventChannel.emit('acceptDataFromA', {text: '這是從A頁(yè)面向B頁(yè)面?zhèn)鬏數(shù)臄?shù)據(jù)'})
}
})
}
B頁(yè)面代碼：
//這個(gè)頁(yè)面里接收數(shù)據(jù)和發(fā)送數(shù)據(jù)大onLoad里執(zhí)行。
onLoad: function(option) {
//獲取A頁(yè)面中url里的參數(shù)值
console.log(option.id)
//B頁(yè)面發(fā)送數(shù)據(jù)用getOpenerEventChannel()里的emit函數(shù)，接收數(shù)據(jù)用其on函數(shù)。
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptDataFromB', {text: '這是從B頁(yè)面向A頁(yè)面?zhèn)鬏數(shù)臄?shù)據(jù)'})
eventChannel.on('acceptDataFromA', function(data) {
console.log(data) //這是從A頁(yè)面向B頁(yè)面?zhèn)鬏數(shù)臄?shù)據(jù)
})
}
不知道大家有沒(méi)有看懂。一開(kāi)始我也是沒(méi)有看懂，但自己在頁(yè)面上試了一下，將各個(gè)對(duì)象數(shù)據(jù)都輸出一遍后，才明白各個(gè)對(duì)象和函數(shù)的意義。想知其中奧秘，自大行實(shí)踐一下吧。祝大家好運(yùn)，GET新技能！
可關(guān)注微信號(hào)：duzhan2018。歡迎入駐前端學(xué)習(xí)群的大家庭噢！
