点击一个按钮，如果手机有安装app的话直接打开app，否则跳转到应用市场下载该app_html在对应平台下载app

作者：你好赵伟 | 2024-04-14 07:34:13

踩

html在对应平台下载app

最近在做一个这样的功能，前端网页点击按钮时，如果用户手机有安装该app，则直接打开app；否则就跳到应用市场下载。代码如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body id="body">
		<a href="javascript:;" id="openApp" style="font-size: 30px;">打开客户端</a>
	</body>	
	<script type="text/javascript">
	document.getElementById('openApp').onclick = function(e) {
		//ios
		if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
 
			var browser = navigator.userAgent.toLowerCase();
 
			if(browser.match(/micromessenger/i)) {
				//微信内置浏览器
				window.location.href ="hengtaixin://";
				window.setTimeout(function() {
					window.location.href = "https://itunes.apple.com/us/app/cheng-shi-gao-er-fu/id1008696844?mt=8&uo=4";
				}, 1000)
				return
			} else {
				window.location.href ="hengtaixin://"; //ios app协议，由ios同事提供
				window.setTimeout(function() {
					window.location.href = "https://itunes.apple.com/us/app/cheng-shi-gao-er-fu/id1008696844?mt=8&uo=4";
				}, 2000)
				return
			}
		}
 
		if(navigator.userAgent.match(/android/i)) {
			//Android
			window.location.href = "app://city_golf";//安卓协议，由安卓同事提供
			window.setTimeout(function() {
				
				window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=gr eenjoy.golf.app&g_f=991653"
			}, 2000)
			return
		}
 
	};
</script>
</html>

上面的代码中分为ios，安卓和微信内置浏览器三种情况。实现方法均是window.location.href ="xxx://";首先尝试通过协议来唤醒手机里面的app，如果在2000ms之内跳转成功，则说明手机已经安装app，直接打开，下面定时器的代码将不会执行。如果超过2000ms之后还在这个页面，则证明用户手机没有安装app，则执行定时器里面的代码，跳到应用市场下载。

燃鹅，当我做完这个后，老板突然说加一个这样的功能：如果你的手机已经安装过这个APP，那么上面的“打开客户端”改成“打开APP”，如果没有安装，那就会提示“下载APP”的字样。然后我眉头一皱，这个是否安装app并不是通过判断来实现的呀~~~~~它是直接尝试打开的。。。然后我作为一名职场小萌新瑟瑟发抖地回到自己的座位上开始找相关的资料，一番努力之后，果然没有~~~然后我又去问了几个已经工作了的师兄，，他们也说仅有前端是很难实现的，建议由后端判断然后返回结果给我。。。。

所以现在第二个功能还没有实现，欢迎各位小伙伴有想法的可以不吝赐教~~谢谢！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/420877