1. 程式人生 > 程式設計 >微信小程式wx.navigateTo方法裡的events引數使用詳情及場景

微信小程式wx.navigateTo方法裡的events引數使用詳情及場景

個人理解wx.navigateTo方法裡的events引數使用詳情及場景

微信小程式在2.7.3版本wx.navigateTo這個方法中新增了events這個屬性
微信官方文件裡面寫的很模糊,在微信公眾平臺的社群裡也有一些人在問,我第一次看到也是先百度了一下使用場景,搜到的也只是copy官方文件的抄襲黨,並沒什麼卵用,相信大家都是看的一頭霧水,所以用業餘時間研究了一下,以下僅代表個人的理解,如果有更好的想法或者使用不當的地方希望大家提出防止我的個人想法誤導大家

個人理解這個新增的屬性使用的場景就是能在一個頁面執行另一個頁面的方法,以大家最熟悉的購物為例,假設現在大家在購物的訂單列表頁,然後想從這個頁跳轉到評論訂單的頁面,在評論完成後重新整理訂單頁面的訂單,原來的處理方式就是評論完回到訂單頁在onShow方法中執行重新整理訂單的操作,使用者體驗會差一點,有了events這個屬性就能解決這個問題

//訂單頁js,order.js
//跳轉去評論頁的方法
fnToComment(){
  wx.navigateTo({
   url: `../comment/comment`,events:{
    //執行重新整理訂單的操作data是從評論頁傳遞的引數
    fnFefresh:function(data){
     console.log(data)//此處接收的是comment.js傳遞的{data:'2222'}
    }
   },success: function (res) {
    //跳轉comment頁要執行的方法
    res.eventChannel.emit('fresh',{ data: '1111' })
   }
  })
 },//評論頁js,comment.js
var eventChannel
Page({
 /**
  * 頁面的初始資料
  */
 data: {

 },/**
  * 生命週期函式--監聽頁面載入
  */
 onLoad: function (options) {
  eventChannel = this.getOpenerEventChannel()
  // 監聽fresh事件,獲取上一頁面通過eventChannel傳送到當前頁面的資料
  eventChannel.on('fresh',function (data) {
   console.log(data)//此處接收的是order.js傳遞的{data:'1111'}
  })
 },//提交評論的方法同時重新整理order.js的重新整理訂單方法
 fnComment(){
  //重新整理order.js的events屬性中的fnFefresh方法
  eventChannel.emit('fnFefresh',{ data: '2222' });
 }
})

####### 官方給的文件傳遞的資料都是這個{data:‘test'},可能讓大家蒙了,其實這個和vue的元件之間傳遞資料有點相似,emit就是相當於用於傳送事件,on就是相當於接收同名的emit傳遞的方法,也就是說當前所在的頁面(也就是執行wx.navigateTo方法的頁面 )的emit的方法在被開啟也就是要去的頁面裡on去接收傳遞的資料,如果被開啟的頁面裡有執行的方法同時又要呼叫當前頁面的方法,就在被開啟頁面裡也有執行emit的地方,在當前頁面裡events引數裡的方法就是接收被開啟頁面emit的同名的方法就能接收到被開啟頁面執行某一方法同時執行emit傳遞到當前頁面的資料,也就是相當於被開啟頁面已經開啟之後,執行某一方法可以同時呼叫之前執行wx.navigateTo方法的頁面裡面的方法,個人理解使用場景就是能在一個頁面執行了另一個頁面的方法,例如執行一些重新整理操作之類的,防止在onshow中呼叫還是會被看到重新整理過程影響使用體驗,個人理解,不喜勿噴

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。