Learning and practice of passing parameters on multiple pages in WeChat applets, learning and practice of applets

Learning and practice of passing parameters on multiple pages in a applet, learning and practice of a Applet

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.

Github address: https://github.com/hustcc/onfire.js [author not me]

Local: http://xiazai.jb51.net/201705/yuanma/onfire.js (jb51.net).rar

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) {// determine whether the method name is _ 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

With this event distribution library, many problems are solved. Well, the above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, you can leave a message, thank you for your support.