小程式頁面間通訊——EventChannel（資料量多時）

場景：頁面 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

歡迎留言，一起探索更多~