小程序页面间通信——EventChannel(数据量多时)
smile1213 -场景:页面 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
欢迎留言,一起探索更多~ 特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。
上一篇: 两个多维数组根据对应的相同字段值匹配重组
下一篇: 将两个有序数组合并为一个有序数组