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

15,602 阅读1分钟

判断是否安装某款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'