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