当前位置：首页 > news >正文

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

news 来源：原创 2025/7/28 2:19:08

在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方法时出现的问题，确保了小程序跳转功能的正常实现。

生活中总是充满了各种选择，点餐纠结，出行选择，聚餐座位，团队投票结果不明，随机抽签一锤定音等等！为了解决这个问题，我开发了一款【随机选择决定转盘工具】微信小程序，随机做出决策！无论是随机抽选还是投硬币，都能轻松搞定。现在通过微信小程序二维码就能体验！快来试试吧，让选择变得更简单！

Windows Server 2016离线安装.NET Framework 3.5方式

安装方法：下载 NetFx3.cab （下载地址）后将其放于C盘WINDOWS文件夹下（C:\Windows）

点击“开始”找到“Windows PowerShell”右击“以管理员身份运行”，输入如下命令：

dism.exe /online /add-package /packagepath:C:\WINDOWS\netfx3.cab

结尾：样例小程序二维码，自己做的一个免费好用的【随机选择决定转盘工具】小程序

点击打开查看样例

相关文章：