小程式頁面間通訊——EventChannel(資料量多時)

smile1213發表於2021-11-26
場景:頁面 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

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

相關文章