vue微信遮罩层提示在浏览器中打开

遇到一个需求，就是扫描二维码跳转到一个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的层级一定要比原来的层级高！