手机网页唤起uniapp

肖老师xy

已于 2024-01-03 08:58:25 修改

阅读量861

点赞数 1

分类专栏： uniapp 文章标签： uni-app

于 2023-06-07 11:21:02 首次发布

本文链接：https://blog.csdn.net/qq_37004501/article/details/131083736

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、uniapp打包指定scheme，如图

2、手机浏览器换起app代码scheme://,window.location.href = 'aaa://',aaa为上图填写的UrlSchemes

常见的应用UrlScheme如下：

微信URL scheme：weixin://

支付宝URL scheme：alipayqr://

抖音URL scheme：snssdk1128://

快手URL scheme：：kwai://work//

如何获取应用UrlScheme？

反编译apk文件，获取AndroidManifest.xml中的scheme，执行命令java -jar apktool.jar d apkfile dir

由于此jar无法上传，需要可以私信

最终附上微信扫一扫，使用浏览器下载或换起app的代码

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>xx系统</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta name="format-detection" content="telephone=no" />
	<meta content="false" name="twcClient" id="twcClient" />
	<link rel="stylesheet" type="text/css" href=".css/style.css" />
	<script type="text/javascript" src="js/open.js"></script>
</head>
<style type="text/css">
	.outer7 {
		height: 100%;
		background: url(img/bg.png);
		100% no-repeat;
		width: 100%;
		background-size: 100% 100%;
		position: absolute;
	}

	.outer8 {
		width: 100%;
		position: absolute;
		bottom: 25%;
	}

	.Button {
		background-color: #3963ea;
		border-radius: 54px;
		height: 44px;
		width: 69.33333%;
		line-height: 44px;
		color: #fff;
		font-size: 16px;
		margin: auto;
		cursor: pointer;
	}

	.Button3 img {
		width: 19px;
		height: 22px;
		display: block;
		float: left;
		margin-top: 11px;
		margin-right: 9px;
	}

	.Button1 {
		margin-bottom: 10px;
		display: flex;
		justify-content: center;
	}

	.Button2 {
		text-align: center;
	}

	.desc {
		margin: auto;
		text-align: center;
		margin: 16px;
		color: #909090;
		font-size: 12px;
	}

	.wxtip {
		background: rgba(0, 0, 0, 0.8);
		text-align: center;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999999998;
		display: none;
	}

	.wxtip-icon {
		width: 52px;
		height: 67px;
		background: url(images/weixin-tip.png) no-repeat;
		display: block;
		position: absolute;
		right: 20px;
		top: 20px;
	}

	.wxtip-txt {
		margin-top: 107px;
		color: #fff;
		font-size: 16px;
		line-height: 1.5;
	}
</style>
<body style="height: 100%;width: 100%;margin: 0px;">
	<div class="outer7">
		<div class="outer8">
			<!-- <div class="desc">
				目前仅支持Android版本
			</div> -->
			<div class="Button Button1" id="downloadApp" onclick="toDownload()">
				<div class="Button3">
					<img src="img/icon_3.png" />
					Android版本下载
				</div>
			</div>
			<div class="Button Button1" id="downloadIosApp" onclick="toIosDownload()">
				<div class="Button3">
					<img src="img/ios.png" />
					IOS版本下载
				</div>
			</div>
			<div class=" Button Button2 " id="openApp" onclick="evokeByIFrame()">
				打开xx系统APP
			</div>
		</div>
	</div>
	<div class="wxtip" id="JweixinTip">
		<span class="wxtip-icon"></span>
		<p class="wxtip-txt">点击右上角<br />选择在浏览器中打开</p>
	</div>
	<script>
		var url = "http://xx.apk"; //安装包的地址
		window.mobileUtil = (function(win, doc) {
			var UA = navigator.userAgent,
				isAndroid = /android|adr/gi.test(UA),
				isIOS = /iphone|ipod|ipad/gi.test(UA) && !isAndroid,
				isBlackBerry = /BlackBerry/i.test(UA),
				isWindowPhone = /IEMobile/i.test(UA),
				isMobile = isAndroid || isIOS || isBlackBerry || isWindowPhone;
			return {
				isAndroid: isAndroid,
				isIOS: isIOS,
				isMobile: isMobile,
				isWeixin: /MicroMessenger/gi.test(UA),
				isQQ: /QQ/gi.test(UA)
			};
		})(window, document);

		function toDownload() {
			if (mobileUtil.isWeixin) {
				if (mobileUtil.isIOS) {
					window.location.href = url;
				} else if (mobileUtil.isAndroid) {
					document.getElementById('JweixinTip').style.display = 'block';
					document.getElementById('JweixinTip').onclick = function() {
						document.getElementById('JweixinTip').style.display = 'none';
					};
				}
			} else {
				window.location.replace(url);
			}
		};

		function getParam(key) {
			let that = this;
			// window.location.href 获取地址
			let url = window.location.href;
			let p = url.split('?')[1]
			let params = new URLSearchParams(p);
			return params.get(key);
		}
		var carId = getParam('carId');
		// if (type == 'report') {
		function evokeByIFrame() {
			window.location.href = 'xx://'
			if (mobileUtil.isWeixin) {
				toDownload();
				return;
			}
		}
		
		function toIosDownload(){
			window.location.href = 'itms-apps://itunes.apple.com/cn/app/idxx'
		}
		
		if (mobileUtil.isIOS) {
			toIosDownload()
		} else {
			if (!mobileUtil.isWeixin && mobileUtil.isMobile) {
				evokeByIFrame();
			}
		}
		// } else {
		// 	if (!mobileUtil.isWeixin && mobileUtil.isMobile) {
		// 		window.location.replace(url);
		// 	}
		// }
	</script>
</body>
</html>