码迷,mamicode.com
首页 > 微信 > 详细

vue中根据手机类型判断是安卓、微信或IOS跳转相应下载页面

时间:2018-01-23 00:57:52      阅读:2878      评论:0      收藏:0      [点我收藏+]

标签:location   fun   agent   product   route   页面   cas   font   style   

按钮:<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;
        }
  }
}

vue中根据手机类型判断是安卓、微信或IOS跳转相应下载页面

标签:location   fun   agent   product   route   页面   cas   font   style   

原文地址:https://www.cnblogs.com/lxy1123/p/8331584.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!