H5打开APP传参

最新推荐文章于 2024-04-03 16:42:48 发布

你的英雄12138

最新推荐文章于 2024-04-03 16:42:48 发布

阅读量930

点赞数 1

分类专栏： uniapp h5 文章标签：前端

本文链接：https://blog.csdn.net/Sfvopvco/article/details/125664986

版权

uniapp 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用JavaScript检测H5页面是在微信内还是Android或iOS终端，并实现不同环境下引导用户打开或下载App。在微信内提示用户在浏览器中打开，对于Android和iOS设备则分别设置跳转逻辑，包括App已安装时的直接打开和未安装时的下载提示。此外，还展示了App内部如何解析页面参数并进行页面导航。

摘要由CSDN通过智能技术生成

H5页面

h5页面判断终端打开app

                var u = navigator.userAgent;
				var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
				var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				// 微信内
				if (isWeixin) {
					alert('请在浏览器上打开')
				} else {
					var appInfo = {
						//第一个参数应当为ios和android的APP打开链接，第二个参数为APP下载链接
                        //打开链接为schemes + 包名
						ios: ["打开链接","下载地址"], //当前为网页版应用链接，需更换成app的跳转链接
						android: ["打开链接","下载地址"] //当前为网页版应用链接，需更换成app的跳转链接
					}
					if (isIOS) {
						window.location.href = appInfo.ios[0]+ '?id=' + id;
						//设置定时器的目的是如果第一个app没有安装，则自动跳转第二个
						setTimeout(() => {
							window.location.href = appInfo.ios[1];
						}, 3000);
					} else if (isAndroid) {
						window.location.href = appInfo.android + '?id=' + id
						const timerID = setTimeout(() => {
							if (document.visibilityState != 'visible' || document.hidden || document
								.webkitHidden) return
							uni.showModal({
								content: '确定下载APP吗？',
								success: res => {
									if (res.confirm) {
								        window.location.href = appInfo.android[1]
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})
						}, 3000)

						document.addEventListener('visibilitychange', async () => {
							if (document.visibilityState == 'visible') {
								//页面展示 
								console.log('//页面展示')
							} else {
								//页面隐藏
								console.log('//页面隐藏')
								clearTimeout(timerID)
							}
						})
					}
				}

app内

app内获取页面地址,解析地址

if (this.parseQueryString(plus.runtime.arguments).id) {
	this.$navto('/pages/home/detail?id=' +this.parseQueryString(plus.runtime.arguments).id)
}

parseQueryString(url) {
	const urlKey = url.split('?')[1]
	const objKeyValue = {}
	if (!urlKey) return objKeyValue
	const urlObj = urlKey.split('&')
	for (let i = 0; i < urlObj.length; i++) {
		objKeyValue[urlObj[i].split('=')[0]] = decodeURI(urlObj[i].split('=')[1])
	}
	return objKeyValue
},