业务需求

微信小程序中内内嵌的H5界面，需要通过点击按钮来实现跳转到其他小程序。想通过web-view来实现直接跳转，结果失败了（难道就实现不了了吗？）。
查阅了微信官方的文档，也没有给出具体解决方法，只有小程序跳转其他小程序的相关api，于是突发奇想，能否让嵌入的H5界面跳转到当前小程序页面，然后不就是小程序跳转小程序了吗，感觉可行，就尝试了一波。

解决方案

小程序中内嵌的H5页面通过点击之后需要跳转至目标小程序，首先需要跳转到内嵌的小程序界面，然后使用微信apiwx.navigateToMiniProgram()’实现跳转目标小程序，达到用户可以从内嵌的H5页面中跳转到目标小程序的目的。

实现方法

1.在H5页面中处理好需要传递的参数

1
2
// pages/wx/wx 当前小程序页面
let url = `/pages/wx/wx?appid=${appid}&path=${encodeURIComponent(path)}`

2.调用wx.miniProgram.navigateTo()方法跳转至当前嵌入的小程序界面，携带跳转小程序所需的参数，这里以appid和path为例，path中因为还有其他参数，所以这里使用JavaScript的encodeURIComponent()进行转码处理。

1
wx.miniProgram.navigateTo({url: url});

3.在小程序界面中接收参数，path需要使用decodeURIComponent()方法解码，然后在调用 wx.navigateToMiniProgram()方法来跳转目标小程序。
需要注意的是wx.navigateToMiniProgram()方法需要用户手动触发，为此我在调用之前添加了一层wx.showModal()方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
wx.showModal({
   title: "温馨提示",
   content: "xxx提示内容",
   cancelText: "取消", //默认是“取消”
   cancelColor: "#000000", //取消文字的颜色
   confirmText: "确定", //默认是“确定”
   confirmColor: "#0378D8", //确定文字的颜色
   success: function (res) {
     if (res.cancel) {
       //用户点击取消
       wx.navigateBack();
     } else {
       // 打开目标小程序
       wx.navigateToMiniProgram({
         appId: that.appid,
         path: that.path,
         success(res) { 
           // 打开成功
           console.log(res);
         },
         fail() {
           wx.navigateBack();
         },
       });
     }
   },
   fail: function (res) {
     wx.navigateBack();
   },
   complete: function (res) {
     console.log(res);
   },
 });

踩坑不易，点赞支持一下呗！