微信小程序页面间通信——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'
  })
}

之后就可以传大的数据包了~~

四、Taro中使用getOpenerEventChannel

const current = getCurrentPages().pop()
const eventChannel = current.getOpenerEventChannel()
eventChannel.emit('someEvent', { data: '我是B参数'});

A页面：

    Taro.navigateTo({
      url: `/pages/SheetPage/index`,
      events: {
        someEvent: function (data) {
          console.log("返回的数据---", data)
        }
      }
    })

B页面：

  const clickquestion = () => {
    const current = getCurrentPages().pop()
    const eventChannel = current.getOpenerEventChannel()
    eventChannel.emit('someEvent', { data: '我是B参数'});
 
    Taro.navigateBack({
      delta: 1
    })
  }