评论

新能力解读:页面间通信接口

在 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 开始支持,低版本需做兼容处理。
最后一次编辑于  09-21  (未经腾讯允许,不得转载)
点赞 6
收藏
评论

3 个评论

  • IZumi
    IZumi
    10-12

    在组件里能获取到eventChannel吗,我试了一下,发现获取到的是一个空对象

    10-12
    赞同
    回复
  • jie
    jie
    09-06

    A向B传数据之后

    B页面应该先获取eventChannel:

    let eventChannel = this.getOpenerEventChannel();

    否则会出现undefine的问题吧

    09-06
    赞同
    回复 1
    • 白宦成
      白宦成
      09-21
      是的,我修改一下。
      09-21
      回复
  • 染柒
    染柒
    08-04

    点赞

    08-04
    赞同
    回复