微信小程序-EventChannel

前言

最近有点小摆烂，除了稍微赚了点外快就没咋学习，沉迷 game，快过年了，就这样先摆烂吧，来年继续努力。本篇文章记录一下一个微信小程序的语法-EventChannel。

定义

EventChannel 是微信小程序中用于页面间通信的一个对象，它允许在不同页面之间传递事件和数据。EventChannel 可以看作是一个双向通道，页面可以通过它发送和接收事件。

使用

这个你可以类似于我们常用的兄弟组件通信的方式，如 mitt,bus 等方式。

单向

A 页面

<button bindtap="navigateToB">跳转B页面</button>

navigateToB () {
  wx.navigateTo({
    url: '/pages/B',
    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/B',
    // 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: '123'
  })
  eventChannel.emit('backData', {
    data: 'abc'
  })
}

结语

本篇文章就到这里了，更多内容敬请期待，债见~