微信用浏览器打开实现

2019独角兽企业重金招聘Python工程师标准>>>

由于微信内置浏览器不支持非自己平台的APP（注：APP没有发布到腾讯应用宝）的下载，所以需要改变思路，提示用户用浏览器打开下载即可。

第一步：CSS样式代码

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

.wxtip-icon {
	width: 52px;
	height: 67px;
	background: url(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;
}

第二步：HTML代码

<div>
    <a href="你的苹果APP下载路径" class="a1">
				<div class="divBox">iphone版下载</div>
			</a> 
			<a id="weiXin" class="a2" href="javascript:androidDownload();">
				<div class="divBox">安卓版下载</div>
			</a>
			<div class="wxtip" id="JweixinTip" style="display: none;">
				<span class="wxtip-icon"></span>
				<p class="wxtip-txt">
					<img alt="浏览器打开" src="/cc/images/live_weixin.png">
				</p>
			</div>
	<a id="notWeiXin" href="你的APP下载路径"
			class="a2">
			<div class="divBox">安卓版下载</div>
	</a>
</div>

第三步：JS代码

<script type="text/javascript">
	$(document)
			.ready(
					function() {
						var isWeixin = is_weixin();
						var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight
								: document.documentElement.clientHeight;
						var weixinTip = $('<div id="weixinTip"><p><img id="weiXinImg" src="/cc/images/live_weixin.png"/></p></div>');

						if (isWeixin) {
							$("#notWeiXin").attr("style", "display:none;");
						} else {
							$("#weiXin").attr("style", "display:none;");
						}
					});
	function is_weixin() {
		var ua = navigator.userAgent.toLowerCase();
		if (ua.match(/MicroMessenger/i) == "micromessenger") {
			return true;
		} else {
			return false;
		}
	}

	function androidDownload() {
		$("#JweixinTip").attr("style", "display:block;");
	}

注意：我是用jquery来做的，所以别忘了把jquery的js库引进来。然后就可以了

转载于:https://my.oschina.net/lybblbb/blog/1544635