小程序怎么實現跨頁傳遞事件消息和數據

本篇內容主要講解“小程序怎么實現跨頁傳遞事件消息和數據”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“小程序怎么實現跨頁傳遞事件消息和數據”吧!

一.需求分析

此類需求大概意思是：A 頁面進入 B 頁面，B 頁面返回并傳值給 A或在B頁面觸發事件時，A頁面也有事件觸發改變。

業務分析

普遍方法為： 
第一種：利用微信的 wx.setStorage，將數據緩存在小程序實例內。從 B 頁面返回 A 頁面時，B 頁面先將數據緩存；然后在 A 頁面的 onshow 方法里，調用 wx.getStorage 讀取緩存來實現。但為日后維護帶來大量隱患。（用全局變量方法類似）

第二種：獲取前一個 page 實例的方法，也可以實現此功能。部分代碼如下：

var pages = getCurrentPages();var currPage = pages[pages.length - 1]; //當前頁面var prevPage = pages[pages.length - 2]; //上一個頁面 //直接調用上一個頁面的 setData() 方法，把數據存到上一個頁面中去prevPage.setData({mdata:1})

這種方法的弊端：因為進入 B 頁面的入口可能是很多個。這樣做，可能會導致獲取到的頁面實例不正確。

二.方法介紹

（onfire.js的下載地址https://github.com/hustcc/onfire.js）  下面進入正題介紹onfire.js（）  onfire.js 是一個很簡單的事件分發 JavaScript 庫（僅僅 0.9kb），簡潔實用。它可以應用于:  1.簡單的事件分發。  2.在 React、Vue.js、Angular 中用于跨組件的輕量級實現。  3.事件訂閱和發布。

使用思路：（做過移動端開發的都知道，類似于iOS的通知和安卓的廣播）  a.A 頁面先訂閱一個事件，并定義處理方法；  b.從 B 頁面返回時，發送消息；  c.A 頁面卸載時，解除訂閱。

我的使用方法為：  A 頁面代碼：

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(eventObj);//移除}})

我們可以在 A 頁面直接調用 onfire.on 方法，訂閱一個名字為 key 的消息。在上面的代碼中，消息附帶的參數無傳參。  如果需要傳參的話，直接在 function 里增加參數即可，例如：

var eventObj = onfire.on('key', function (data){// 執行操作})

需要注意的是，一定要在 onUnload 里（在頁面被關閉時）取消訂閱消息，并取消綁定 eventObj。

B 頁面里代碼在回調的地方加入以下代碼：

onfire.fire('key');//key 為上文中訂閱的消息// 有參數時onfire.fire('key','test');

三.分析庫代碼

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

從代碼中可以看出訂閱 on 方法的時候，實際調用 _bind 方法。該方法利用一個二維數組，來存儲訂閱的對象。

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]; // 當類型為只訂閱一次時，通知后即移除自己。});}}

而 fire 發送消息方法的實質，是調用 _fire_func 方法，通過名字（key）來遍歷訂閱者，然后通知訂閱者。

function un(event) {var eventName, key, r = false, type = typeof event;if (type === string_str) {// 如果存在key值，則移除數組if (hasOwnKey(__onfireEvents, event)) {delete __onfireEvents[event];return true;}return false;}else if (type === 'object') {eventName = event[0];key = event[1];//如果找到這個對象則卸載if (hasOwnKey(__onfireEvents, eventName) && hasOwnKey(__onfireEvents[eventName], key)) {delete __onfireEvents[eventName][key];return true;}//否則返回falsereturn false;}else if (type === function_str) {//兩層循環來判斷方法名_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;}

調用un方法，通過名字（key）來遍歷訂閱者，找到后移除。

注：因為卸載支持按 key、對象、方法卸載，所以需要先判斷類型，然后按各自規則去解除綁定。

到此，相信大家對“小程序怎么實現跨頁傳遞事件消息和數據”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！