场景:页面 A 跳转 B,须要带一些参数过来,体积小的参数能够通过query带过来,数据量较多时,query不是一个好的抉择。这时候应采纳小程序的 EventChannel
一、实践前提
如果一个页面由另一个页面通过 wx.navigateTo
关上,这两个页面间将建设一条数据通道:
- 被关上的页面能够通过
this.getOpenerEventChannel()
办法来取得一个EventChannel
对象; - wx.navigateTo 的
success
回调中也蕴含一个 EventChannel 对象。 - 这两个 EventChannel 对象间能够应用
emit
和on
办法互相发送、监听事件。
二、简略应用:单向传值
A页面:
<button bindtap="navigateToB">跳转B页面</button>
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