微信引导用户右上角使用打开浏览器页面

3,394 阅读1分钟

效果图:

参考示例代码下载:

download.csdn.net/download/qq…

直接上代码: 

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 
	<title>APP下载页面</title>
	</head>
	<style type="text/css">
	*{padding: 0;margin: 0;}
	/*顶部标题栏*/
	.title_box {
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #48d484;
		font-size:20px;
		display:flex;
	}

	.back_page,.back_home {
		flex:1;	
	}
	.back_page img,.back_home img{
		width: 32px;
		height: 32px;
		margin-top:8px;
	}
	.back_page{
		text-align: left;
	}
	.back_home{
		text-align: right;
		margin-right:10px;
	}
	.title_box p {
		flex:3;
		text-align: center;
		color: #ffffff;
	}
	#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 p img{
		width:100%;
	}
	#weixin-tip .close {
		position: absolute;
		width:50px;
		top: 0;
		left: 5%;
	}
	.app-box{
		width:100%;
		height:100px;
		padding:20px 0;
		text-align:center;
	}
	.app-box .app-left{
		width:48%;
		float:left;
	}
	.app-box .app-right{
		margin-left:2%;
		width:48%;
		float:left;
	}
	.app-box img{width:80%;}
	.desc{
		padding-top:50px;
		padding-bottom:20px;
		text-align:center;
	}
	.desc h1{
		height:5rem;
		line-height:5rem;
		font-size:2.2rem;
		color:#333;
	}
	.desc p{
		height:3rem;
		line-height:3rem;
		font-size:1.5rem;
		color:#8E8F90;
	}	
	</style>
    <body>
	<!--标题-->
	<div class="title_box">
		<a href="javascript:;" onClick="javascript:history.back(-1);" class="back_page"><img src="images/title-back.png"></a>
		<p>APP下载</p>
		<a href="/" class="back_home"><img src="images/title-home.png" alt="返回首页"/></a>
	</div>
	<div class="desc">
	<h1>立即下载手机客户端</h1>
	<p>随时随地,想玩就玩。</p>
	</div>
	<div class="app-box">
		<div class="app-left" id="download_android">
			<img src="images/android-btn.png"/>
		</div>
		<div class="app-right" id="download_ios">
			<img src="images/ios-btn.png"/>
		</div>
	</div>
    <div id="weixin-tip">
		<p><img src="images/live_weixin.png"/>
		<img id="close"  title="关闭" class="close" src="images/close.png"/>
		</p>
	</div>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
        //判断是不是微信端
	var is_weixin = (function() {
		return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
	})();
	var tip = document.getElementById('weixin-tip');
	var close = document.getElementById('close');
	var tip = document.getElementById('weixin-tip');
	var android = document.getElementById('download_android');
	var ios = document.getElementById('download_ios');
	var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight; //兼容IOS,不需要的可以去掉	
	window.onload = function() {				
		if(is_weixin) {				
			tip.style.height = winHeight + 'px'; //兼容IOS弹窗整屏
			tip.style.display = 'block';		
		}else{						
			//判断Android
			if (/(Android)/i.test(navigator.userAgent)) {   
				//直接下载
				var android_url="";//这里填写android版本的下载地址
				window.location.href = android_url;
			}
		}
	}
	close.onclick = function() {
		tip.style.display = 'none';
	}
	$("#download_android").click(function(){
		if(is_weixin) {
			tip.style.height = winHeight + 'px'; //兼容IOS弹窗整屏
			tip.style.display = 'block';
		}else{
			tip.style.display = 'none';
			//判断iPhone|iPad|iPod|iOS
			if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
				alert("苹果系统不支持安卓软件!");
			} else if (/(Android)/i.test(navigator.userAgent)) { 
			    var android_url="";//这里填写android版本的下载地址
				if(android_url!=""){
					window.location.href = android_url;	
				}else{
					alert("安卓版本正在开发中,敬请期待!");
				}
			}
		}
	});

	$("#download_ios").click(function(){
		if(is_weixin) {
			tip.style.height = winHeight + 'px'; //兼容IOS弹窗整屏
			tip.style.display = 'block';
		}else{
			tip.style.display = 'none';
			var ios_url="";//这里填写ios版本的下载地址
			if(ios_url!=""){
				window.location.href = ios_url;
			}else{
				alert("ios版本正在开发中,敬请期待!");
			}
		}
	});
	</script>
    </body>
</html>