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

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据