Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to transmit parameters and communicate on multiple pages in WeChat Mini Programs. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article, let's take a look at it.

Business analysis

This kind of requirement roughly means that page An enters page B, and page B returns and passes the value to A.

The road of exploration

At first, I wanted to adopt a lazy method, using Wechat's wx.setStorage cache to store B pages, return page A, and call wx.getStorage read cache in the onshow method to achieve this function. But thinking about the solution is too opportunistic, it will also bring a lot of hidden dangers to maintenance in the future.

Then I found a way to get the previous page on the Internet, and I can also achieve this function. Some of the code is as follows:

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

When you think about it, the code is not very secure either, because there may be multiple entries to the B page, which will lead to errors in the page obtained.

There was no way to do it, but I suddenly thought that WeChat Mini Programs supported js, and then I found a lightweight js library, and it was the observer mode, which was the type I wanted. So, the fun begins.

Onfire.js introduction

Onfire.js is a very simple event distribution Javascript library (0.9kb only), concise and practical.

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

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

Can be used to:

Simple event distribution

Lightweight implementation of cross-components in react / vue.js / angular

Event subscription and publication

Practice

The ideas are as follows:

Page A subscribes to an event and defines how to handle it.

Send a message when the B page returns.

Unsubscribe when the A page is unloaded.

A page 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);}})

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

Note: be sure to unsubscribe from key messages in onUnload and unbind eventObj.

In the B page, the code is added at the callback.

Onfire.fire ('key'); / / key is the message subscribed above / / onfire.fire with parameters (' key','test')

Analyze the library 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] = {};} _ onfireEventseventName] [+ _ _ cnt] = [callback, is_one, context]; return [eventName, _ _ cnt];}

You can see from the code that the _ bind method is actually called when subscribing to the on method, which mainly uses a two-dimensional array to store the subscribed objects.

Function _ fire_func (eventName, args) {if (hasOwnKey (_ _ onfireEvents, eventName)) {_ each (_ _ onfireEvents [eventName], function (key, item) {item [0] .apply (item [2], args); / / the method if (item [1]) delete _ onfireEventseventName [key] when performing a subscription; / / if the type is subscribed only once, remove yourself after notification. );}}

The fire message method actually calls the _ fire_func method, traverses the subscriber by name key, and then notifies the subscriber.

Function un (event) {var eventName, key, r = false, type = typeof event; if (type = string_str) {/ / if there is a key value, 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 _ onfireEventsEventName [key]; return true;} / / otherwise return false return false } else if (type = function_str) {/ / two-layer loop to 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 [1] [key_2]; r = true;}};}); return r;} return true;}

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

These are all the contents of the article "how to communicate with multiple pages in WeChat Mini Programs". Thank you for your reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.