微信怎么设置在浏览器中打开APP下载链接

时间： 2020-09-15 15:33 阅读：次作者：素材无忧网

今天来一个简化版带可以关闭的按钮操作。使用的是纯JS+HTML+CSS结合的方式，但不要一进入微信就弹出提示它在新浏览器中打开，在这个页面里面还可以提交表单查看信息等，只有它点击应用的链接后，才弹出提示它跳转后下载。

<a id="J_weixin" class="android-btn" href="#"><img src="img/android-btn.png" alt="安卓版下载" /></a>
<p id="weixin-tip">
 <p>
  <img src="img/live_weixin.png" alt="微信打开"/>
  <span id="close" title="关闭" class="close">×</span>
 </p>
</p>

#weixin-tip{display:none;position:fixed;left:0;top:0;background:rgba(0,0,0,0.8);filter:alpha(opacity=80);width:100%;height:100%;z-index:100;}
#weixin-tip p{text-align:center;margin-top:10%;padding:0 5%;position:relative;}
#weixin-tip .close{color:#fff;padding:5px;font:bold 20px/24px simsun;text-shadow:0 1px 0 #ddd;position:absolute;top:0;left:5%;}

var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1})();
window.onload = function() {
	var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight; //兼容IOS，不需要的可以去掉
	var btn = document.getElementById('J_weixin');
	var tip = document.getElementById('weixin-tip');
	var close = document.getElementById('close');
	if (is_weixin) {
		btn.onclick = function(e) {
			tip.style.height = winHeight + 'px'; //兼容IOS弹窗整屏
			tip.style.display = 'block';
			return false;
		}
		close.onclick = function() {
			tip.style.display = 'none';
		}
	}
}


<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="renderer" content="webkit">
  	<link rel="stylesheet" href="css/app.css?v4"/>
	<title>恭喜注册成功</title>
</head>
<body class="success">
	<p class="page-wrap">
		<p class="info">
			<p class="ok-btn"><img src="img/ok.png" alt="注册成功"></p>
			<p class="entry-con">感谢您加入新联</p>
			<h2 class="entry-hd">恭喜注册成功</h2>
			<ul class="info-list">
				<li>您的健康档案账号：15507621887</li>
				<li>您的健康档案密码：621887</li>
			</ul>
		</p>
		<p class="download">
			<h3 class="entry-hd">立即下载新联芯健康档案</h3>
			<p class="entry-con">即可免费领取蓝牙智能血糖仪</p>
			<p class="download-btn"><a href="#"><img src="img/ios-btn.png" alt="苹果版下载"></a><a href="#" class="android-btn" id="J_weixin"><img src="img/android-btn.png" alt="安卓版下载"></a></p>
		</p>
		<p class="app">
			<img src="img/app.jpg" alt="应用预览">
			<p class="entry-con">下载完成后，在健康档案中打开“扫一扫”<br/>再次扫描您看到的新联芯二维码<br/>如有下载困难，请致电：0760-88888888</p>
		</p>
		<p class="footer-bg">
			<p class="entry-con">注：微信用户请在右上角选择“在浏览器中打开”，再选择下载应用</p>
		</p>
	</p>
	<p id="weixin-tip"><p><img src="img/live_weixin.png" alt="微信打开"/><span id="close" title="关闭" class="close">×</span></p></p>
	<script type="text/javascript">
	var is_weixin = (function() {
	    var ua = navigator.userAgent.toLowerCase();
	    if (ua.match(/MicroMessenger/i) == "micromessenger") {
	        return true;
	    } else {
	        return false;
	    }
	})();
	window.onload = function(){
		var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
		var btn = document.getElementById('J_weixin');
		var tip = document.getElementById('weixin-tip');
		var close = document.getElementById('close');
		if(is_weixin){
			btn.onclick = function(e){
				tip.style.height = winHeight + 'px';
				tip.style.display = 'block';
				return false;
			}
			close.onclick = function(){
				tip.style.display = 'none';
			}
		}
	}
	

	</script>
</body>
</html>

转载请注明：微信怎么设置在浏览器中打开APP下载链接

上一篇：织梦保存当前栏目更改时失败的解决方法

下一篇：ThinkPHP中连接mysql数据库的四种实用和通用的连接方法

标签：下载链接微信浏览器 APP