微信小程序 -- 页面间通信
前言
今天我们来说下微信小程序的页面间通信：
- 通过url传参实现页面间单向通信
- 通过getCurrentPages()页面栈实现页面间单向通信
- 通过EventChannel实现页面间双向通信
1、url传参
我们知道页面之间的跳转可以通过路由组件来实现，其中组件的属性url就是要跳转到页面的路径。
我们可以通过在路径中添加需要传递的数据来实现页面间数据通信
//数据传递
wx.navigateTo({url: '../../followUp/index?aa=1256&bb=jkkk'
})
//数据接收
onLoad: function (options) {const {info} = options;
},
2、getCurrentPages()
获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。
通过获取到相应的页面栈对象，然后根据业务需求，执行具体操作。
//数据传递
let curPages = getCurrentPages();//获取当前页面栈列表
var prevPage = curPages[curPages.length - 2];//上一页面栈对象
prevPage.setData({aa:'111111',bb:'2222222',
});
prevPage.updateInfo();
2、EventChannel
如果一个页面(B)由另一个页面(A)通过 wx.navigateTo 打开，这两个页面间将建立一条数据通道：
被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象；
wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。
这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。
//--------------------------页面A--------------------------
wx.navigateTo({url: '../../followUp/index',events: {//接收页面B传递的数据two: function (data) {console.log(data)},},success:function(res){//向页面B传递数据res.eventChannel.emit('one', { data: 'data one' })},
})
// --------------------------页面B--------------------------
//接收数据
const eventChannel = this.getOpenerEventChannel()
eventChannel.on('one', function (data) {console.log(data)
})
//发送数据
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('two', { data: 'data two'});