小程序页面间通信——EventChannel（数据量多时）微信小程序小程序前端

场景：页面 A 跳转 B，需要带一些参数过去，体积小的参数可以通过query带过去，数据量较多时，query不是一个好的选择。这时候应采用小程序的 EventChannel

一、理论前提
【小程序页面间通信——EventChannel（数据量多时）】如果一个页面由另一个页面通过 wx.navigateTo 打开，这两个页面间将建立一条数据通道：

被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象；
wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。
这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。

二、简单使用：单向传值
A页面：

navigateToB () { wx.navigateTo({ url: '/pages/logs/logs', success: (res) => { // 跳转成功后，触发事件'delivery', 并可携带数据（即第一个参数是事件名，第二个参数是数据包） res.eventChannel.emit('delivery', { data: '123' }) } }) }

B页面：

onLoad() { // 建立数据通道 const eventChannel = this.getOpenerEventChannel() // 监听'delivery'事件，并获取数据包 eventChannel.on('delivery', data => { console.log('on - delivery', data) }) }

通过打印结果看到，数据已经接收

文章图片

三、双向通信
跳转到B页面后，如果你还需要回传一些数据给到A页面：

在B页面中仍然以 emit 触发事件，并发送数据包；多个事件平铺
A页面 wx.navigateTo 中的 events 参数：是页面间通信接口，用于监听被打开页面发送到当前页面的数据

A页面：

navigateToB () { wx.navigateTo({ url: '/pages/logs/logs', // events 用于监听下一个页面的事件及回传的数据包 events: { reverseData: (data) => { console.log('reverseData', data) }, backData: (data) => { console.log('backData', data) } }, success: (res) => { // 跳转成功后，触发事件'delivery', 并可携带数据（即第一个参数是事件名，第二个参数是数据包） res.eventChannel.emit('delivery', { data: '123' }) } }) }

B页面：

onLoad() { // 建立数据通道 const eventChannel = this.getOpenerEventChannel() // 监听'delivery'事件，并获取数据包 eventChannel.on('delivery', data => { console.log('on - delivery', data) })// 通过emit向上一个页面回传数据，多个事件平铺 eventChannel.emit('reverseData', { data: '321' }) eventChannel.emit('backData', { data: 'abc' }) }

然后就可以愉快地传大的数据包了hhhh
欢迎留言，一起探索更多~