vue中根據手機類型判斷是安卓、微信或IOS跳轉相應下載頁面

按鈕：<div class="download" @click="downApp">立即下載</div>

遮罩層：<div class="dark" v-show="ShowDark"></div>

彈框：<div class="pop" v-show="ShowPop" style="display:block;">

               <p>ios版本即將上線，敬請期待！</p>

               <button @click="downApp">確定</button>

        </div>

js代碼：

data() {

     return {

         ShowPop: false，

　　  ShowDark ：false

     }

  },

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.$router.push({

              path: '/product'

           })

        } else {

           if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {

              //ios

              this.ShowPop = !this.ShowPop;

              this.ShowDark = !this.ShowDark;

           } else if (/(Android)/i.test(navigator.userAgent)) {

              //android

              window.location = 'http://www.xyfan.top/app.apk'

           }

        }

 

        function isWeixinBrowser() {

            return (/micromessenger/.test(ua)) ? true : false;

        }

  }

}