Vue的写法

main.js中定义：

  2. /* ================================= APP下载 start ========================================*/
  4. // 判断是安卓还是IOS
  5. Vue.prototype.detect =　function (){
  6.   var equipmentType = "";
  7.   var agent = navigator.userAgent.toLowerCase();
  8.   var android = agent.indexOf("android");
  9.   var iphone = agent.indexOf("iphone");
  10.   var ipad = agent.indexOf("ipad");
  11.   if(android != -1){
  12.     console.log('android')
  13.     equipmentType = "android";
  14.   }
  15.   if(iphone != -1 || ipad != -1){
  16.     console.log('ios')
  17.     equipmentType = "ios";
  18.   }
  19.   return equipmentType;
  20. }
  22. // 判断是否是微信或者微博环境
  23. Vue.prototype.softEnviroment = function () {
  24.   let ua = window.navigator.userAgent.toLowerCase();
  25.   let isweixin = ua.match(/micromessenger/i) != null;
  26.   let isweibo = ua.match(/weibo/i) == "weibo";
  27.   if (isweixin) {
  28.     return 'weixin'
  29.   }else if (isweibo) {
  30.     return 'weibo'
  31.   }
  32.   return ''
  33. }
  35. // IOS 的唤起
  36. Vue.prototype.downloadIOSApp = function (urlScheme, storeURL, fallback, universalLink) {
  37.   var tid = this.deferFallback(3000, storeURL, fallback);
  38.   let str = navigator.userAgent.toLowerCase(); 
  39.   let list = str.match(/cpu iphone os (.*?) like mac os/);
  40.   console.log(str, list)
  41.   if (parseInt(list[1], 10) < 8) {
  42.     this.bindPagehideEvent(tid);
  43.   } else {
  44.     this.bindVisibilityChangeEvent(tid);
  45.   }
  46.   if (parseInt(list[1], 10) > 8) {
  47.     // 通过universalLink
  48.     if (universalLink === undefined) {
  49.       universalLink = urlScheme;
  50.     } else {
  51.       clearTimeout(tid);
  52.     }
  53.     this.vLocation(universalLink);
  54.   } else {
  55.     this.vIframe(urlScheme);
  56.   }
  57. }
  59. // IOS 中的 可见性事件
  60. Vue.prototype.bindPagehideEvent = function (tid) {
  61.   window.addEventListener('pagehide', function clear() {
  62.     if (this.isPageVisible()) {
  63.       clearTimeout(tid);
  64.       window.removeEventListener('pagehide', clear);
  65.     }
  66.   });
  67. }
  69. Vue.prototype.bindVisibilityChangeEvent = function (tid) {
  70.   document.addEventListener('visibilitychange', function clear() {
  71.     if (this.isPageVisible()) {
  72.       clearTimeout(tid);
  73.       document.removeEventListener('visibilitychange', clear);
  74.     }
  75.   });
  76. }
  78. Vue.prototype.isPageVisible = function () {
  79.   var attrNames = ['hidden', 'webkitHidden'];
  80.   for (var i = 0, len = attrNames.length; i < len; i++) {
  81.     if (typeof document[attrNames[i]] !== 'undefined') {
  82.       return !document[attrNames[i]];
  83.     }
  84.   }
  85.   return true;
  86. }
  88. // 安卓 的唤起
  89. Vue.prototype.deferFallback = function (timeout, storeURL, fallback) {
  90.   var clickedAt = new Date().getTime();
  91.   return setTimeout(function () {
  92.     var now = new Date().getTime();
  93.     if (Vue.prototype.isPageVisible() && now - clickedAt < timeout + 1000) {
  94.       fallback(storeURL);
  95.     }
  96.   }, timeout);
  97. }
  99. // 打开页面的方式可能
  100.   // 1. 通过改变location
  101.   Vue.prototype.vLocation = function (urlScheme) {
  102.     window.location.href = urlScheme;
  103.   }
  104.   // 2. 通过ifreame
  105.   Vue.prototype.vIframe = function (urlScheme) {
  106.     setTimeout(() => {
  107.       var iframe = this.createHiddenIframe('appLauncher');
  108.       iframe.src = urlScheme;
  109.     }, 100);
  110.   }
  111.   // 3. 通过intent
  112.   function vIntent(launchURI) {
  113.     if (browser.name == 'Chrome') {
  114.       move();
  115.     } else {
  116.       setTimeout(move, 100);
  117.     }
  119.     function move() {
  120.       // window.top.location.href = launchURI;
  121.       window.location.href = launchURI
  122.     }
  123. }
  125. Vue.prototype.createHiddenIframe = function (id) {
  126.   const ele = document.createElement('iframe');
  127.   ele.id = id;
  128.   ele.style.display = 'none';
  129.   document.documentElement.appendChild(ele);
  130.   return ele;
  131. }
  133. /* ================================= APP下载 end ========================================*/

vue中调用

  1. // 进入应用宝下载APP（区分ios和安卓）
  2. if (enviro === 'weibo' || enviro === 'weixin') {
  3.   // 如果是微博或者微信的话，则android提示“选择在浏览器中打开”，IOS提示“选择“在safari中打开””
  4.   this.$refs.tipBg.style.display = 'block';
  5. } else {
  6.   // 区分android和IOS
  7.   if (this.palateInfo === 'android') {
  8.     this.deferFallback(0, '/apis/web/app/download/KTB.apk', this.vLocation);
  9.   } else if (this.palateInfo === 'ios') {
  10.     this.downloadIOSApp('baswiftdiscount://', 'https://apps.apple.com/cn/app/%E5%BF%AB%E8%B4%B4%E5%AE%9D/id1527518469', this.vLocation, 'https://ktb.rzline.com.cn');
  11.   }
  12. }