Shulou(Shulou.com)06/01 Report--

This article mainly explains "how Mini Program transmits event messages and data across pages". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how Mini Program can transmit event messages and data across pages.

one。 Requirements analysis this kind of requirement roughly means that page An enters page B, page B returns and passes a value to A, or when page B triggers an event, page An also has an event that triggers a change.

Business analysis

The common method is:

First: use the wx.setStorage of Wechat to cache the data in the Mini Program instance. When returning to page A from page B, page B first caches the data; then in the onshow method of page A, call wx.getStorage to read the cache. But it brings a lot of hidden dangers to maintenance in the future. (similar to the global variable method)

The second: the method of getting the previous page instance can also achieve this function. Some of the codes are 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}) the disadvantage of this method: because there may be many entrances to the B page. Doing so may result in incorrect page instances obtained.

two。 Method introduction (download address of onfire.js https://github.com/hustcc/onfire.js) Let's get to the point that onfire.js () onfire.js is a very simple event distribution JavaScript library (0.9kb only), concise and practical. It can be applied to: 1. Simple event distribution. two。 Lightweight implementation across components in React, Vue.js, Angular. 3. Event subscription and publication.

Use ideas: (anyone who has done mobile development knows, similar to iOS notifications and Android broadcasts) a.A page subscribes to an event and defines how to handle it; b. Send a message when you return from page B and unsubscribe when the c. A page is unloaded.

My usage is as follows: a page code:

Var onfire = require (".. / utils/onfire.js"); var that;var eventObj = onfire.on ('key', function () {/ / do something specific when the message is delivered}); 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 (eventObj) / / remove}}) We can call the onfire.on method directly on the A page to subscribe to a message named key. In the above code, the parameters attached to the message have no parameters passed. If you need to pass parameters, you can directly add parameters to the function, for example:

Var eventObj = onfire.on ('key', function (data) {/ / perform actions}) it is important to note that you must unsubscribe the message and unbind the eventObj in onUnload (when the page is closed).

The code on the B page adds the following code to the callback:

Onfire.fire ('key'); / / key is the message subscribed above / / onfire.fire (' key','test') with parameters; III. 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 when subscribing to the on method, the _ bind method is actually called. This 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); / / the method if (item [1]) delete _ onfireEventseventName [key] when performing a subscription; / / if the type is subscribed only once, remove yourself after notification. The essence of the fire message sending method is to call the _ fire_func method, traverse the subscriber by name (key), and then notify 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 falsereturn false } else if (type = function_str) {/ / two-layer loop to determine the 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 } call the un method, iterate through the subscriber by name (key), find it and remove it.

Note: 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.

At this point, I believe you have a deeper understanding of "how Mini Program transmits event messages and data across pages". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.