微信小程序頁面間通訊接口

在 2019 年 7 月 2 日的小程序基礎庫版本更新 v2.7.3 中，小程序新增了一個頁面間通信的接口，幫助咱們的小程序完成不一樣頁面間數據同步的功能。

在 2019 年 7 月 2 日的小程序基礎庫版本更新 v2.7.3 中，小程序新增了一個頁面間通信的接口，幫助咱們的小程序完成不一樣頁面間數據同步的功能。
頁面間通訊接口能幹嗎？
在 v2.7.3 以前，小程序不一樣頁面間的大批量數據傳遞主要有兩種：

1. 藉助諸如 Mobx 、Redux 等工具，來實現不一樣頁面間的數據傳遞。
2. 藉助小程序提供的 storage ，來完成在不一樣頁面間數據的同步。

前者須要引入一些第三方工具庫，從而提高了整個應用的大小，同時，引入的工具也帶來了學習生本。然後者則是基於小程序提供的存儲，先將數據存入存儲，再到另一個頁面去讀取，若是數據涉及到了多個頁面，則可能會致使數據的紊亂。
新的頁面間通訊接口則直接解決了上述的兩個問題，你能夠直接使用 API 在兩個頁面之間傳遞數據，再也無需擔憂數據的紊亂。
新增的頁面間通訊接口應當如何使用？
關於頁面間通訊接口的使用很是簡單。
這裏，咱們假設存在 A 和 B 兩個頁面，其中 A 是首頁，B是詳情頁。
A 向 B 傳遞數據
若是你須要從首頁向詳情頁傳遞數據，則能夠這樣操做。

在頁面 A 執行代碼

wx.navigateTo({
  url: 'test?id=1' 
  success: function(res) { 
  // 經過eventChannel向被打開頁面傳送數據 
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' }) 
  }
})

這樣，當 A 跳轉到 B 時，就會出發 B 當中定義的 acceptDataFromOpenerPage，並將後續的數據傳遞過去。
在 B 中，你能夠在 onLoad 去定義 eventChannel 的相關方法

Page({
  onLoad: function(option){
    // 監聽acceptDataFromOpenerPage事件，獲取上一頁面經過eventChannel傳送到當前頁面的數據
    let eventChannel = this.getOpenerEventChannel();
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

B 向 A 傳遞數據
若是須要被打開的頁面向打開的頁面傳遞數據，則可使用以下代碼:
在 A 中的跳轉時，加入 events 的定義，定義你本身的函數，以及對應的處理函數。

wx.navigateTo({
  url: 'test?id=1', 
  events: { 
  someEvent: function(data) { 
  console.log(data) 
    }
  },
})

而後在 B 中，調用以下代碼來發信息

Page({
  onLoad: function(option){ 
  const eventChannel = this.getOpenerEventChannel() 
    eventChannel.emit('someEvent', {data: 'test'}); 
  }
})

這樣，就能夠在 B 頁面將數據傳回到 A 頁面了。
頁面間通訊接口使用注意事項？
在使用頁面間通訊接口時須要注意兩點：

1. 該功能從基礎庫 2.7.3 開始支持，低版本需作兼容處理。