web-view环境下，H5页面打开其他小程序

embedded/2025/1/21 10:51:33/

在Web-view环境下，H5页面无法直接打开其他小程序。正确的实现方式是先从H5页面跳转回当前小程序，再由当前小程序跳转到目标小程序。具体实现方法如下：

H5页面跳转回小程序时，调用wx.miniProgram.navigateTo()方法。
小程序跳转到其他小程序时，调用wx.navigateToMiniProgram()方法。官方文档中提供了示例代码，其使用较为简单，主要需要传入目标小程序的appid，以及可选参数path（若不传入，则默认跳转到目标小程序的首页）。

在开发过程中，我在小程序中创建了一个专门用于跳转其他小程序的页面。其逻辑是：H5页面携带参数跳转到该新建页面，在页面的onLoad()生命周期函数中调用wx.navigateToMiniProgram()方法。具体代码如下：

JavaScript复制

wx.navigateToMiniProgram({appId: option.appid,path: `${option.path}?id=${option.id}`,success(res) {// 跳转成功}
})

然而，在真机调试时出现了一个奇怪的问题：第一次调用该方法可以成功跳转到其他小程序，但第二次调用时却无法跳转。经过多次尝试，发现该问题并无明显规律可循。查看调试信息后发现，wx.navigateToMiniProgram方法报错，错误信息为“navigateToMiniProgram:fail can only be invoked by user TAP gesture”，即该方法只能由用户的点击操作触发。

为了解决这一问题，我在onLoad()函数中添加了一个uni.showModal弹窗。当用户点击弹窗中的“确定”按钮时，再调用wx.navigateToMiniProgram方法，从而解决了问题。具体代码如下：

JavaScript复制

wx.showModal({title: '温馨提示',content: '提示内容',showCancel: true, // 是否显示取消按钮cancelText: "取消", // 默认是“取消”cancelColor: '#000000', // 取消文字的颜色confirmText: "确定", // 默认是“确定”confirmColor: '#3cc51f', // 确定文字的颜色success: function(res) {if (res.cancel) {// 点击取消，返回上一级页面wx.navigateBack()} else {// 调用wx.navigateToMiniProgram跳转到目标小程序wx.navigateToMiniProgram({appId: option.appid,path: `${option.path}?id=${option.id}`,success(res) {// 跳转成功}})}},fail: function(res) {// 接口调用失败的回调函数，返回上一级页面},complete: function(res) {// 接口调用结束的回调函数（无论调用成功或失败都会执行）},
})

通过这种方式，成功解决了在onLoad()中直接调用wx.navigateToMiniProgram方法时出现的问题，确保了小程序跳转功能的正常实现。