js判断是否安装某个app,安装了就打开app,未安装跳转到下载页面

怎么根据前端页面开发后端
前端多页面开发流程图
前端开发 清除页面缓存

javascript 代码

var openAppFun = (function() {
    // UA鉴定
    var browser = {
        isAndroid: function() {
            return navigator.userAgent.match(/Android/i) ? true : false
        },
        isMobileQQ: function() {
            var ua = navigator.userAgent
            return (
                /(iPad|iPhone|iPod).*? (IPad)?QQ\/([\d\.]+)/.test(ua) ||
                /\bV1_AND_SQI?_([\d\.]+)(.*? QQ\/([\d\.]+))?/.test(ua)
            )
        },
        isIOS: function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false
        },
        isWx: function() {
            return navigator.userAgent.match(/micromessenger/i) ? true : false
        },
    }
    var AppConfig = {
        // 协议头
        PROTOCAL: ”,
        // 主页
        HOME: ”,
        // 唤起失败时的跳转链接
        FAILBACK: {
            ANDROID: ”,
            IOS: ”,
        },
        // Android apk 相关信息
        APK_INFO: {
            PKG: ‘cn.xx.xx’,
            CATEGORY: ‘android.intent.category.DEFAULT’,
            ACTION: ‘android.intent.action.VIEW’,
        },
        // 唤起超时时间,超时则跳转到下载页面
        LOAD_WAITING: 3000,
    }
    var ua = window.navigator.userAgent
    // 是否为Android下的chrome浏览器,排除mobileQQ;
    // Android下的chrome,需要通过特殊的intent 来唤醒
    // refer link:https://developer.chrome.com/multidevice/android/intents
    var isAndroidChrome =
        (ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/)) &&
        browser.isAndroid() &&
        !browser.isMobileQQ()
    return {
        /**
         * [mixinConfig 重新收拢配置]
         * @param {[type]} config [description]
         * @return {[type]} [description]
         */
        mixinConfig: function(config) {
            if (!config) {
                return
            }
            AppConfig.PROTOCAL = config.protocal || AppConfig.PROTOCAL
            AppConfig.schema = config.schema || AppConfig.HOME
            AppConfig.LOAD_WAITING =
                config.loadWaiting || AppConfig.LOAD_WAITING
            if (browser.isIOS()) {
                AppConfig.FAILBACK.IOS =
                    config.failUrl || AppConfig.FAILBACK.IOS
            } else if (browser.isAndroid()) {
                AppConfig.FAILBACK.ANDROID =
                    config.failUrl || AppConfig.FAILBACK.ANDROID
                AppConfig.APK_INFO = config.apkInfo || AppConfig.APK_INFO
            }
        },
        /**
         * [generateSchema 根据不同的场景及UA生成最终应用的schema]
         * @return {[type]} [description]
         */
        generateSchema: function(schema) {
            var localUrl = window.location.href
            var schemaStr = ”
            // 如果未定义schema,则根据当前路径来映射
            if (!schema) {
                schemaStr = AppConfig.HOME
                // 在schema省略时,可以根据当前页面的url,设置不同的默认值
            } else {
                schemaStr = schema
            }
            // 如果是安卓chrome浏览器,则通过intent方式打开
            // 修改为都是使用普通打开方式
            schemaStr = AppConfig.PROTOCAL + ‘://’ + schemaStr
            return schemaStr
        },
        /**
         * [loadSchema 唤醒native App,如果无法唤醒,则跳转到下载页]
         * @return {[type]} [description]
         */
        loadSchema: function(config) {
            this.mixinConfig(config)
            var schemaUrl = this.generateSchema(AppConfig.schema)
            var iframe = document.createElement(‘iframe’),
                aLink = document.createElement(‘a’),
                body = document.body,
                loadTimer = null
            // 隐藏iframe及a
            aLink.style.cssText = iframe.style.cssText =
                ‘display:none;width:0px;height:0px;’
            // Android 微信不支持schema唤醒,必须提前加入腾讯的白名单
            if (browser.isWx() && browser.isAndroid()) {
                window.location.href = AppConfig.FAILBACK.ANDROID
                // ios 9 safari 不支持iframe的方式跳转
            } else if (browser.isIOS()) {
                if (browser.isWx()) {
                    window.location.href = AppConfig.FAILBACK.IOS
                } else {
                    aLink.href = schemaUrl
                    body.appendChild(aLink)
                    aLink.click()
                }
                // Android chrome 不支持iframe 方式唤醒
                // 适用:chrome,leibao,mibrowser,opera,360
            }
            //else if (isAndroidChrome) {
            // aLink.href = schemaUrl;
            // body.appendChild(aLink);
            // aLink.click();
            //
            // // 其他浏览器
            // // 适用:UC,sogou,firefox,mobileQQ
            //}
            else {
                body.appendChild(iframe)
                iframe.src = schemaUrl
            }
            // 如果LOAD_WAITING时间后,还是无法唤醒app,则直接打开下载页
            // opera 无效
            var start = Date.now(),
                that = this
            loadTimer = setTimeout(function() {
                if (document.hidden || document.webkitHidden) {
                    return
                }
                // 如果app启动,浏览器最小化进入后台,则计时器存在推迟或者变慢的问题
                // 那么代码执行到此处时,时间间隔必然大于设置的定时时间
                if (Date.now() – start > AppConfig.LOAD_WAITING + 200) {
                    // come back from app
                    // 如果浏览器未因为app启动进入后台,则定时器会准时执行,故应该跳转到下载页
                } else {
                    window.location.href = browser.isIOS()
                        ? AppConfig.FAILBACK.IOS
                        : AppConfig.FAILBACK.ANDROID
                }
            }, AppConfig.LOAD_WAITING)
            // 当本地app被唤起,则页面会隐藏掉,就会触发pagehide与visibilitychange事件
            // 在部分浏览器中可行,网上提供方案,作hack处理
            var visibilitychange = function() {
                var tag = document.hidden || document.webkitHidden
                tag && clearTimeout(loadTimer)
            }
            document.addEventListener(
                ‘visibilitychange’,
                visibilitychange,
                false,
            )
            document.addEventListener(
                ‘webkitvisibilitychange’,
                visibilitychange,
                false,
            )
            // pagehide 必须绑定到window
            window.addEventListener(
                ‘pagehide’,
                function() {
                    clearTimeout(loadTimer)
                },
                false,
            )
        },
    }
})()
export default openAppFun

html 代码

<div class=”become f-fl item” @click=”becomePromoter”>
    <div class=”icon”></div>
    <div class=”text”>成为推广员</div>
</div>

使用方法:
javascript 代码

becomePromoter(){
    let _downLoadUrl =”;
    let _schema =”;
    let _protocal =”;
    if (global.getIOSorAndroid() === ‘ios’) {
        _downLoadUrl =’http://a.app.qq.com/o/simple.jsp?pkgname=com.xituchina.umbrella’;
        _schema =’?promoter’;
        _protocal =’XiTuPhone’;
    } else if (global.getIOSorAndroid() === ‘android’) {
        _downLoadUrl =’http://fusion.qq.com/cgi-bin/qzapps/unified_jump?actionFlag=0&appid=42342315&appinstall=0&params=pname%3Dcom.xituchina.umbrella%26versioncode%3D96%26channelid%3D%26actionflag%3D0&from=mqq’;
        _schema =’promotion’;
        _protocal =’xitu’;
    }
    openAppFun.loadSchema({
        // 通过NN打开某个链接
        schema: _schema,
//schema头协议,实际情况填写
protocal: _protocal,
//发起唤醒请求后,会等待loadWaiting时间,超时则跳转到failUrl,默认3000ms
loadWaiting:”1000″,
//唤起失败时的跳转链接,默认跳转到下载页
failUrl: _downLoadUrl,
// apk信息,请根据实际情况填写
apkInfo:{
        PKG:”com.xituchina.umbrella”,
CATEGORY:”android.intent.category.DEFAULT”,
ACTION:”android.intent.action.VIEW”
}
});
},
前端页面开发外包价格
web前端页面开发技巧
前端开发页面
» 本文来自:前端开发者 » 《js判断是否安装某个app,安装了就打开app,未安装跳转到下载页面》
» 本文链接地址:https://www.rokub.com/8054.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!