H5唤醒App

由于公司H5离职了，一直没有招到合适的，所以自学了H5的开发，一边做iOS开发，然后顺便写写H5，哈哈哈，觉得也挺有意思的

看网上好多h5打开App的博客，但看了那么多实现跳转的时候并没有达到我的预期呀，最终结合多个博客，实现了我想要的功能，这里记录下来，希望可以帮到其他人

这个方法是点击打开App的时候调用这个方法，本应用场景是打开和下载的功能都在一个按钮上进行处理

在打开自定义URL scheme时
如果安装了App，则会弹出对话框，询问是否用打开XX应用。
若未安装App则会显示“safari打不开该网页，因为网址无效”。

解决方法如下

function openJslApp() {

    var isIos = browser.versions.iPhone || browser.versions.iPad || browser.versions.ios; //ios终端
    var isAndroid = browser.versions.android; //android终端
    var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;

    var downloadUrl = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.jiutouxiang';
    var openUrl_IOS = 'openapp://xxx'
    var openUrl_Android = 'openapp://xxx'

    var ua = window.navigator.userAgent.toLowerCase();

    //判断是否是ios
    var startTime = Date.now();

    /** 在微信打开 */
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {

        $("#openBrowser").css("display", "block").click(function () {
            $("#openBrowser").css("display", "none");
        });

    } else {

        if (isIos) {

            if (isIOS9) {

                window.location.href = openUrl_IOS;

            } else {

                openApp(openUrl_IOS);
            }

            var interval = setInterval(function () {

                var endTime = Date.now();

                if (endTime - startTime < 3000) {

                    window.location.href = downloadUrl;

                    clearTimeout(interval);
                }

            }, 2000);

        } else if (isAndroid) { //判断是否是android

            if (isChrome) {

                //chrome浏览器用iframe打不开得直接去打开，算一个坑
                window.location.href = openUrl_Android;

            } else {

                openApp(openUrl_Android);
            }

            var interval = setInterval(function () {

                var endTime = Date.now();

                if (endTime - startTime < 3000) {

                    window.location.href = downloadUrl;

                    clearTimeout(interval);
                }

            }, 2000);

        } else {

            var interval = setInterval(function () {

                var endTime = Date.now();

                if (endTime - startTime < 3000) {

                    window.location.href = downloadUrl;

                    clearTimeout(interval);
                }

            }, 2000);
        }
    }
}

function openApp(src) {

// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
// 否则打开a标签的href链接

    var ifr = document.createElement('iframe');
    ifr.src = src;
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    window.setTimeout(function(){
        document.body.removeChild(ifr);
    },200);
}

/*判断是否是ios9以上*/
function isIOS9() {
    //获取固件版本
    var getOsv = function () {
        var reg = /OS ((\d+_?){2,3})\s/;
        if (navigator.userAgent.match(/iPad/i) || navigator.platform.match(/iPad/i) || navigator.userAgent.match(/iP(hone|od)/i) || navigator.platform.match(/iP(hone|od)/i)) {
            var osv = reg.exec(navigator.userAgent);
            if (osv.length > 0) {
                return osv[0].replace('OS', '').replace('os', '').replace(/\s+/g, '').replace(/_/g, '.');
            }
        }
        return '';
    };
    var osv = getOsv();
    var osvArr = osv.split('.');
    //初始化显示ios9引导
    if (osvArr && osvArr.length > 0) {
        if (parseInt(osvArr[0]) >= 9) {
            return true
        }
    }
    return false
}

检测到未安装App，则跳转到下载链接

image.png

最后编辑于：2018.12.02 22:45:51