微信小程序页面间通讯接口

在 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 开始支持，低版本需作兼容处理。