H5判断是否安装某款app，打开app或跳转到app下载页面

判断是否安装某款app？

原理：

• 技术中 没有某个参数 去判断是否存在app。
• 利用延时器原理：超过指定时间未打开app，则该判断手机未安装该app

如果是在微信浏览器打开h5页面，域名未加入到 微信白名单 中，则必须切换到 浏览器 中才能打开

   /**
    * 判断是否安装app
    * @url ios,android 提供（打开app的链接）
    * @callback （未安装app的回调）
    * */
   function openApp(url, callback) {
       let {isAndroid, isIOS, isIOS9} = judgePhoneType();
       if(isWeiXin()){
           alert("请您在浏览器中打开,即可下载") ;
           return ;
       }

       if (isAndroid || isIOS) {
           let hasApp = true, t = 1000,
               t1 = Date.now(),
               ifr = document.createElement("iframe");
           setTimeout(function () {
               if (!hasApp) {
                   callback && callback()
               }
               document.body.removeChild(ifr);
           }, 2000);

           ifr.setAttribute('src', url);
           ifr.setAttribute('style', 'display:none');
           document.body.appendChild(ifr);

           setTimeout(function () { //启动app时间较长处理
               let t2 = Date.now();
               if (t2 - t1 < t + 100) {
                   hasApp = false;
               }
           }, t);
       }
       if (isIOS9) {
           location.href = url;
           setTimeout(function () {
               callback && callback()
           }, 250);
           setTimeout(function () {
               location.reload();
           }, 1000);
       }
   }

唤端媒介 URL Scheme

我们的手机上有许多私密信息，联系方式、照片、银行卡信息…我们不希望这些信息可以被手机应用随意获取到，信息泄露的危害甚大。所以，如何保证个人信息在设备所有者知情并允许的情况下被使用，是智能设备的核心安全问题。对此，苹果使用了名为 沙盒 的机制：应用只能访问它声明可能访问的资源。但沙盒也阻碍了应用间合理的信息共享，某种程度上限制了应用的能力。因此，我们急需要一个辅助工具来帮助我们实现应用通信， URL Scheme 就是这个工具。

格式

  [scheme:][//authority][path][?query]
  协议：域名/参数
  例如： com.qdxxzy.user://shihaoo.com?type=xxx
  
  const CONFIG = {
        android: 'https://a.app.qq.com/o/simple.jsp?pkgname=com.xiaoxiao.shihaoo',
        ios: 'https://apps.apple.com/cn/app/%E6%98%AF%E5%A5%BD/id1457958161',
        scheme: 'com.qdxxzy.user://'
    };
    window.onload = function () {
        let oBtn = document.getElementById('btn') ;
        oBtn.addEventListener('click', function () {
           //打开app整套流程
            openApp( `${ CONFIG.scheme }shihaoo.com?type=xxx`, goConfirmAddr);
        });

    };
    function openApp(){
        ...
    }
    /**
     * 超时跳转h5页面
     * */
    function goConfirmAddr() {
        let { isAndroid } = judgePhoneType();
        window.location.href =  !isAndroid  ? CONFIG.ios : CONFIG.android ;
    }
    /**
     * 判断是否为微信浏览器
     * 兼容ios
     * */
    function isWeiXin() {
        return /micromessenger/i.test(navigator.userAgent.toLowerCase()) || typeof navigator.wxuserAgent !== 'undefined'
    }
    /**
     * 判断手机类型
     * return [ isAndroid, isIOS, isIOS9 ]
     * */
    function judgePhoneType() {
        let isAndroid = false, isIOS = false, isIOS9 = false, version,
            u = navigator.userAgent,
            ua = u.toLowerCase();
        //Android系统
        if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {   //android终端或者uc浏览器
            isAndroid = true
        }
        //ios
        if (ua.indexOf("like mac os x") > 0) {
            let regStr_saf = /os [\d._]*/gi;
            let verinfo = ua.match(regStr_saf);
            version = (verinfo + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
        }
        let version_str = version + "";
        // ios9以上
        if (version_str !== "undefined" && version_str.length > 0) {
            version = parseInt(version);
            if (version >= 8) {
                isIOS9 = true
            } else {
                isIOS = true
            }
        }
        return {isAndroid, isIOS, isIOS9};
    }

兼容ios，判断是否为微信浏览器（不易查找，亲测有效）

return /micromessenger/i.test(navigator.userAgent.toLowerCase()) || typeof navigator.wxuserAgent !== 'undefined'

js跳转到各手机应用商城

1.是否是内置浏览器

function is_neizhi() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return "weixin";
    } else if (ua.match(/QQ/i) == "qq") {
        return "QQ";
    } else if (ua.match(/Alipay/i) == "alipay" && payway == 2) {
        return "alipay";
    }
    return false;
}

2.判断手机品牌

function verifyBrand() {
    const userAgent = navigator.userAgent.toLowerCase()
    const isIphone = userAgent.match(/(iphone|ipad|ipod)/i);
    const isHuawei = userAgent.match(/huawei/i);
    const isHonor = userAgent.match(/honor/i);
    const isOppo = userAgent.match(/oppo/i);
    const isOppoR15 = userAgent.match(/PACM00/i);
    const isVivo = userAgent.match(/vivo/i);
    const isXiaomi = userAgent.match(/mi\s/i);
    const isXIAOMI = userAgent.match(/xiaomi/i);
    const isXiaomi2s = userAgent.match(/mix\s/i);
    const isRedmi = userAgent.match(/redmi/i);
 
    if (isIphone) {
        return 'iphone'
    } else if (isHuawei || isHonor) {
        return 'huawei';
    } else if (isOppo || isOppoR15) {
        return 'oppo';
    } else if (isVivo) {
        return 'vivo';
    } else if (isXiaomi || isRedmi || isXiaomi2s || isXIAOMI) {
        return 'xiaomi';
    } else {
        return 'other'
    }
}

3.跳转下载的主方法,如果是内置浏览器,需要跳转到手机自带的浏览器方可使用

function goDownload() {
    if (is_neizhi()){
        //内置浏览器  可加提示使其打开手机自带浏览器
        return;
    }
    const iosLinkUrl = "苹果链接";
    const androidLinkurl ="安卓链接";
    const huaweiUrl = 'appmarket://details?id=安卓包名';
    const oppoUrl = "oppomarket://details?packagename=安卓包名";
    const vivoUrl = "vivomarket://details?id=安卓包名";
    const xiaomiUrl = 'mimarket://details?id=安卓包名';
    switch (this.verifyBrand()) {
        case 'iphone':
            window.location.href=iosLinkUrl ;
            break;
        case 'xiaomi':
            window.location.href=xiaomiUrl;
            break;
        case 'huawei':
            window.location.href=huaweiUrl;
            break;
        case 'vivo':
            window.location.href=vivoUrl;
            break;
        case 'oppo':
            window.location.href=oppoUrl;
            break;
        default:
            window.location.href=androidLinkurl;
            break;
    }
}