js实现微信扫码提示在浏览器中打开的遮罩效果

我们在用微信扫描二维码下载 APP 时，点击下载按钮没反应，这是什么原因造成的呢？这是由于微信的限制，应用文件在内置浏览器中下载全部被屏蔽掉，造成很多人用微信扫描二维码下载时点击下载按钮没反应原因。怎么破解呢？我们可以这样做，在微信扫描后做一个提示到浏览器中下载。

实现方法很简单，判断当前是在微信内置浏览器中，然后将默认隐藏的提示层显示出来。

具体实现代码如下：

<div>
<a href="test.apk" id="JdownApp">点击下载 APP</a>
<a href="test.apk" id="JdownApp2" class="btn-warn">点击下载 APP2</a>
<div class="wxtip" id="JweixinTip">
<span class="wxtip-icon"></span>
<p class="wxtip-txt">点击右上角<br/>选择在浏览器中打开</p>
</div>

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;
}

Js 代码

点击按钮显示隐藏层，点击隐藏层关闭。

Js 代码首要先判断微信 UA

var ua = navigator.userAgent;
var isWeixin =  !!/MicroMessenger/i.test(ua);

完整 js 代码如下：

function weixinTip(ele){
	var ua = navigator.userAgent;
	var isWeixin = !!/MicroMessenger/i.test(ua);
	if(isWeixin){
		ele.onclick=function(e){
			window.event? window.event.returnValue = false : e.preventDefault();
			document.getElementById('JweixinTip').style.display='block';
		}
		document.getElementById('JweixinTip').onclick=function(){
			this.style.display='none';
		}
	}
}
var btn1 = document.getElementById('JdownApp');//下载一
weixinTip(btn1);
var btn2 = document.getElementById('JdownApp2'); //下载二
weixinTip(btn2);

结束语

以上就是本文全部内容，起到了抛砖引玉的效果，有了这个你再也不用担心类似问题发生了，问题就可以轻松解决了。

以上关于js实现微信扫码提示在浏览器中打开的遮罩效果的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。