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

圖片素材：

live_weixin.png

vue文件代碼：

<template>
  <div>
    <h2 v-if="showErr" id="download_err">下載異常，請聯(lián)系客服！</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標(biāo)簽之間加上style樣式
      head.appendChild(style);
    }
  },
  created() {
    // console.log(this.$route.query)
    // this.$route.query.url是文件下載地址
    var url = this.$route.query.url
    if(url){
      // 判斷是否為微信內(nèi)置瀏覽器，如果是顯示遮罩層，讓用戶在外部瀏覽器中打開，否則直接下載
      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>