您的当前位置:首页正文

webview跳转第三方小程序

2024-11-25 来源:个人技术集锦
场景,uni-app实现的微信小程序嵌套webview(h5页面),从webview跳转到第三方小程序
问题:
一、webview不可以直接跳转到第三方小程序(navigateToMiniProgram)

二、首次通过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();
			}
		})
	}
}
显示全文