
微信小程序打开另一个小程序,主要有两种方法:1.超链接;2.点击按钮。这两种方法的参数大致类似,也略有不同,其实就跟超链接进行页面跳转和单击事件进行页面跳转一样。这里就详细介绍下这两种跳转的实现方法,并附带使用开发者工具进行调试的方法。
工具/原料
1.微信开发者工具
全局配置
2.全局配置:跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下:App.json{...navigateToMiniProgramAppIdList: [wxe5f52902cf4de896 ]}
超链接实现跳转到小程序
3.模板代码编写:如图,需要编写跳转小程序专用超链接并设置以下参数<navigatortarget=miniProgramopen-type=navigateapp-id=wxdbcxxxxxxxx985fpath=pages/index/index?goods_id=201extra-data={{extraData}} version=developbindsuccess=toMiniProgramSuccess>点击超链接打开绑定的小程序</navigator>
4.超链接方式相关参数设置说明:1.extra-data必须为Object类型,可以在data中定义,然后模板中引用;2.version可以为空,以小程序当前环境为准。如果设置有值,则只在当前小程序为非正式版时有效。如果设置为develop,那么最好先用微信预览最新编译过的需要跳转到的小程序,然后再扫码预览原来的小程序。不然的话跳转到的小程序可能不是最新版;3.bindsuccess回调事件在跳转到小程序返回之后触发,wx.navigateToMiniProgram Api则是在跳转同时触发。
5.业务逻辑处理:
6.定义跳转小程序成功回调函数,如图
7.toMiniProgramSuccess(res){
8.wx.showToast({
9.title: '通过超链接跳转其他小程序成功返回了'
10.})
11.}
通过按钮单击事件实现
12.定义按钮组件:
13.<button bindtap='navigateToMiniProgram'>点击按钮打开其他小程序</button>
14.定义跳转到小程序的单击事件,调用wx.navigateToMiniProgramApi进行处理
15.相关参数说明:
16.关于wx.navigateToMiniProgramApi,主要有以下下这些参数
目标小程序接收来源小程序传递过来的参数
17.目标小程序可以在app.js的 App.onLaunch,App.onShow中获取到这份数据
18.开发者工具调试被打开的小程序时候正确的接收参数:
19.开发者工具新建编译模式,先选择进入场景,输入1037就能快速定位到从小程序进入这个选项,然后就会显示设置appid及extraData的输入框
20.输出如下:
注意事项
21.尤其要注意extraData的格式,与来源小程序中传递过来的格式都有点不一样,请严格参照下边的代码:{"from":"xxxxx"}
22.navigateToMiniProgram Api需要用户主动触发跳转,且在跳转至其他小程序前,将统一增加弹窗,询问是否跳转,用户确认后才可以跳转其他小程序。如果用户点击取消,则回调 fail cancel;















