h5 調起app 如果沒安裝就跳轉下載


<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no;" name="viewport" />

<script>

    // 檢查是否安裝app
    function openApp(e){
        var u = window.navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端或者uc瀏覽器
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if(isAndroid){
            android();
        }
        if(isiOS){
            ios();
        }
    }
    function android(){
        var _clickTime = new Date().getTime();
        window.location.href = '??????????????????'; /***打開app的協議,有安卓同事提供***/

            //啟動間隔20ms運行的定時器,並檢測累計消耗時間是否超過3000ms,超過則結束
        var _count = 0, intHandle;
        intHandle = setInterval(function(){
            _count++;
            var elsTime = new Date().getTime() - _clickTime;
            if (_count>=100 || elsTime > 3000 ) {
                console.log(_count)
                console.log(elsTime)
                clearInterval(intHandle);
                //檢查app是否打開
                if ( document.hidden || document.webkitHidden) {
                    // 打開了
                    window.close();
                } else {
                    // 沒打開
                    alert('沒打開')
                    // window.location.href = "??????????????";//下載鏈接
                }
            }
        }, 20);

    }

    function ios(){
        var _clickTime = +(new Date());
        var ifr = document.createElement("iframe");
        ifr.src = "??????????????"; /***打開app的協議,有ios同事提供***/
        ifr.style.display = "none";
        document.body.appendChild(ifr);
        //啟動間隔20ms運行的定時器,並檢測累計消耗時間是否超過3000ms,超過則結束
        var _count = 0, intHandle;
        intHandle = setInterval(function(){
            _count++;
            var elsTime =  +(new Date()) - _clickTime;
            console.log(_count,elsTime,+(new Date()),_clickTime)
            if (_count>=100 || elsTime > 3000 ) {
                clearInterval(intHandle);
                document.body.removeChild(ifr);
                //檢查app是否打開
                if ( document.hidden || document.webkitHidden) {
                    // 打開了
                    window.close();
                } else {
                    // 沒打開
                    alert('沒打開')
                    // window.location.href = "???????????????";//下載鏈接
                }
            }
        },20);
    }

    var objbtn=document.getElementById('btn');
    objbtn.onclick=function(){
        openApp()
    }

</script>
</head>

<body style="background-color: #fff;" >

    <!--測試app調起-->
    <div id="btn" style="font-size: 40px;background: blue;color: #fff;height: 56px;text-align: center;">btn</div>
    <!--測試app調起over-->
    
</body>
</html>  

 

重要的是 安裝了app打開app,但是 不能讓用戶在點擊確定的時候,跳轉到下載頁。

    沒安裝app的用戶,不能等待太久,還不到app下載頁。

若通過url scheme 打開app成功,那么當前h5會進入后台,通過計時器會有明顯延遲。利用時間來判斷。

  • 由於安卓手機,頁面進入后台,定時器setTimeout仍會不斷運行,所以這里使用setInterval,較小間隔時間重復多次。來根據累計時間判斷。
  • document.hidden對大於4.4webview支持很好,為頁面可見性api。

ios

window.location.href='rtjr://app.rongtuojinrong.com?flag=23&pid={$pid}';

  js無法調起 這種協議的url

<a  href="rtjr://app.rongtuojinrong.com?flag=23&pid={$pid}" ></a>

  只能用 a標簽,或者 iframe


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM