JavaScript打开APP

最新推荐文章于 2024-03-14 16:50:50 发布

guxiansheng1991

最新推荐文章于 2024-03-14 16:50:50 发布

阅读量1.1w

点赞数 4

分类专栏： javascript 文章标签： JavaScript打开APP

本文链接：https://blog.csdn.net/guxiansheng1991/article/details/80489821

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

方法都是网上的方法,但是抄来的方法有一个缺陷就是,
打开APP后再返回网页,发现依然能跳转到下载页面
这里看到了一中解决方法,就是在setTimeout中加时间差值的判断,如果setTimeout中的时间差值超过1s,即代表用户已经安装APP

// 打开APP
    openApp() {
        let ua = navigator.userAgent.toLowerCase();
        console.log(ua);
        if(this.isWeixinBrowser(ua)){
            $('.layer').show();//遮罩层（使用外部浏览器打开，此处样式自行设定）
        }else{
            if(this.isAndroid(ua)){
                //android
                window.location = 'innersect://navigation?target=product&id=1747';
                let loadDateTime = Date.now();
                let turn = setTimeout(function(){
                    let timeOutDateTime = Date.now();
                    if ((timeOutDateTime - loadDateTime) < 1000 ){
                        window.location = 'https://fir.im/d7bc?utm_source=fir&utm_medium=qr&release_id=5b0bd16e959d6952471473bd'
                    }
                },600);
            }else{
                //ios
                window.location = 'innersect://navigation?target=product&id=1747';
                let loadDateTime = Date.now();
                let turn = setTimeout(function(){
                    let timeOutDateTime = Date.now();
                    if ((timeOutDateTime - loadDateTime) < 1000 ){
                        window.location = 'itms-apps://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1243476718';
                    }
                },600);
            }
        }
    },
    isWeixinBrowser(ua) {
        return (/micromessenger/.test(ua)) ? true : false;
    },
    isAndroid(ua) {
        return ua.indexOf('android') > -1 || ua.indexOf('linux') > -1;
    }

上面分享的方法有缺陷,在安卓上体验没有问题,但是在苹果上,当没安装APP的时候,会弹出一个无效链接的警告框,体验非常不好
这里采取另外一个比较通用的解决方案:
点击下图中的立即打开按钮后,跳转到一个另外的网页B,在另一个网页B中完成打开APP,或者引导下载
网页B实现逻辑:
(1) 首先网页放APP的静态下载按钮,不参与其他逻辑
(2) onload事件

window.location.href = 'app scheme';
// 代码片段A
setTimeout(function() {
  window.location.reload();
  window.location.href = '下载引导页';
}, 50);

解释:
代码片段A解决苹果机器弹出无效网址的警告框问题,其实苹果机器已经弹出来了警告框,但是50毫秒后立即刷新,覆盖了警告框(同时刷新页面不会覆盖confirm弹框),所以能够在用户已经安装APP的时候,刷新页面也会打开APP

这里写图片描述

重定向网页代码


<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta charset="UTF-8">
</head>

<body onload="load()">
    <div style="width:100%;">
        <img src="http://res.innersect.net/share/share_bg.jpg" class="appLogo">
    </div>
    <div style="width:100%;">
        <img src="http://res.innersect.net/share/down_btn.png" class="appButton" onclick="onClickDownload()">
    </div>
</body>

<script>

    function onClickDownload() {
        var u = navigator.userAgent;
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isIOS) {
            window.open(
                "http://a.app.qq.com/o/simple.jsp?pkgname=com.tmmt.innersect"
            );
        } else {
            // var ua = window.navigator.userAgent.toLowerCase();
            window.open(
                "http://res.innersect.net/download/general_InnerSect.apk"
            );
        }
    }

    function load() {
        var query = getRequest();
        // let reloadFlag = query['reloadFlag'];

        // let url = location.host + location.pathname;
        let reloadFlag = localStorage.getItem("reloadFlag");
        console.log(reloadFlag);
        console.log(!reloadFlag);
        if ('true' != reloadFlag) {
            window.location.href = decodeURI(query['url']);
            setTimeout(function () {
                console.log(1);
                localStorage.setItem("reloadFlag", true);
                // let newUrl = "https://" + url;
                // window.location.href = flagUrl;
                window.location.reload();
                // window.location.replace(newUrl);
            }, 50);
        } else {
            console.log(2);
            localStorage.setItem("reloadFlag", false);
        }
    }

    function getRequest() {
        var url = location.search; //获取url中含"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }


</script>

<style>
    body {
        height: 100%;
        background: black;
        filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
        -moz-background-size: 100% 100%;
        background-size: 100% 100%;
        background-attachment: fixed;
        text-align: center;
    }

    .btn_wrapper {
        margin-top: 59px;
    }

    .appLogo {
        margin-top: 15px;
        width: 100%;
    }

    .appSlogan {
        margin-top: 30px;
        max-width: 240px;
    }

    .appButton {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: 10%;
        max-width: 80%;
    }

    .appDownload {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 5%;
        left: 8%;
        background: rgba(0, 0, 0, 0.7);
        /* visibility: hidden; */
        display: none;
    }

    .show_download {
        /* visibility: visible; */
        display: inline;
    }

    @media (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
        .btn_wrapper {
            margin-top: 64.9px;
        }

        .appLogo {
            margin-top: 15px;
            width: 100%;
        }

        .appSlogan {
            margin-top: 40px;
            max-width: 264px;
        }

        .appButton {
            margin-top: -30px;
            max-width: 80%;
        }
    }
</style>

</html>

guxiansheng1991

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
2
评论
JavaScript打开APP

方法都是网上的方法,但是抄来的方法有一个缺陷就是, 打开APP后再返回网页,发现依然能跳转到下载页面这里看到了一中解决方法,就是在setTimeout中加时间差值的判断,如果加载时间超出1秒,即代表用户没有安装APP// 打开APP openApp() { let ua = navigator.userAgent.toLowerCase(); ...
复制链接

扫一扫