react框架H5与android、ios分享页面打开特定app的交互

69 阅读 0 评论 46 点赞

我是靠谱客的博主怡然树叶，最近开发中收集的这篇文章主要介绍react框架H5与android、ios分享页面打开特定app的交互，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、判断ios环境、android环境、微信环境、PC环境

二、判断环境、打开app、ios跳转appstore、安卓在微信里面不能直接打开app、需要做一个指引页、指引用户打开浏览器打开app

一、判断ios环境、android环境、微信环境、PC环境

//pc
IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ['Android', 'iPhone',
            'SymbianOS', 'Windows Phone',
            'iPad', 'iPod'];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) >= 0) {
                flag = false;
                break;
            }
        }
        return flag;
    },

//ios
    IsIOS() {
        var u = navigator.userAgent;
        var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isiOS) {
            return true;
        }
    },

//android
    IsAndroid() {
        var u = navigator.userAgent;
        if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
            return true;
        }
    },

//weixin
    IsWeixin() {
        let ua = window.navigator.userAgent.toLowerCase();
        //mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            return true;
        } else {
            return false;
        }
    },

二、判断环境、打开app、ios跳转appstore、安卓在微信里面不能直接打开app、需要做一个指引页、指引用户打开浏览器打开app

//点击打开app的回调、ios直接丢appstore下载包名
OpenTheApp() {
    if (utils.IsIOS()) {
      window.location.href =
        "https://****.****.com/cn/app/%E7%BD%91%E6%BC%94-%E6%89%93%E9%80%A0%E4%BD%A0%E7%9A%84%E8%89%BA%E6%9C%AF%E5%85%83%E5%AE%87%E5%AE%99/id***8";
    }
//安卓环境下分享到微信不能直接打开app需要做个判断先跳转指向网页再打开app
    if (utils.IsAndroid()) {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        this.weixinOpen = true;
      } else {
        try {
         this.android()
        } catch (e) {}
      }
    }
  }


//android的要繁琐一点
 android() {
    var _clickTime = new Date().getTime();
    window.location.href = "****://yiwei/open"; /***打开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 = "artvrpro://yiwei/open";
          window.close();
          // return;
        } else {
          window.location.href = "https://www.****8.com/download"; //下载链接
        }
      }
    }, 20);
  }