微信小程序wx.navigateTo方法里的events參數(shù)使用詳情及場景
個(gè)人理解wx.navigateTo方法里的events參數(shù)使用詳情及場景
微信小程序在2.7.3版本wx.navigateTo這個(gè)方法中新增了events這個(gè)屬性
微信官方文檔里面寫的很模糊,在微信公眾平臺的社區(qū)里也有一些人在問,我第一次看到也是先百度了一下使用場景,搜到的也只是copy官方文檔的抄襲黨,并沒什么卵用,相信大家都是看的一頭霧水,所以用業(yè)余時(shí)間研究了一下,以下僅代表個(gè)人的理解,如果有更好的想法或者使用不當(dāng)?shù)牡胤较M蠹姨岢龇乐刮业膫€(gè)人想法誤導(dǎo)大家
個(gè)人理解這個(gè)新增的屬性使用的場景就是能在一個(gè)頁面執(zhí)行另一個(gè)頁面的方法,以大家最熟悉的購物為例,假設(shè)現(xiàn)在大家在購物的訂單列表頁,然后想從這個(gè)頁跳轉(zhuǎn)到評論訂單的頁面,在評論完成后刷新訂單頁面的訂單,原來的處理方式就是評論完回到訂單頁在onShow方法中執(zhí)行刷新訂單的操作,用戶體驗(yàn)會差一點(diǎn),有了events這個(gè)屬性就能解決這個(gè)問題
//訂單頁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'} }) }, //提交評論的方法同時(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傳遞的方法,也就是說當(dāng)前所在的頁面(也就是執(zhí)行wx.navigateTo方法的頁面 )的emit的方法在被打開也就是要去的頁面里on去接收傳遞的數(shù)據(jù),如果被打開的頁面里有執(zhí)行的方法同時(shí)又要調(diào)用當(dāng)前頁面的方法,就在被打開頁面里也有執(zhí)行emit的地方,在當(dāng)前頁面里events參數(shù)里的方法就是接收被打開頁面emit的同名的方法就能接收到被打開頁面執(zhí)行某一方法同時(shí)執(zhí)行emit傳遞到當(dāng)前頁面的數(shù)據(jù),也就是相當(dāng)于被打開頁面已經(jīng)打開之后,執(zhí)行某一方法可以同時(shí)調(diào)用之前執(zhí)行wx.navigateTo方法的頁面里面的方法,個(gè)人理解使用場景就是能在一個(gè)頁面執(zhí)行了另一個(gè)頁面的方法,例如執(zhí)行一些刷新操作之類的,防止在onshow中調(diào)用還是會被看到刷新過程影響使用體驗(yàn),個(gè)人理解,不喜勿噴
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持我們。
上一篇:js實(shí)現(xiàn)多個(gè)標(biāo)題吸頂效果
欄 目:JavaScript
本文標(biāo)題:微信小程序wx.navigateTo方法里的events參數(shù)使用詳情及場景
本文地址:http://mengdiqiu.com.cn/a1/JavaScript/9267.html
您可能感興趣的文章
- 04-02java吃豆人代碼 js吃豆人
- 04-02微信挑一挑java代碼 微信挑一挑java代碼怎么做
- 01-10小程序簡單兩欄瀑布流效果的實(shí)現(xiàn)
- 01-10微信小程序批量上傳圖片到七牛(推薦)
- 01-10微信小程序跨頁面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過程解析
- 01-10微信小程序按順序同步執(zhí)行的兩種方式
- 01-10ES6常用小技巧總結(jié)【去重、交換、合并、反轉(zhuǎn)、迭代、計(jì)算等】
- 01-10微信小程序?qū)崿F(xiàn)簽字功能
- 01-10JS實(shí)現(xiàn)關(guān)閉小廣告特效
- 01-10javascript實(shí)現(xiàn)點(diǎn)擊星星小游戲


閱讀排行
本欄相關(guān)
- 04-02javascript點(diǎn)線,點(diǎn)線的代碼
- 04-02javascript潛力,javascript強(qiáng)大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報(bào),JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁面
- 04-02javascript前身,javascript的前身
隨機(jī)閱讀
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 08-05織夢dedecms什么時(shí)候用欄目交叉功能?
- 04-02jquery與jsp,用jquery
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 01-10delphi制作wav文件的方法
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-10C#中split用法實(shí)例總結(jié)
- 01-10使用C語言求解撲克牌的順子及n個(gè)骰子
- 01-11ajax實(shí)現(xiàn)頁面的局部加載