h5浏览器,唤起app

本文介绍了在H5中如何唤起APP,包括iOS和Android的配置、原理和实现方案。针对不同操作系统和浏览器,如iOS7/iOS8、iOS9、Android以及微信环境,提出了相应的处理策略,讨论了兼容性问题和无完美解决方案的现状。并提到了利用universal link和应用宝在微信中打开APP的解决方案。
摘要由CSDN通过智能技术生成

代码:

 /*
         * function getDeviceBrowser
         * @return {Object} device设备系统,browser浏览器类型
         */
        function _getDeviceBrowser () {
            var ua = window.navigator.userAgent;
            //device & browser
            /*
             * isIos 是否为ios
             * isAndroid 是否为android
             * isMobile 是否为mobile
             */
            var device = {
                isIos: false,
                isAndroid: false,
                isMobile: false,
                //isIpad: false,
                //isIphone: false,
                iosVersion: ""
            }
            /*
             * isWX 是否为微信
             * isQQ 是否为QQ
             * isUC 是否为UC
             */
            var browser = {
                isWX: false,
                isQQ: false,
                isUC: false,
                isWeiBo: false,
                isSafari: false,
                isChrome: false
            }

            //设备系统判断
            device.isIos = (/iPhone os/i.test(ua));
            device.isAndroid = (/android/i.test(ua));
            device.isMobile = !!window.navigator.userAgent.match(/AppleWebKit.*Mobile.*/);

            //ios版本判断
            //iphone:/iphone os ([0-9]+)_/
            //ipad:/cpu os ([0-9]+)_/
            if (ua.toLowerCase().indexOf("like mac os x") > 0) {
                var regStr_saf = /os [\d._]*/gi ;
                var verinfo = ua.toLowerCase().match(regStr_saf) ;
                device.iosVersion = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");
            }

            //浏览器
            browser.isWX = (/micromessenger/i.test(ua));
            browser.isQQ = (/mqqbrowser|qq/i.test(ua));
            browser.isUC = (/ucbrowser/i.test(ua));
            browser.isWeiBo = (/weibo/i.test(ua));
            browser.isSafari = (/safari/i.test(ua) && !/mqqbrowser/i.test(ua));
            browser.isChrome = (/chrome/i.test(ua) && !/mqqbrowser/i.test(ua));

            return {
                device: device,
                browser: browser,
            }

        }


/**
 * Created by sxj on 16/12/28.
 */

angular.module('h5_angularjs');
app.factory("$evokeapp", ['$window', 'FW.utility',
    function ($w, utility) {
        var db = utility.getDeviceBrowser();
        var _URL = {
            "ios": {
                openUrl: "yiqianbao://",
                downloadUrl: "https://itunes.apple.com/app/id745097904"
            },
            "android": {
                openUrl: "eqianbao://",
                downloadUrl: "//d.1qianbao.com/youqian/app/1qb_88888.apk"
            },
            baseUrl: "//d.1qianbao.com/youqian/"
        }

        //alert("isIos: " + db.device.isIos);

        //检查app是否打开
        function openApp(openUrl, callback) {
            function checkOpen(cb){
                var _clickTime = +(new Date());
                function check(elsTime) {
                    if ( elsTime > 3000 || document.hidden || document.webkitHidden) {
                        cb(1);
                    } else {
                        cb(0);
                    }
                }
                //启动间隔20ms运行的定时器,并检测累计消耗时间是否超过3000ms,超过则结束
                var _count = 0, intHandle;
                intHandle = setInterval(function(){
                    _count++;
                    var elsTime = +(new Date()) - _clickTime;
                    if (_count>=100 || elsTime > 3000 ) {
                        clearInterval(intHandle);
                        check(elsTime);
                    }
                }, 20);
            }

            //在iframe 中打开APP
            var ifr = document.createElement('iframe');
            ifr.src = openUrl;
            ifr.style.display = 'none';
            if (callback) {
                checkOpen(function(opened){
                    callback && callback(opened);
                });
            }

            document.body.appendChild(ifr);
            setTimeout(function() {
                document.body.removeChild(ifr);
            }, 2000);
        }

        //唤起函数
        function evokeUp() {
            if (db.browser.isWX) {
                //微信走应用宝流程
                window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.paic.zhifu.wallet.activity';
            } else {
                //
                if (db.device.isIos) {
                    //ios9以下
                    alert(db.device.iosVersion);
                    if (+db.device.iosVersion >= 9) {

                    } else {
                        openApp(_URL.ios.openUrl, function(isOpen) {
                            //alert(isOpen);
                            //唤起之后的回调
                            !isOpen && (window.location.href = _URL.ios.downloadUrl);
                        });
                    }
                } else if (db.device.isAndroid) {
                    openApp(_URL.android.openUrl, function(isOpen) {
                        //alert(isOpen);
                        //唤起之后的回调
                        !isOpen && (window.location.href = _URL.android.downloadUrl);
                    });
                } else {
                    //走base 流程
                    window.location.href = _URL.baseUrl;
                }

            }
        }

        // 部分浏览器只支持 vendor-prefixed
        // 根据浏览器支持情况设置隐藏属性和可见状态改变事件
        //var hidden, state, visibilityChange;
        //if (typeof document.hidden !== "undefined") {
        //    hidden = "hidden";
        //    visibilityChange = "visibilitychange";
        //    state = "visibilityState";
        //} else if (typeof document.mozHidden !== "undefined") {
        //    hidden = "mozHidden";
        //    visibilityChange = "mozvisibilitychange";
        //    state = "mozVisibilityState";
        //} else if (typeof document.msHidden !== "undefined") {
        //    hidden = "msHidden";
        //    visibilityChange = "msvisibilitychange";
        //    state = "msVisibilityState";
        //} else if (typeof document.webkitHidden !== "undefined") {
        //    hidden = "webkitHidden";
        //    visibilityChange = "webkitvisibilitychange";
        //    state = "webkitVisibilityState";
        //}
        // 添加一个时间来实时改变页面的标题
        //document.addEventListener(visibilityChange, function(e) {
        //    // Start or stop processing depending on state
        //    if (document.webkitHidden) {
        //       alert("离开当前窗口啦");
        //    } else {
        //        document.title = "选中当前窗口啦";
        //    }
        //
        //
        //}, false);


        return {
            evoke: function(url) {
                evokeUp();
            }
        }
    }
]);


网易新闻实现代码

window.NRUM = window.NRUM || {};
window.NRUM.config = {
    key:'27e86c0843344caca7ba9ea652d7948d',
    clientStart: +new Date()
};
(function() {
    var n = document.getElementsByTagName('script')[0],
        s = document.createElement('script');

    s.type = 'text/javascript';
    s.async = true;
    s.src = '//nos.netease.com/apmsdk/napm-web-min-1.1.3.js';
    n.parentNode.insertBefore(s, n);
})();


;
(function(window,doc){

    // http://apm.netease.com/manual?api=web
    NRUM.mark && NRUM.mark('pageload', true)

    var list = []
    var config = null

    // jsonp
    function jsonp(a, b, c) {
        var d;
        d = document.createElement('script');
        d.src = a;
        c && (d.charset = c);
        d.onload = function() {
            this.onload = this.onerror = null;
            this.parentNode.removeChild(this);
            b && b(!0);
        };
        d.onerror = function() {
            this.onload = this.onerror = null;
            this.parentNode.removeChild(this);
            b && b(!1);
        };
        document.head.appendChild(d);
    };


    function localParam(search,hash){
        search = search || window.location.search;
        hash = hash || window.location.hash;
        var fn = function(str,reg){
            if(str){
                var data = {};
                str.replace(reg,function( $0, $1, $2, $3 ){
                    data[ $1 ] = $3;
                });
                return data;
            }
        }
        return {search: fn(search,new RegExp( "([^?=&]+)(=([^&]*))?", "g" ))||{},hash: fn(hash,new RegExp( "([^#=&]+)(=([^&]*))?", "g" ))||{}};
    }

    jsonp('http://active.163.com/service/form/v1/5847/view/1047.jsonp')

    window.search = localParam().search
    window._callback = function(data) {
        window._callback = null
        list = data.list
        if(search.s && !!search.s.match(/^wap/i)) {
            config = list.filter(function(item){
                return item.type === 'wap'
            })[0]
            return
        }
        config = list.filter(function(item){
            return item.type === search.s
        })[0]
    }

    var isAndroid = !!navigator.userAgent.match(/android/ig),
        isIos = !!navigator.userAgent.match(/iphone|ipod/ig),
        isIpad = !!navigator.userAgent.match(/ipad/ig),
        isIos9 = !!navigator.userAgent.match(/OS 9/ig),
        isYx = !!navigator.userAgent.match(/MailMaster_Android/i),
        isNewsapp = !!navigator.userAgent.match(/newsapp/i),
        isWeixin = (/MicroMessenger/ig).test(navigator.userAgent),
        isYixin = (/yixin/ig).test(navigator.userAgent),
        isQQ = (/qq/ig).test(navigator.userAgent),
        params = localParam().search,
        url = 'newsapp://',
        iframe = document.getElementById('iframe');

    var isIDevicePhone = (/iphone|ipod/gi).test(navigator.platform);
    var isIDeviceIpad = !isIDevicePhone && (/ipad/gi).test(navigator.platform);
    var isIDevice = isIDevicePhone || isIDeviceIpad;
    var isandroid2_x = !isIDevice && (/android\s?2\./gi).test(navigator.userAgent);
    var isIEMobile = !isIDevice && !isAndroid && (/MSIE/gi).test(navigator.userAgent);
    var android_url = (!isandroid2_x) ? "http://3g.163.com/links/4304" : "http://3g.163.com/links/6264";
    var ios_url = "http://3g.163.com/links/3615";
    var wphone_url = "http://3g.163.com/links/3614";
    var channel = params.s || 'newsapp'

    // 判断在不同环境下app的url
    if(params.docid){
        if(params['boardid'] && params['title']){
            url = url + 'comment/' + params.boardid + '/' + params.docid + '/' + params.title
        }else{
            url = url + 'doc/' + params.docid
        }
    }else if(params.sid){
        url = url + 'topic/' + params.sid
    }else if(params.pid){
        var pid = params.pid.split('_')
        url = url + 'photo/' + pid[0] + '/' + pid[1]
    }else if(params.vid){
        url = url + 'video/' + params.vid
    }else if(params.liveRoomid){
        url = url + 'live/' + params.liveRoomid
    }else if(params.url){
        url = url + 'web/' + decodeURIComponent(params.url)
    }else if(params.expertid){
        url = url + 'expert/' + params.expertid
    }else if(params.subjectid){
        url = url + 'subject/' + params.subjectid
    }else if(params.readerid){
        url = url + 'reader/' + params.readerid
    }else{
        url += 'startup'
    }
    if(url.indexOf('?') >= 0){
        url += '&s=' + (params.s || 'sps')
    }else{
        url += '?s=' + (params.s || 'sps')
    }

    // ios && 易信  用iframe 打开
    if((isIos||isIpad) && navigator.userAgent.match(/yixin/i)) {
        document.getElementById('iframe').src = url;
    }

    var height = document.documentElement.clientHeight;

    // 通常情况下先尝试使用iframe打开
    document.getElementById('iframe').src = url;

    // 移动端浏览器中,将下载页面显示出来
    if(!isWeixin && !isQQ && !isYixin && !isYx){
        document.querySelector('.main-body').style.display = 'block'
        if(isIos9){
            document.querySelector('.main-body').classList.add('showtip')
        }

        setTimeout(function(){
            document.body.scrollTop = 0
        },200)
    }else{
        document.getElementById('guide').style.display = 'block'
    }

    // Forward To Redirect Url
    // Add by zhanzhixiang 12/28/2015
    if (params.redirect) {
        var redirectUrl = decodeURIComponent(params.redirect);
        if ( typeof(URL) === 'function' && new URL(redirectUrl).hostname.search("163.com") !== -1) {
            window.location.href = redirectUrl;
        } else if (redirectUrl.search("163.com") !== -1){
            window.location.href = redirectUrl;
        };
    }

    // Forward To Redirect Url End
    if ((isWeixin || isQQ) && isAndroid) {
        window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.netease.newsreader.activity&ckey=CK1331205846719&android_schema=' + url.match(/(.*)\?/)[1]
    }

    if(isIos||isIpad){
        document.getElementById("guide").classList.add('iosguideopen')
    }else if (isAndroid){
        document.getElementById("guide").classList.add('androidguideopen')
    }else{
        // window.location.href = 'http://www.163.com/newsapp'
    }

    document.getElementById('link').addEventL
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值