Implementation of multiple page parameter communication in WeChat applet

I have just come into contact with the WeChat mini program, and I don’t know much about the syntax and attributes. I am currently studying hard. The following article mainly introduces you to the multi-page parameter passing in the WeChat mini program. The relevant information on communication is a summary of what I have recently studied. Friends who need it can refer to it. Let’s take a look together.

Preface

WeChat mini programs are becoming more and more popular, and many companies are converting native code into WeChat mini program codes . During the development process, because the WeChat applet wx.navigateBack method did not support returning parameters, some pages, especially jumping from the list page to the details page, caused the user to change the status on the details page. , regardless of whether to refresh the page after returning, the experience is not very good. In android, we generally use the setresult method to return parameters, or directly use the rxjava framework or eventbus framework to solve such problems.

Business Analysis

This kind of requirement probably means: A page enters B page, B page returns and passes The value is given to A.

Road of Exploration

#At first I wanted to take a lazy approach and use WeChat’s wx.setStorage Cache Store in page B, return to page A, and call wx.getStorage in the onshow method to read the cache to implement this function. However, if the solution is too opportunistic, it will also bring a lot of hidden dangers to future maintenance.
Then I found a method on the Internet to get the previous page, which can also achieve this function. Part of the code is as follows:

var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面

//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
 mdata:1 
})

After thinking about it carefully, the code is not very Safety, because there may be multiple entrances to page B, which may cause errors in the obtained page.

I was at my wits end, but suddenly I thought that the WeChat applet supports js, and then I found a lightweight js library, and it is observer mode, which is the type I want. . So, the fun begins

onfire.js introduction

##onfire.js is a very simple

eventDistributed Javascript library (only 0.9kb), simple and practical.

can be used for:

• Simple event distribution;

• In

  react/vue.js/angular for lightweight implementation across components;

• Event subscription and publishing;

  
  

Practice

Let’s organize the ideas as follows:

• A page first subscribes to an event and defines the processing method.

• When page B returns

  send message.

• Unsubscribe when page A is uninstalled.

  
  

A page code:

var onfire = require("../utils/onfire.js");
var that;
var eventObj = onfire.on('key', function () {
 //做具体的事
});

Page({
 data: {
 },
 onLoad: function(options) {
 // Do some initialize when page load.
 },
 onReady: function() {
 // Do something when page ready.
 },
 onUnload: function (e) {
 onfire.un('key');
 onfire.un(eventObj2);
 }
})

Directly call the

onfire.on method to subscribe to a key named message, and no parameters are passed. If you need to pass parameters, just add parameters directly in function, such as var eventObj = onfire.on('key', function (data)....

Note: Be sure to unsubscribe from key messages in onUnload and unbind eventObj． ##<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> onfire.fire(&amp;#39;key&amp;#39;);//key为上文中订阅的消息 //有参数时 onfire.fire(&amp;#39;key&amp;#39;,&amp;#39;test&amp;#39;);</pre><div class="contentsignin">Copy after login</div></div> It can be seen from the code that the
_bind

method is actually called when subscribing to the

on method. This method mainly uses a two-dimensional array

To store the subscribed

object.

 function _bind(eventName, callback, is_one, context) {
 if (typeof eventName !== string_str || typeof callback !== function_str) {
  throw new Error('args: '+string_str+', '+function_str+'');
 }
 if (! hasOwnKey(onfireEvents, eventName)) {
  onfireEvents[eventName] = {};
 }
 onfireEvents[eventName][++cnt] = [callback, is_one, context];

 return [eventName, cnt];
 }

And the fire

sending message method actually calls the

_fire_func method, passing the name key To traverse the subscribers and then notify the subscribers.

 function _fire_func(eventName, args) {
 if (hasOwnKey(onfireEvents, eventName)) {
  _each(onfireEvents[eventName], function(key, item) {
  item[0].apply(item[2], args); //执行订阅时的方法
  if (item[1]) delete onfireEvents[eventName][key]; // 当类型为只订阅一次时，通知后即移除自己。
  });
 }
 }

Because uninstallation supports uninstallation by key, object, and method, you need to determine the type first, and then unbind according to the respective rules

Summarize

The above is the detailed content of Implementation of multiple page parameter communication in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!