H5页面中唤起native app

 

需求：如果本地安装了app，那么就直接唤起本地的app，如果没有安装，则跳转到下载。

兼容性：在手机各大浏览器能唤醒。微信 QQ客户端 新浪微博客户端 腾讯微博客户端无法唤醒，需另行处理。

原理：ios与android都支持一种叫做schema协议的链接。这种协议的类似于我们熟悉的http协议，我们只要跟app协商好协议头，app通过拦截到这个协议头的请求就可以知道有网页要求调用。而对于js来说，我们这要像a标签的href一样来激活这个协议的链接就行了。

核心代码：

$("a[href^='schema://']").on('click',function(e){
    e.preventDefault();
    if(isWeixinBrowser() || isQQBrowser()){
        $('.layer').show(); //友好的提示页面
    }else{
        if(isAndroid){
            //android
            //此操作会调起app并阻止接下来的js执行
            $('body').append("");

            //没有安装应用会执行下面的语句
            setTimeout(function(){window.location = 'http://www.yourdlurl.com/download.html'},600);
        }else{
            //ios
            window.location = 'schema://openapp';
            setTimeout(function(){window.location = 'itms-apps://itunes.apple.com/app/idXXXXXXX'},25);
        }
    }
})
function isWeixinBrowser() {
    return (/micromessenger/.test(ua)) ? true : false;
}
function isQQBrowser() {
    return (ua.match(/QQ/i) == "qq") ? true : false;
}

 

 

 

 

 

 

另附详细教程：

H5唤起APP指南(附开源唤端库)

H5页面中唤起native app

web和native进行交互（JSBridge）