H5页面中唤起native app

最新推荐文章于 2022-10-25 11:17:33 发布

良_123

最新推荐文章于 2022-10-25 11:17:33 发布

阅读量1.5k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/helloxiaoliang/article/details/78923842

版权

js 专栏收录该内容

106 篇文章 1 订阅

订阅专栏


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


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

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

<span style="color:inherit">核心代码：</span>

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

            //没有安装应用会执行下面的语句
            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）