早期
先来看早期(2017年)的一篇解决方案:微信小程序跨页面通信解决思路
这里总结出两种方案:
方案一:获取Page实例,然后setData更新数据的,跟业务的耦合性比较大。
方案二:使用发布订阅模式,但这种多了以后,同样不容易进行后期的维护。
现状
基础库2.7.3(2019年)开始支持页面间通信。
如果一个页面由另一个页面通过 wx.navigateTo 打开,这两个页面间将建立一条数据通道:
- 被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象。
- wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。
这两个EventChannel对象间可以使用 emit 和 on 方法相互发送、监听事件。
====== demo ======
// pages/home/home.wxml
<view>{
{sum}}</view>
<button type="primary" bindtap="nav">测试页面间传值</button>
// pages/home/home.js
Page({
data: {
sum: 0
},
onLoad: function(options) {
},
nav: function(e) {
const that = this;
wx.navigateTo({
url: '/pages/nav/nav',
// 这里的events与success中的res.eventChannel作用相同
// events: {
// sendEvent: function(data) {
// console.log('data: ', data);
// const { sum } = data;
// console.log('sum: ', sum);
// that.setData({ sum });
// }
// },
success: function(res) {
console.log('res: ', res);
res.eventChannel.emit('receiveEvent', {
a: 9,
b: 10
})
res.eventChannel.on('sendEvent', function(