当前位置: 首页 > Web前端 > HTML

小程序页面间通信——EventChannel(数据量大时)

时间:2023-03-28 12:22:07 HTML

场景:页面A跳转到B,需要传递一些参数,小参数可以通过query传递,数据量大时的数据,查询不是一个好的选择选择。这时候就要用到小程序的EventChannel了。1.理论前提如果一个页面通过wx.navigateTo被另一个页面打开,那么两个页面之间就会建立一个数据通道:打开的页面可以通过this.getOpenerEventChannel()方法获得一个EventChannel对象;wx.navigateTo的成功回调也包含一个EventChannel对象。这两个EventChannel对象可以使用emit和on方法相互发送和监听事件。2、简单使用:单向传值页面A:跳转到页面BnavigateToB(){wx.navigateTo({url:'/pages/logs/logs',成功:(res)=>{//跳转成功后触发'delivery'事件,可以携带数据(即第一个参数为事件名称,第二个参数为数据包)res.eventChannel.emit('delivery',{data:'123'})}})}PageB:onLoad(){//建立数据通道consteventChannel=this.getOpenerEventChannel()//监听'delivery'事件并获取数据包eventChannel.on('delivery',data=>{console.log('on-delivery',data)})}打印结果可以看到数据已经收到。3、双向通信跳转到B页面后,如果还需要回传一些数据给A页面:在B页面,仍然是emit触发事件,发送数据包;多个事件平铺。wx.events中的事件参数页面数据Apage: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(){//创建数据通道consteventChannel=this.getOpenerEventChannel()//监听'delivery'事件,获取数据包eventChannel.on('delivery',data=>{console.log('on-delivery',data)})//通过emit将数据传回上一页,多个事件平铺eventChannel.emit('reverseData',{data:'321'})eventChannel.emit('backData',{data:'abc'})}然后就可以愉快的传输大数据包了hhhh欢迎留言,我们一起探讨更多~