h5頁(yè)面喚起app如果沒安裝就跳轉(zhuǎn)下載(iOS和Android)

發(fā)布時(shí)間：2020-06-03 16:38:31 作者：蓋大樓

這篇文章主要介紹了h5頁(yè)面喚起app如果沒安裝就跳轉(zhuǎn)下載(iOS和Android),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

瀏覽器和app沒有通信協(xié)議，所以h5不知道用戶的手機(jī)釋放安裝了app。因此只能是h5去嘗試喚起app，若不能喚起，引導(dǎo)用戶去下載我們的app。

微信里屏蔽了 schema 協(xié)議,如果在微信中打開h5，則會(huì)提示用戶在瀏覽器中打開。<!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的協(xié)議，有安卓同事提供***/
 
            //啟動(dòng)間隔20ms運(yùn)行的定時(shí)器，并檢測(cè)累計(jì)消耗時(shí)間是否超過3000ms，超過則結(jié)束
        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的協(xié)議，有ios同事提供***/
        ifr.style.display = "none";
        document.body.appendChild(ifr);
        //啟動(dòng)間隔20ms運(yùn)行的定時(shí)器，并檢測(cè)累計(jì)消耗時(shí)間是否超過3000ms，超過則結(jié)束
        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;" >
 
    <!--測(cè)試app調(diào)起-->
    <div id="btn" style="font-size: 40px;background: blue;color: #fff;height: 56px;text-align: center;">btn</div>
    <!--測(cè)試app調(diào)起over-->
     
</body>
</html>

重要的是安裝了app打開app，但是不能讓用戶在點(diǎn)擊確定的時(shí)候，跳轉(zhuǎn)到下載頁(yè)。

沒安裝app的用戶，不能等待太久，還不到app下載頁(yè)。

若通過url scheme 打開app成功，那么當(dāng)前h5會(huì)進(jìn)入后臺(tái)，通過計(jì)時(shí)器會(huì)有明顯延遲。利用時(shí)間來判斷。

由于安卓手機(jī),頁(yè)面進(jìn)入后臺(tái)，定時(shí)器setTimeout仍會(huì)不斷運(yùn)行，所以這里使用setInterval,較小間隔時(shí)間重復(fù)多次。來根據(jù)累計(jì)時(shí)間判斷。

document.hidden對(duì)大于4.4webview支持很好，為頁(yè)面可見性api。

ios

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

js無(wú)法調(diào)起這種協(xié)議的url

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

只能用 a標(biāo)簽，或者 iframe

到此這篇關(guān)于h5頁(yè)面喚起app如果沒安裝就跳轉(zhuǎn)下載(iOS和Android)的文章就介紹到這了,更多相關(guān)h5頁(yè)面喚起app內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！