h5页面唤起appiOS和Android,没有安装则跳转下载页面

浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app。因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app。

微信里屏蔽了 schema 协议,如果在微信中打开h5,则会提示用户在浏览器中打开。

HTML代码

<div id="btn">
<a onclick="submitFn ><button>打开app</button></a>
</div>

js代码

function submitFn){
    //判断浏览器
    var u = navigator.userAgent;
    if/MicroMessenger/gi.testu) {
       // 引导用户在浏览器中打开
        alert'请在浏览器中打开');
        return;
    }
    var d = new Date);
    var t0 = d.getTime);
    ifu.indexOf'Android') > -1 || u.indexOf'Linux') > -1){
        //Android
        ifopenApp'en://startapp')){
         openApp'en://startapp');
        }else{
            //由于打开需要1~2秒,利用这个时间差来处理--打开app后,返回h5页面会出现页面变成app下载页面,影响用户体验
            var delay = setIntervalfunction){
                 var d = new Date);
                 var t1 = d.getTime);
                 if t1-t0<3000 && t1-t0>2000){
                    alert'请下载APP');
                     window.location.href = "app下载地址";
                 }
                 ift1-t0>=3000){
                      clearIntervaldelay);
                 }
            },1000);
        }
    }else ifu.indexOf'iPhone') > -1){
        //IOS
        ifopenApp'ios--scheme')){  
            openApp'ios--scheme');
        }else{
            var delay = setIntervalfunction){
                var d = new Date);
                var t1 = d.getTime);
                if t1-t0<3000 && t1-t0>2000){
                    alert'请下载APP');
                    window.location.href = "app下载地址";
                }
                ift1-t0>=3000){
                    clearIntervaldelay);
                }
            },1000);
        }
    }    
}

function openAppsrc) {
// 通过iframe的方式试图打开APP,如果能正常打开,会直接切换到APP,并自动阻止a标签的默认行为
// 否则打开a标签的href链接
     var ifr = document.createElement'iframe');
     ifr.src = src;
     ifr.style.display = 'none';
     document.body.appendChildifr);
     window.setTimeoutfunction){
          document.body.removeChildifr);
     },2000);
}

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注