Wechat applet wx.navigateTo Details and scenarios of using the events parameter in the method

Time:2020-10-15

Personal understanding wx.navigateTo Details and scenarios of using the events parameter in the method

Wechat applet in version 2.7.3 wx.navigateTo The event attribute is added to this method
The official documents of wechat are very vague. In the community of wechat public platform, some people are asking. The first time I saw it, I first saw the usage scene of Baidu first. What I found was the plagiarism of official copy documents. It’s useless. I believe that everyone is looking at it. So I studied it in my spare time. The following only represents my understanding, if any Good ideas or improper use of the place, I hope you put forward to prevent my personal ideas from misleading you

I understand that the scenario used by this new attribute is a way to execute another page on one page, Take the shopping that you are most familiar with as an example. Suppose you are on the order list page of shopping, and then you want to jump from this page to the page where you comment on the order. Refresh the order on the order page after the comment is completed. The original processing method is to return to the order page after the review, and execute the operation of refreshing the order in Onshow method. The user experience will be worse. With the attribute of events, it can be solved This question

//Order page JS, order.js
//How to jump to the comment page
fnToComment(){
  wx.navigateTo({
   url: `../comment/comment`,
   events:{
    //Perform the refresh order operation. Data is the parameter passed from the comment page
    fnFefresh:function(data){
     console.log (data) // received here is comment.js Passed {data: '2222'}
    }
   },
   success: function (res) {
    //Jump to the method to be executed on the comment page
    res.eventChannel.emit('fresh', { data: '1111' })
   }
  })
 },
//Comment page JS, comment.js
var eventChannel
Page({
 /**
  *Initial data of the page
  */
 data: {

 },
 /**
  *Life cycle function -- listening for page loading
  */
 onLoad: function (options) {
  eventChannel = this.getOpenerEventChannel()
  //Listen to the fresh event to obtain the data transferred from the previous page to the current page through eventchannel
  eventChannel.on('fresh', function (data) {
   console.log (data) // received here is order.js Passed {data: '1111'}
  })
 },
 //Methods to submit comments are refreshed at the same time order.js Refresh order method for
 fnComment(){
  //Refresh order.js The fnfefresh method in the events attribute of
  eventChannel.emit('fnFefresh', { data: '2222' });
 }
})

#######The official data transmitted to the document is the {data: ‘test’}, which may be confusing. In fact, this data transfer is similar to that of Vue components. Emit is equivalent to sending events, and on is equivalent to receiving the method of emit with the same name, that is, the current page (that is, execution) wx.navigateTo Method’s page )In the opened page, that is to say, the method of emit is to receive the transmitted data. If there is an execution method in the opened page and calls the method of the current page, there is also a place to execute emit in the opened page. The method in the events parameter of the current page is the method with the same name of the opened page emit, which can receive the opened page execution Line a method at the same time, emit the data passed to the current page, that is, after the opened page has been opened, the execution of a method can be executed before calling at the same time wx.navigateTo The method in the page of method is the method that can execute another page on one page when the user understands the usage scenario, For example, to perform some refresh operations and so on, to prevent calling in Onshow, or to see the refreshing process affect the user experience, personal understanding, don’t like not to spray.

The above is the whole content of this article, I hope to help you in your study, and I hope you can support developeppaer more.