遇到一个需求，就是扫描二维码跳转到一个h5页面从而下载app，但是我们不能在微信下载这个app，所以得弹出这个遮罩层，提示使用浏览器打开。
其实思路是特别简单的，先判断是不是在微信环境，是安卓环境还是ios环境，在created的时候进行判断：
const { userAgent } = navigator
const isWeixin = !!/MicroMessenger/i.test(userAgent)
this.isAndroid =
userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1
this.isMac = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if (isWeixin) {
//如果是微信环境，就弹出遮罩层
this.showTip = true
}
然后在对应的vue文件中，正常显示的代码之外加上这么一段代码（如果有图片更好，还可以根据是安卓还是IOS有不同的提示）：
<div v-show="showTip" id="weixinTip" ref="weixin" class="wxtip">
<p class="wxtip-txt">
在微信中无法下载APP
<br />
1. 请点击右上角按钮
<br />
2. 选择【在浏览器中打开】
</p>
</div>
对应的样式
.wxtip {
background: rgba(0, 0, 0, 0.8);
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
display: none;
img {
width: 100%;
}
}
.wxtip-txt {
margin-top: 107px;
color: #fff;
font-size: 20px;
line-height: 1.8;
}
重点就是z-index的层级一定要比原来的层级高！
