webview跳转第三方小程序-Toy模板网

这篇具有很好参考价值的文章主要介绍了webview跳转第三方小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

场景，uni-app实现的微信小程序嵌套webview(h5页面)，从webview跳转到第三方小程序

问题：

一、webview不可以直接跳转到第三方小程序（navigateToMiniProgram）

webview跳转小程序,微信,小程序,javascript,微信小程序文章来源地址https://www.toymoban.com/news/detail-526124.html

二、首次通过webview点击跳转到第三方小程序，出现弹窗即将打开"XXX"小程序，点击允许跳转到第三方小程序，然后从第三方返回原先的webview 再次点击跳转第三方小程序提示"navigateToMiniProgram:fail can only be invoked by user TAP gesture."

小程序–webview(内嵌h5)–第三方小程序–返回小程序webview

解决方案：

问题一：通过微信jsdk跳转到新增的原生小程序页面，然后通过原生小程序跳转到第三方应用

/**
 * @param url 新增的原生小程序页面
 * @param appid 第三方小程序appId
 * @param path 跳转到第三方小程序的页面路径
 */
wxjsdk.miniProgram.navigateTo({
  url: 'url?appid=xxx&path=xxx'
});

// 新增的原生页面(webview跳转的url地址页面)
onLoad(res) {
	uni.navigateToMiniProgram({
		appId: res.appid,
		path: res.path,
		success(res) {
			uni.setStorage({
				key: 'oTherMiniprogramIsBack',
				data: {
					isBack: true,
				},
				success: () => {
				}
			})
		},
		fail(res) {}
	})
}

问题二：在跳转第三方小程序的时候，如果点击授权就保存到缓存，在onShow的生命周期里判断是否从第三方小程序回来，如果是则显示弹窗（调用微信相关授权方法，必须用户至少点击一下原生页面）

onShow() {
	const oTherMiniprogramIsBack = uni.getStorageSync('oTherMiniprogramIsBack')
	if (oTherMiniprogramIsBack) {
		uni.showModal({
			title: 'xxx',
			success: () => {
				uni.removeStorageSync('oTherMiniprogramIsBack')
				uni.navigateBack();
			}
		})
	}
}