最近碰上这样一种业务:
一场拼团活动,当用户参团购买商品并支付成功后,刷新商品列表,确保用户再次进入列表购买同一件商品时该商品的状态是 " 已参团 " 状态,以及区分一写其他业务。
首先,如果使用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') }
这样就实现了跨页面通信啦~