背景信息
一些内聚的、特定的功能模块,可能会被拆分成多个小程序,这些小程序之间需要进行通信、协作,完成数据的传递、状态的同步等。
基础库版本 ≥ 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({// 单击按钮打开小程序 BhandleOpen() {ty.navigateToMiniProgram({appId: '小程序 B 的小程序 ID',events: {// 提供目标小程序可调用的事件acceptDataByChild: (data) => {console.log('小程序 B 发来的数据:', data);},},success(res) {// 打开小程序 B 成功// 通过 res.appChannel 发送事件到小程序 Bres.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' });},
});