关于vue.js:vue中h5端打开app判断是安卓还是苹果

1. 开发环境 vue+vant
2. 电脑系统 windows10 专业版
3. 在 h5 端开发的过程中, 咱们常常须要点击一个按钮来判断用户应用装置了 app(首先判断是安卓还是苹果, 而后判断是否装置了 app, 如果没有装置则跳转到下载页面, 如果装置了则关上)。
4. 废话不多说, 间接上代码:

<div class="xiding-r" @click="openapp">
 Open APP
</div>

5. 在 methods 中增加如下代码:

   openapp() {
    var u = navigator.userAgent,
     app = navigator.appVersion;
    var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
    var isIOS = !!u.match(/\(i[^;]+;(U;)? CPU.+Mac OS X/);
    if (isAndroid) {// alert("我是安卓");
     this.android();}
    if (isIOS) {// alert("我是苹果");
    }
   },

android() {var _clickTime = new Date().getTime();
    window.location.href = 'zhihu://'; /*** 关上 app 的协定，有安卓共事提供 ***/

    // 启动距离 20ms 运行的定时器，并检测累计耗费工夫是否超过 3000ms，超过则完结
    var _count = 0, intHandle;
    intHandle = setInterval(function () {
     _count++;
     var elsTime = new Date().getTime() - _clickTime;
     if (_count >= 100 || elsTime > 5000) {console.log(_count)
      console.log(elsTime)
      clearInterval(intHandle);
      // 查看 app 是否关上
      if (document.hidden || document.webkitHidden) {
       // 关上了
       window.location.href = "zhihu://";
       // alert('关上了');
       window.close();
       // return;
      } else {
       // 没关上
       // alert('没关上');
       window.location.href = "";// 下载链接
      }
     }
    }, 20);
   },

5. 留神: 在这个案例中我是用的知乎的例子:

6. 留神

 应用 Custom URL Scheme 的益处就是, 你能够在其余程序中通过这个 url 关上应用程序。如果 A 应用程序注册了一个 url scheme:myApp, 那么就在 mobile 浏览器中就能够通过 <a href ="myApp://"> 关上你的应用程序。请留神,IOS 中如果零碎注册了 url schemen 且装置了那个应用程序, 通过下面那种网页的形式就能够关上应用程序 (亲测无效)。留神:IOS 中不能注册为 http://xxx 这样的 url scheme, 而 android 是能够的。

7. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。