Vue 實現微信提示瀏覽器轉跳功能

<template>
  <div class="main">
    <div :class="show==true ? 'block':'blocks'"></div>
  </div>
</template>

<script>
import Vue from "vue";
import { Popup } from "vant";
import { Cell, CellGroup } from "vant";
import { Dialog } from "vant";

// 全局注冊
Vue.use(Dialog);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Popup);
export default {
  props: {
    msg: String
  },
  data() {
    return {
      imgUrl: "./live_weixin.png",
      codeValue: "http://192.168.32.214:8083/HymSon.apk",
      show: false
    };
  },
  mounted() {
    this.downApp();
  },
  methods: {
    downApp() {
      let ua = navigator.userAgent.toLowerCase();

      //Android終端
      let isAndroid = ua.indexOf("Android") > -1 || ua.indexOf("Adr") > -1; //Ios終端
      let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isWeixinBrowser()) {
        
        this.show = true;
        this.$router.push({
          path: "/product"
        });
      } else {
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
          //Ios
        } else if (/(Android)/i.test(navigator.userAgent)) {
          //Android終端
          window.console.log("這是安卓");

          window.location = this.codeValue;
        }
      }

      function isWeixinBrowser() {
        return /micromessenger/.test(ua) ? true : false;
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.block {
  width: 100%;
  height: 400px;
  background-color: gray;
  background-image: url("/live_weixin.png");//默認路勁為public下
  background-size: 100% 100%;
}
.blocks {
  width: 100%;
  height: 400px;
  background-color: gray;
  background-size: 100% 100%;
}
</style>