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

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

article 2025/2/28 15:23:23

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