小程序EventChannel的一些理解和使用实践
EventChannel是什么通过官方文档和示例，实际可以发现EventChannel借助wx.navigateTo方法，在两个页面之间构建起了数据通道，互相可以通过“派发事件”及“注册这些事件的监听器”来实现基于事件的页面通信。 具体看下下面的官方示例： wx.navigateTo({
url: 'test?id=1',
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function(res) {
// 通过 eventChannel 向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})
events: 注册将在目标页面触发（派发）的同名事件的监听器 success：跳转后进行可通过res.eventChannel 触发自定义事件 //test.js
Page({
onLoad: function(option){
console.log(option.query)
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
eventChannel.emit('someEvent', {data: 'test'});
// 监听 acceptDataFromOpenerPage 事件，获取上一页面通过 eventChannel 传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
}
})
通过this.getOpenerEventChannel()获取eventChannel对象， 使用eventChannel.emit() 可以在任意时刻触发（派发）事件。当前页面即可执行对应的事件处理函数。 使用eventChannel.on() 即可监听上个页面emit的事件。 使用示例A页面为订单页面，B页面为填写发票信息页面，A页面跳转B页面携带开票金额（amount），A页面如果已填写，再次跳转B页面，需要携带发票信息（invoice），方便直接编辑B页面填写后返回更新A页面的发票信息（invoice）简单的实现是 A到B的传值使用query实现，B到A的传值使用globalData实现。 // A页面
onShow(){
if(globalData.temp_invoice_info){
this.setData({
invoice:globalData.temp_invoice_info
},()=>{
globalData.temp_invoice_info=null;
})
}
},
//跳转填写发票表单信息
toFillOutInvoiceInfo() {
wx.navigateTo({
url: `/pages/invoice/invoice-info-form/invoice-info-form?amount=${
this.data.detail.amount
}&invoice=${
this.data.invoice.invoice_title ? JSON.stringify(this.data.invoice) : ""
}`,
});
},
//B页面
onLoad(options){
this.data.options = options;
if (this.data.options.invoice) {
this.setData({
invoice: JSON.parse(this.data.options.invoice)
})
}
},
submit(){
globalData.temp_invoice_info = this.data.invoice;
wx.navigateBack();
}
如下EventChannel的实现 //A页面(注意这里需要使用箭头函数（访问this）)
//跳转填写发票表单信息
toFillOutInvoiceInfo() {
wx.navigateTo({
url: `/pages/invoice/invoice-info-form/invoice-info-form`,
events:{
updateInvoice:(result)=>{
this.setData({invoice:result})
}
},
success:(res)=>{
const params = {
amount: this.data.amount,
invoice:this.data.invoice.invoice_title ? JSON.stringify(this.data.invoice) : ""
}
res.eventChannel.emit('sendQueryParams',params)
}
});
},
//B页面
onLoad(){
this.getOpenerEventChannel().once('sendQueryParams',(params)=>{
const {amount,invoice} = parmas;
this.setData({amount,invoice})
})
}
submit(){
this.getOpenerEventChannel().emit('updateInvoice',this.data.invoice);
wx.navigateBack();
}
还有一个额外的地方就是EventChannel可以在A-B-C多个页面直接建立数据通道。官方示例。 //注意this.getOpenerEventChannel() 只能在navigateTo模板页面使用，其他更多页面使用时，
//可以保存在getApp()全局实例中以备其他页面使用
// 保留AB通道事件，已备C页面给A页面发送数据
// B页面
const eventChannel = this.getOpenerEventChannel()
getApp().pageBEventChannel = eventChannel
//C页面
getApp().pageBEventChannel.emit('PageAacceptDataFromPageC', { data: 'Page C->A' });
有不对或扩展的地方欢迎大家批评交流。
