小程序路由跳转---事件通信通道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>
1
2

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'})
      }
    });
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

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

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


  back(){
    this.getOpenerEventChannel().emit('updateInvoice', {sex: 'female'});
    wx.navigateBack();
  },
1
2
3
4
5
6
7
8
9
10
11
12
13

运行结果
需要注意，使用小程序中左上角的返回是无法接收到返回的数据的。