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

smile1213 -
小程序页面间通信——EventChannel(数据量多时)
场景:页面 A 跳转 B,需要带一些参数过去,体积小的参数可以通过query带过去,数据量较多时,query不是一个好的选择。这时候应采用小程序的 EventChannel一、理论前提

如果一个页面由另一个页面通过 wx.navigateTo 打开,这两个页面间将建立一条数据通道:

被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象;wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。这两个 EventChannel 对象间可以使用 emiton 方法相互发送、监听事件。二、简单使用:单向传值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),我们将及时处理。

Tags 标签

微信小程序小程序前端

扩展阅读

加个好友,技术交流

1628738909466805.jpg