检测移动端浏览器访问,并下载或跳转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);
}

注意:这里android方法与IOS方法相似性很大,使用者自行整合
打开app的协议我是参考的文章,因为是我们这里的APP是使用uni-app写的。注意到打包后才生效

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值