小程序路由跳转---事件通信通道EventChannel（一）-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序路由跳转---事件通信通道EventChannel（一）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

EventChannel是什么？

借助wx.navigateTo方法，在两个页面之间构建起数据通道，互相可以通过“派发事件”及“注册事件监听器”来实现基于事件的页面通信。基础库版本v2.7.3以上支持。

EventChannel中主要的方法

EventChannel.emit( strign eventName,any args ) 触发一个事件
EventChannel.on( strign eventName,EventCallback fn ) 持续监听一个事件
EventChannel.once( strign eventName,EventCallback fn ) 监听一个事件一次，触发后失效
EventChannel.off( strign eventName,EventCallback fn) 取消监听一个事件。给出第二个参数时，只取消给出的监听函数，否则取消所有监听函数。

EventChannel的使用

两个页面间构建数据通道

A页面向B页面传输数据

<!--pages/event-channel/index.wxml-->
<button bind:tap="to01Page">跳转至01页面</button>

to01Page() {
    wx.navigateTo({
      url: `/pages/event-channel-01/index`,
      // events: 注册将在目标页面触发（派发）的同名事件的监听器
      events:{
        updateInvoice:(result)=>{
          console.log('返回传输的数据', result);
        }
      },
      // success：跳转后进行可通过res.eventChannel 触发自定义事件
      success:(res)=>{
        res.eventChannel.emit('sendQueryParams',{name: '梅若涵', age: 18, hobby: 'programming'})
      }
    });
  },

B页面监听接收A页面数据并在返回时向A页面传输数据

<!--pages/event-channel-01/index.wxml-->
<button bind:tap="back">返回</button>

 onLoad(options) {
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    let eventChannel = this.getOpenerEventChannel();
    eventChannel.once('sendQueryParams',(params)=>{
      console.log('上一页面传来的数据', params);
    })
  },


  back(){
    this.getOpenerEventChannel().emit('updateInvoice', {sex: 'female'});
    wx.navigateBack();
  },