微信小程序开发如何实现打开另一个小程序

小编这次要给大家分享的是微信小程序开发如何实现打开另一个小程序，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。

创新互联公司服务项目包括通州网站建设、通州网站制作、通州网页制作以及通州网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，通州网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到通州省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

微信小程序打开另一个小程序，有两种方法：1.超链接；2.点击按钮。

全局配置：

跳转到其他小程序，需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下：

App.json

{
 ...
 "navigateToMiniProgramAppIdList": [
  "wxe5f52902cf4de896"
 ]
}

否则会弹出以下错误提示：

超链接实现跳转到小程序：

demo.wxml

点击超链接打开绑定的小程序

demo.js

data:{
　　extraData: {
　　　　from: '优享新可能nav'
　　}
}
... 
toMiniProgramSuccess(res){
  //从其他小程序返回的时候触发
  wx.showToast({
   title: '通过超链接跳转其他小程序成功返回了'
  })
}

相关参数：

备注：

1.extra-data必须为Object类型，可以在data中定义，然后模板中引用；

2.version可以为空，以小程序当前环境为准。如果设置有值，则只在当前小程序为非正式版时有效。如果设置为develop,那么最好先用微信预览最新编译过的需要跳转到的小程序，然后再扫码预览原来的小程序。不然的话跳转到的小程序可能不是最新版；

3.bindsuccess回调事件在跳转到小程序返回之后触发，wx.navigateToMiniProgram Api则是在跳转同时触发。

通过按钮单击事件实现：

demo.wxml

点击按钮打开其他小程序

demo.js

navigateToMiniProgram(){
  wx.navigateToMiniProgram({
   appId: 'wxdbcxxxxx985f',
   path: 'pages/index/index?goods_id=201',
   extraData: {
    from: 'xxxxx'
   },
   envVersion: 'develop',
   success(res) {
    // 打开其他小程序成功同步触发
    wx.showToast({
     title: '跳转成功'
    })
   }
  })
 }

相关参数：

目标小程序接收来源小程序传递过来的参数：

目标小程序app.js

App({
 onLaunch: function (options) {
  console.log("referrerInfo:::", options.referrerInfo)
 }
  ...
})

输出：

{"appId":"wxcc41e47562b08129","extraData":{"from":"xxxxx"}}

开发者工具调试被打开的小程序时候正确的接收参数：

开发者工具新建编译模式：

输出如下：

注意：

1. 先选择进入场景，输入1037就能快速定位到从小程序进入这个选项，然后就会显示设置appid及extraData的输入框；

2. 尤其要注意extraData的格式，与来源小程序中传递过来的格式都有点不一样，请严格参照下边的代码：

{"from":"xxxxx"}

注意事项：

1.navigateToMiniProgram Api需要用户主动触发跳转，且在跳转至其他小程序前，将统一增加弹窗，询问是否跳转，用户确认后才可以跳转其他小程序。如果用户点击取消，则回调fail cancel；

2.每个小程序可跳转的其他小程序数量限制为不超过 10 个；

3.在开发者工具上调用此 API 并不会真实的跳转到另外的小程序，但是开发者工具会校验本次调用跳转是否成功。

4. 开发者工具上支持被跳转的小程序处理接收参数的调试。

看完这篇关于微信小程序开发如何实现打开另一个小程序的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。