涂鸦小程序事件系统——小程序间通信

背景信息

一些内聚的、特定的功能模块，可能会被拆分成多个小程序，这些小程序之间需要进行通信、协作，完成数据的传递、状态的同步等。

基础库版本 ≥ 2.9.0

 

打开其他小程序

小程序可以通过 ty.navigateToMiniProgram 接口打开其他小程序，接口参数如下：

参数	类型	必填	说明
appId	string	是	要打开的小程序 ID。
position	string	否	新开小程序的位置，可选值有 right、bottom，默认值为 bottom。
path	string	否	打开的页面路径。如果为空，则打开首页。path 中 ? 后面的部分会成为 query，在小程序的 App.onLaunch、App.onShow 和 Page.onLoad 的回调函数。
extraData	object	否	传递给目标小程序的数据。目标小程序可在 App.onLaunch 和 App.onShow 中获取到这份数据。
envVersion	string	否	要打开的小程序版本。仅在当前小程序为开发版或体验版时，此参数有效。如果当前小程序是正式版，则打开的小程序必定是正式版。
shortLink	string	否	小程序链接。当传递该参数后，可以不传小程序 ID 和 path。
events	object	否	小程序间的通信事件。详见下文。
complete	function	否	接口调用结束的回调函数。无论调用是否成功，都会执行该函数。
success	function	否	接口调用成功的回调函数。
fail	function	否	接口调用失败的回调函数。

可通过 events 参数传递事件，目标小程序页面可以通过 this.getOpenerAppChannel 监听或调用，实现两个小程序之间的通信。

当声明了 events 时，在 success(result) 的返回结果中，则包含 result.appChannel 对象，可通过 appChannel 对象发送事件到目标小程序。

 

示例

小程序 A 打开小程序 B，并实现两者的通信：

// 小程序 A
Page({
  // 单击按钮打开小程序 B
  handleOpen() {
    ty.navigateToMiniProgram({
      appId: '小程序 B 的小程序 ID',
      events: {
        // 提供目标小程序可调用的事件
        acceptDataByChild: (data) => {
          console.log('小程序 B 发来的数据：', data);
        },
      },
      success(res) {
        // 打开小程序 B 成功
        // 通过 res.appChannel 发送事件到小程序 B
        res.appChannel.emit('emitDataToChild', { data: 'hello' });
      },
    });
  },
});

小程序 B 的页面：

// 小程序 B 默认首页
Page({
  onLoad() {
    const appChannel = this.getOpenerAppChannel();
 
    // 监听小程序 A 的事件调用
    appChannel.on('emitDataToChild', (data) => {
      console.log('小程序 A 发来的数据：', data);
    });
 
    // 调用小程序 A 调用 navigateToMiniProgram 时 events 中声明的事件
    appChannel.emit('acceptDataByChild', { data: 'world' });
  },
});