微信小程序wx.navigateTo方法里的events參數(shù)使用詳情及場景
個人理解wx.navigateTo方法里的events參數(shù)使用詳情及場景
微信小程序在2.7.3版本wx.navigateTo這個方法中新增了events這個屬性
微信官方文檔里面寫的很模糊,在微信公眾平臺的社區(qū)里也有一些人在問,我第一次看到也是先百度了一下使用場景,搜到的也只是copy官方文檔的抄襲黨,并沒什么卵用,相信大家都是看的一頭霧水,所以用業(yè)余時間研究了一下,以下僅代表個人的理解,如果有更好的想法或者使用不當(dāng)?shù)牡胤较M蠹姨岢龇乐刮业膫€人想法誤導(dǎo)大家
個人理解這個新增的屬性使用的場景就是能在一個頁面執(zhí)行另一個頁面的方法,以大家最熟悉的購物為例,假設(shè)現(xiàn)在大家在購物的訂單列表頁,然后想從這個頁跳轉(zhuǎn)到評論訂單的頁面,在評論完成后刷新訂單頁面的訂單,原來的處理方式就是評論完回到訂單頁在onShow方法中執(zhí)行刷新訂單的操作,用戶體驗(yàn)會差一點(diǎn),有了events這個屬性就能解決這個問題
//訂單頁js,order.js
//跳轉(zhuǎn)去評論頁的方法
fnToComment(){
wx.navigateTo({
url: `../comment/comment`,
events:{
//執(zhí)行刷新訂單的操作data是從評論頁傳遞的參數(shù)
fnFefresh:function(data){
console.log(data)//此處接收的是comment.js傳遞的{data:'2222'}
}
},
success: function (res) {
//跳轉(zhuǎn)comment頁要執(zhí)行的方法
res.eventChannel.emit('fresh', { data: '1111' })
}
})
},
//評論頁js,comment.js
var eventChannel
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
eventChannel = this.getOpenerEventChannel()
// 監(jiān)聽fresh事件,獲取上一頁面通過eventChannel傳送到當(dāng)前頁面的數(shù)據(jù)
eventChannel.on('fresh', function (data) {
console.log(data)//此處接收的是order.js傳遞的{data:'1111'}
})
},
//提交評論的方法同時刷新order.js的刷新訂單方法
fnComment(){
//刷新order.js的events屬性中的fnFefresh方法
eventChannel.emit('fnFefresh', { data: '2222' });
}
})
####### 官方給的文檔傳遞的數(shù)據(jù)都是這個{data:‘test'},可能讓大家蒙了,其實(shí)這個和vue的組件之間傳遞數(shù)據(jù)有點(diǎn)相似,emit就是相當(dāng)于用于發(fā)送事件,on就是相當(dāng)于接收同名的emit傳遞的方法,也就是說當(dāng)前所在的頁面(也就是執(zhí)行wx.navigateTo方法的頁面 )的emit的方法在被打開也就是要去的頁面里on去接收傳遞的數(shù)據(jù),如果被打開的頁面里有執(zhí)行的方法同時又要調(diào)用當(dāng)前頁面的方法,就在被打開頁面里也有執(zhí)行emit的地方,在當(dāng)前頁面里events參數(shù)里的方法就是接收被打開頁面emit的同名的方法就能接收到被打開頁面執(zhí)行某一方法同時執(zhí)行emit傳遞到當(dāng)前頁面的數(shù)據(jù),也就是相當(dāng)于被打開頁面已經(jīng)打開之后,執(zhí)行某一方法可以同時調(diào)用之前執(zhí)行wx.navigateTo方法的頁面里面的方法,個人理解使用場景就是能在一個頁面執(zhí)行了另一個頁面的方法,例如執(zhí)行一些刷新操作之類的,防止在onshow中調(diào)用還是會被看到刷新過程影響使用體驗(yàn),個人理解,不喜勿噴
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript使表單中的內(nèi)容顯示在屏幕上的方法
這篇文章主要介紹了JavaScript使表單中的內(nèi)容顯示在屏幕上的方法,涉及javascript針對表單元素操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06
javascript實(shí)現(xiàn)不同顏色Tab標(biāo)簽切換效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)不同顏色Tab標(biāo)簽切換效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-04-04
JavaScritp添加url參數(shù)并將參數(shù)加入到url中及更改url參數(shù)的方法
這篇文章給大家介紹javascript添加url參數(shù)方法,將參數(shù)加入到url中,涉及到url添加參數(shù)的相關(guān)知識,關(guān)于js添加url參數(shù)感興趣的朋友可以參考下本篇文章2015-10-10
js動態(tài)添加onclick事件可傳參數(shù)與不傳參數(shù)
本節(jié)主要介紹了js動態(tài)添加onclick事件可傳參數(shù)與不傳參數(shù),需要的朋友可以參考下2014-07-07
使用js實(shí)現(xiàn)按鈕控制文本框加1減1應(yīng)用于小時+分鐘
正如標(biāo)題所言使用js實(shí)現(xiàn)按鈕控制文本框加1減1,此類主要應(yīng)用于小時+分鐘,下面有個不錯的示例,喜歡的朋友可以參考下2013-12-12
js簡單實(shí)現(xiàn)Select互換數(shù)據(jù)的方法
這篇文章主要介紹了js簡單實(shí)現(xiàn)Select互換數(shù)據(jù)的方法,涉及javascript動態(tài)操作select中option節(jié)點(diǎn)的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
uniapp開發(fā)H5使用formData上傳文件解決方案
我們很多時候上傳文件就是使用FormData,然而uniapp默認(rèn)不支持FormData類型數(shù)據(jù)的上傳,下面這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)H5使用formData上傳文件的相關(guān)資料,需要的朋友可以參考下2023-12-12
?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別
在等于運(yùn)算符中,如果比較的內(nèi)容包含對象類型數(shù)據(jù),則會涉及隱式轉(zhuǎn)換,那么就會調(diào)用toString()函數(shù)和valueOf()函數(shù),本文主要介紹了?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別,感興趣的可以了解一下2022-04-04
JavaScript實(shí)現(xiàn)數(shù)組在指定位置插入若干元素的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)組在指定位置插入若干元素的方法,涉及javascript中splice方法的使用技巧,非常具有實(shí)用價值,需要的朋友可以參考下2015-04-04

