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的事件。

使用示例

1. A页面为订单页面，B页面为填写发票信息页面，
2. A页面跳转B页面携带开票金额（amount），
3. A页面如果已填写，再次跳转B页面，需要携带发票信息（invoice），方便直接编辑
4. 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' });

有不对或扩展的地方欢迎大家批评交流。