检测移动端浏览器访问，并下载或跳转app (Android、Ios、微信)

71 阅读 0 评论 47 点赞

我是靠谱客的博主难过爆米花，最近开发中收集的这篇文章主要介绍检测移动端浏览器访问，并下载或跳转app (Android、Ios、微信)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

需求：当用户在移动端访问网站时判断应用系统，并下载或跳转app，总之就是不能在网页上登录的

methods：{
	openapp() {
      var u = navigator.userAgent,
      app = navigator.appVersion;
      let wx = this.isWeiXin();
      this.isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
      this.isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (this.isAndroid) { // 安卓系统
        if (wx) {
	       	// 这里是打开微信小程序的方法 本文里没有可以访问以下链接查看
	       	// https://blog.csdn.net/zgzga/article/details/117740581?spm=1001.2014.3001.5501
         	this.wx(); 
        } else {
	          this.android();
        }
      }
      if (this.isIOS) {
        if (wx) {
          this.wx();
        } else {
          this.IOS();
        }
      }
    },
    isWeiXin() {
      //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
      var ua = window.navigator.userAgent.toLowerCase();
      // alert(JSON.stringify(ua));
      //通过正则表达式匹配ua中是否含有MicroMessenger字符串
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
      } else {
        return false;
      }
    },
    android() {
      var _clickTime = new Date().getTime();
      window.location.href = "runtest://"; /***打开app的协议，有安卓同事提供***/
      //启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
      var _count = 0,
        intHandle;
      intHandle = setInterval(function() {
        _count++;
        var elsTime = new Date().getTime() - _clickTime;
        if (_count >= 100 || elsTime > 5000) {
          clearInterval(intHandle);
          //检查app是否打开
          if (document.hidden || document.webkitHidden) {
            // 打开了
            window.location.href = "runtest://";
            window.close();
          } else {
            // 没打开
            window.location.href = ""; //下载链接
          }
        }
      }, 20);
    },
    IOS() {
      var _clickTime = new Date().getTime();
      window.location.href = "runtest://"; /***打开app的协议，有IOS同事提供***/
      //启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
      var _count = 0,
        intHandle;
      intHandle = setInterval(function() {
        _count++;
        var elsTime = new Date().getTime() - _clickTime;
        if (_count >= 100 || elsTime > 5000) {
          clearInterval(intHandle);
          //检查app是否打开
          if (document.hidden || document.webkitHidden) {
            // 打开了
            window.location.href = "runtest://";
            window.close();
            // return;
          } else {
            // 没打开
            window.location.href = ""; //下载链接
          }
        }
      }, 20);
}