1. ホーム
  2. Web制作
  3. html5

h5ページ evokeアプリがインストールされていない場合、ダウンロードにジャンプします(iOS、Android)。

2022-01-12 15:36:51

h5ページ 起動アプリがインストールされていない場合、ダウンロードをスキップする(iOS、Android)

ブラウザとアプリの間には通信プロトコルがないので、h5はユーザーの携帯電話にアプリがインストールされていることを知りません。h5はアプリの起動を試み、起動しない場合はユーザーに当社のアプリをダウンロードするように指示するだけです。

WeChatではスキーマプロトコルがブロックされているので、WeChatでh5を開くと、ユーザーにブラウザで開くように促されます。 <!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>
 
    // Check if the app is installed
    function openApp(e){
        var u = window.navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // android terminal or uc browser
        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 = '??????????????????' ; /***Protocol for opening the app, with Android colleagues provided***/
 
            //start a timer that runs at 20ms intervals and detects if the accumulated consumption time exceeds 3000ms, and ends if it exceeds
        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);
                // Check if the app is open
                if ( document.hidden || document.webkitHidden) {
                    // it's open
                    window.close();
                } else {
                    // not open
                    alert('not opened')
                    // window.location.href = "?????????????? ";// download link
                }
            }
        }, 20);
 
    }
 
    function ios(){
        var _clickTime = +(new Date());
        var ifr = document.createElement("iframe");
        ifr.src = "?????????????? "; /***opens the app's protocol, with ios colleagues providing it***/
        ifr.style.display = "none";
        document.body.appendChild(ifr);
        // Start a timer that runs at 20ms intervals, and check if the cumulative time consumed exceeds 3000ms, and ends if it does
        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);
                // Check if the app is open
                if ( document.hidden || document.webkitHidden) {
                    // It's open
                    window.close();
                } else {
                    // not open
                    alert('not opened')
                    // window.location.href = "??????????????? ";// download link
                }
            }
        },20);
    }
 
    var objbtn=document.getElementById('btn');
    objbtn.onclick=function(){
        openApp()
    }
 
</script>
</head>
 
<body style="background-color: #fff;" >
 
    <! --test app pull up-->
    <div id="btn" style="font-size: 40px;background: blue;color: #fff;height: 56px;text-align: center;">btn</div >
    <! -- test app call up over-->
     
</body>
</html>  

重要 インストールしてアプリを開くことができるが、ユーザーがOKをクリックしてもダウンロードページにジャンプさせることができない。

アプリをインストールしていないユーザーは、待ち時間が長すぎて、まだアプリのダウンロードページにたどり着けない。

アプリがurlスキームで正常に開かれた場合、現在のh5がバックグラウンドに入り、タイマーによる大幅な遅延が発生します。これを決定するために時間を使用してください。

Android携帯の場合、ページがバックグラウンドになっても、タイマーsetTimeoutは動き続けるので、ここではsetIntervalという小さい間隔を何度か繰り返して、累積時間から判断しています。

document.hidden は 4.4 より大きい webview のためのよいサポートで、ページの可視性の api です。

アイオス

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

jsはこのプロトコルのurlを引き出すことができません。

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

タグ、またはiframeのみを使用する

この記事はh5ページ喚起アプリのダウンロード(iOSとAndroid)にジャンプするためにインストールされていない場合は、ここで紹介されている、より関連するh5ページ喚起アプリの内容は、スクリプトハウス以前の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来よりスクリプトハウスをサポートして願っています!.