微信提示用浏览器打开（vue&h5）

参考文章：http://dditblog.com/itshare_532.html

图片素材：

live_weixin.png

vue文件代码：

<template>
  <div>
    <h2 v-if="showErr" id="download_err">下载异常，请联系客服！</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSrc: require('@/assets/images/live_weixin.png'), // 路径请自定义
      showErr: false
    };
  },
  methods: {
    isWeixin() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
      } else {
        return false;
      }
    },
    loadHtml() {
      var div = document.createElement("div");
      div.id = "weixin-tip";
      div.innerHTML = `<p><img src="${this.imgSrc}" alt="微信打开"/></p>`;
      document.body.appendChild(div);
    },
    loadStyleText(cssText) {
      var style = document.createElement("style");
      style.rel = "stylesheet";
      style.type = "text/css";
      try {
        style.appendChild(document.createTextNode(cssText));
      } catch (e) {
        style.styleSheet.cssText = cssText; //ie9以下
      }
      var head = document.getElementsByTagName("head")[0]; //head标签之间加上style样式
      head.appendChild(style);
    }
  },
  created() {
    // console.log(this.$route.query)
    // this.$route.query.url是文件下载地址
    var url = this.$route.query.url
    if(url){
      // 判断是否为微信内置浏览器，如果是显示遮罩层，让用户在外部浏览器中打开，否则直接下载
      var cssText =
        "#weixin-tip{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%;}";
      if (this.isWeixin()) {
        this.loadHtml();
        this.loadStyleText(cssText);
      } else {
        window.location.href = url
        console.log("直接下载")
      }
    }else{
      this.showErr = true
    }
  },
  mounted() {}
};
</script>

<style>
img {
  width: 100%;
  height: auto;
}
#download_err{
  margin-top: 25px;
  text-align: center;
}
</style>