個人理解wx.navigateTo方法里的events參數(shù)使用詳情及場景

微信小程序在2.7.3版本wx.navigateTo這個方法中新增了events這個屬性
微信官方文檔里面寫的很模糊，在微信公眾平臺的社區(qū)里也有一些人在問，我第一次看到也是先百度了一下使用場景，搜到的也只是copy官方文檔的抄襲黨，并沒什么卵用，相信大家都是看的一頭霧水，所以用業(yè)余時間研究了一下，以下僅代表個人的理解，如果有更好的想法或者使用不當(dāng)?shù)牡胤较Ｍ蠹姨岢龇乐刮业膫€人想法誤導(dǎo)大家

個人理解這個新增的屬性使用的場景就是能在一個頁面執(zhí)行另一個頁面的方法,以大家最熟悉的購物為例，假設(shè)現(xiàn)在大家在購物的訂單列表頁，然后想從這個頁跳轉(zhuǎn)到評論訂單的頁面，在評論完成后刷新訂單頁面的訂單，原來的處理方式就是評論完回到訂單頁在onShow方法中執(zhí)行刷新訂單的操作，用戶體驗會差一點，有了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'}，可能讓大家蒙了，其實這個和vue的組件之間傳遞數(shù)據(jù)有點相似，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)用還是會被看到刷新過程影響使用體驗，個人理解，不喜勿噴

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論