微信小程式跨頁面通訊
阿新 • • 發佈:2020-12-04
最近碰上這樣一種業務:
一場拼團活動,當用戶參團購買商品並支付成功後,重新整理商品列表,確保使用者再次進入列表購買同一件商品時該商品的狀態是 " 已參團 " 狀態,以及區分一寫其他業務。
首先,如果使用getCurrentPages()的話,過於繁雜;主要是因為我們的業務有分享功能,邀請好友參團後,好友是直接從商品詳情進入並付款,沒有上級頁面。
因為app我們使用的也是跨頁面通訊的方法,所有想想,肯定小程式也可以實現,終於找到了方法,在這裡記錄一下~】
一、在utils下面新建一個bridge.js (頁面名稱按需求起,我這裡是比較形象化,bridge是橋樑的意思,可以理解成給頁面之間搭一座橋)
var bridge = {}; // on 繫結事件 function on(key, func) { if(!bridge[key]){ bridge[key] = [func]; }else{ bridge[key].push(func) } } // emit 觸發事件 function emit(key, params) { if(!bridge[key]) return; for(let v of bridge[key]){ v(params) } } // 移除事件 function remove(key) { bridge[key] && delete bridge[key]; } exports.on = on; exports.emit = emit; exports.remove = remove;
二、在提交訂單頁面,支付成功後,觸發事件
// 引入 var bridge = require('../../../utils/bridge.js') // 觸發事件 refresh () { bridge.emit('refreshParentData') }
三、在需要重新整理資料的頁面繫結方法。
/** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { bridge.on('refreshParentData',() => { // 這是我要重新整理列表的方法 this.activityInfo() }) } /** * 生命週期函式--監聽頁面解除安裝 */ onUnload: function () { bridge.remove('refreshParentData') }
這樣就實現了跨頁面通訊啦~