微信小程序wx.navigateTo方法里的events參數(shù)使用詳情及場(chǎng)景
個(gè)人理解wx.navigateTo方法里的events參數(shù)使用詳情及場(chǎng)景
微信小程序在2.7.3版本wx.navigateTo這個(gè)方法中新增了events這個(gè)屬性
微信官方文檔里面寫的很模糊,在微信公眾平臺(tái)的社區(qū)里也有一些人在問(wèn),我第一次看到也是先百度了一下使用場(chǎng)景,搜到的也只是copy官方文檔的抄襲黨,并沒(méi)什么卵用,相信大家都是看的一頭霧水,所以用業(yè)余時(shí)間研究了一下,以下僅代表個(gè)人的理解,如果有更好的想法或者使用不當(dāng)?shù)牡胤较M蠹姨岢龇乐刮业膫€(gè)人想法誤導(dǎo)大家
個(gè)人理解這個(gè)新增的屬性使用的場(chǎng)景就是能在一個(gè)頁(yè)面執(zhí)行另一個(gè)頁(yè)面的方法,以大家最熟悉的購(gòu)物為例,假設(shè)現(xiàn)在大家在購(gòu)物的訂單列表頁(yè),然后想從這個(gè)頁(yè)跳轉(zhuǎn)到評(píng)論訂單的頁(yè)面,在評(píng)論完成后刷新訂單頁(yè)面的訂單,原來(lái)的處理方式就是評(píng)論完回到訂單頁(yè)在onShow方法中執(zhí)行刷新訂單的操作,用戶體驗(yàn)會(huì)差一點(diǎn),有了events這個(gè)屬性就能解決這個(gè)問(wèn)題
//訂單頁(yè)js,order.js
//跳轉(zhuǎn)去評(píng)論頁(yè)的方法
fnToComment(){
wx.navigateTo({
url: `../comment/comment`,
events:{
//執(zhí)行刷新訂單的操作data是從評(píng)論頁(yè)傳遞的參數(shù)
fnFefresh:function(data){
console.log(data)//此處接收的是comment.js傳遞的{data:'2222'}
}
},
success: function (res) {
//跳轉(zhuǎn)comment頁(yè)要執(zhí)行的方法
res.eventChannel.emit('fresh', { data: '1111' })
}
})
},
//評(píng)論頁(yè)js,comment.js
var eventChannel
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
eventChannel = this.getOpenerEventChannel()
// 監(jiān)聽(tīng)fresh事件,獲取上一頁(yè)面通過(guò)eventChannel傳送到當(dāng)前頁(yè)面的數(shù)據(jù)
eventChannel.on('fresh', function (data) {
console.log(data)//此處接收的是order.js傳遞的{data:'1111'}
})
},
//提交評(píng)論的方法同時(shí)刷新order.js的刷新訂單方法
fnComment(){
//刷新order.js的events屬性中的fnFefresh方法
eventChannel.emit('fnFefresh', { data: '2222' });
}
})
####### 官方給的文檔傳遞的數(shù)據(jù)都是這個(gè){data:‘test'},可能讓大家蒙了,其實(shí)這個(gè)和vue的組件之間傳遞數(shù)據(jù)有點(diǎn)相似,emit就是相當(dāng)于用于發(fā)送事件,on就是相當(dāng)于接收同名的emit傳遞的方法,也就是說(shuō)當(dāng)前所在的頁(yè)面(也就是執(zhí)行wx.navigateTo方法的頁(yè)面 )的emit的方法在被打開(kāi)也就是要去的頁(yè)面里on去接收傳遞的數(shù)據(jù),如果被打開(kāi)的頁(yè)面里有執(zhí)行的方法同時(shí)又要調(diào)用當(dāng)前頁(yè)面的方法,就在被打開(kāi)頁(yè)面里也有執(zhí)行emit的地方,在當(dāng)前頁(yè)面里events參數(shù)里的方法就是接收被打開(kāi)頁(yè)面emit的同名的方法就能接收到被打開(kāi)頁(yè)面執(zhí)行某一方法同時(shí)執(zhí)行emit傳遞到當(dāng)前頁(yè)面的數(shù)據(jù),也就是相當(dāng)于被打開(kāi)頁(yè)面已經(jīng)打開(kāi)之后,執(zhí)行某一方法可以同時(shí)調(diào)用之前執(zhí)行wx.navigateTo方法的頁(yè)面里面的方法,個(gè)人理解使用場(chǎng)景就是能在一個(gè)頁(yè)面執(zhí)行了另一個(gè)頁(yè)面的方法,例如執(zhí)行一些刷新操作之類的,防止在onshow中調(diào)用還是會(huì)被看到刷新過(guò)程影響使用體驗(yàn),個(gè)人理解,不喜勿噴
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解小程序如何改變onLoad的執(zhí)行時(shí)機(jī)
這篇文章主要介紹了詳解小程序如何改變onLoad的執(zhí)行時(shí)機(jī),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
es6 super關(guān)鍵字的理解與應(yīng)用實(shí)例分析
這篇文章主要介紹了es6 super關(guān)鍵字的理解與應(yīng)用,結(jié)合實(shí)例形式分析了es6 super關(guān)鍵字的功能、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
微信小程序開(kāi)發(fā)經(jīng)驗(yàn)總結(jié)(推薦)
本篇文章主要介紹了微信小程序開(kāi)發(fā)經(jīng)驗(yàn)總結(jié)(推薦),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
JavaScript canvas實(shí)現(xiàn)七彩時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)七彩時(shí)鐘效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05
基于JavaScript實(shí)現(xiàn)飄落星星特效
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)飄落星星特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08
JavaScript獲取對(duì)象在頁(yè)面中位置坐標(biāo)的方法
這篇文章主要介紹了JavaScript獲取對(duì)象在頁(yè)面中位置坐標(biāo)的方法,涉及JavaScript操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-02-02

