Implementation of parameter passing communication on multiple pages in WeChat applets

I am new to small programs and have little knowledge of the syntax and attributes in them. I am studying hard recently, the following article describes how to transmit parameters to multiple pages in a small program. it is a summary of the content recently learned. For more information, see. I am new to small programs and have little knowledge of the syntax and attributes in them. I am studying hard recently, the following article describes how to transmit parameters to multiple pages in a small program. it is a summary of the content recently learned. For more information, see.

Preface

As small programs get increasingly popular, many companies are converting their native code into small program code. In the development processwx.navigateBackThe method does not support returning parameters, resulting in some pages, especially jumping from the list page to the details page. the user has changed the status on the details page. after the return, the experience is not very good regardless of whether the page is refreshed or not. In android, we generally usesetresultMethod to return parameters, or directly use the rxjava framework or eventbus framework to solve such problems.

Business Analysis

This requirement generally means that page A enters page B, Page B returns and passes the value to.

Exploration path

At the beginning, I wanted to use a relatively lazy method.wx.setStorageThe cache is stored on page B, and A page is returned.onshowCall in methodwx.getStorageRead the cache to implement this function. However, the solution is too opportunistic and brings a lot of potential risks to future maintenance.
Then I found the previous one on the Internet.pageYou can also implement this function by using the following code:

Var pages = getCurrentPages (); var currPage = pages [pages. length-1]; // var prevPage = pages [pages. length-2]; // The last page // call the setData () method of the previous page directly to save the data to the prevPage. setData ({mdata: 1 })

After careful consideration, the code is not very secure, because there may be multiple entries into page B, which may lead to page errors.

I didn't want to do anything. I suddenly thought that a small program supports js, and then I found a lightweight js Library, and it is the observer mode, which is the type I want. So, the drama started.

Onfire. js introduction

Onfire. js is a simple and practical Javascript library for event distribution (only 0.9kb.

It can be used:

• Simple event distribution;

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

• Event subscription and publishing;
  

Practice

Sort out the following ideas:

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

• A message is sent when page B is returned.

• When Page A is uninstalled, unsubscribe.
  

Page A code:

Var onfire = require (".. /utils/onfire. js "); var that; var eventObj = onfire. on ('key', function () {// do specific things}); 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 );}})

Direct callonfire.onMethod to subscribe to a message named key without passing parameters. If you want to transmit parameters, directly gofunctionAdd parameters, as shown in figurevar eventObj = onfire.on('key', function (data)....

Note:Be sureonUnloadCancel subscriptionkeyAnd cancel binding.eventObj.

Add the code in the callback area on page B

Onfire. fire ('key'); // key is the message subscribed in the previous article // onfire. fire ('key', 'test') when parameters exist ');

Analysis database code

 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]; }

The code shows that the subscriptiononActually called_bindThis method uses a two-dimensional array to store subscribed objects.

Function _ fire_func (eventName, args) {if (hasOwnKey (onfireEvents, eventName) {_ each (onfireEvents [eventName], function (key, item) {item [0]. apply (item [2], args); // method for executing subscription if (item [1]) delete onfireEvents [eventName] [key]; // when the type is subscription only once, the user is removed after the notification. });}}

WhilefireCall the message sending method in essence_fire_funcMethod, by namekeyTo traverse the subscriber and then notify the subscriber.

Function un (event) {var eventName, key, r = false, type = typeof event; if (type = string_str) {// if a key value exists, remove the array if (hasOwnKey (onfireEvents, event) {delete onfireEvents [event]; return true;} return false;} else if (type = 'object ') {eventName = event [0]; key = event [1]; // if this object is found, uninstall if (hasOwnKey (onfireEvents, eventName) & hasOwnKey (onfireEvents [eventName], key) {delete onfireEvents [eventName] [key]; return true;} // otherwise, false return false;} else if (type = function_str) {// two-layer loop to determine whether it is a method name _ each (onfireEvents, function (key_1, item_1) {_ each (item_1, function (key_2, item_2) {if (item_2 [0] === event) {delete onfireEvents [key_1] [key_2]; r = true ;}}) ;}); return r ;} return true ;}

Because unmount supportskey, Object, method unmount, so you must first determine the type, and then unbind according to their rules.

Summary

The above is the implementation details of parameter passing communication on multiple pages in the applet. For more information, see other related articles in the first PHP community!