微信小程序> 微信小程序开发之实现小程序中打开另一个小程序-微信小程序小程序小程序xy

微信小程序开发之实现小程序中打开另一个小程序-微信小程序小程序小程序xy

浏览量:1732 时间: 来源:xyytwz
微信小程序开发之实现小程序中打开另一个小程序

微信小程序打开另一个小程序,主要有两种方法: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;

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎