ホームページ > ウェブフロントエンド > H5 チュートリアル > モバイルブラウザからAPPを開く、またはダウンロードページにジャンプする実装

モバイルブラウザからAPPを開く、またはダウンロードページにジャンプする実装

一个新手
リリース: 2018-05-28 17:47:29
オリジナル
18848 人が閲覧しました

モバイルブラウザでアプリを開くか、ダウンロードページにジャンプします

最も単純な例とキーコードのみを以下に示します
ハードウェア条件が限られているため、Androidでの状況のみがテストされました

スキームを追加します

モバイルで作成されましたHBuilder APPプロジェクトの下にmanifest.jsonファイルがあるので、その中にスキームを追加し、スキームの値を好きなものに設定します。
モバイルブラウザからAPPを開く、またはダウンロードページにジャンプする実装

Web ページ設定

現時点では、モバイル ブラウザー アクセス用のシンプルな Web ページを提供できるシンプルな Web システムが必要です。
これは Java をやったことがある人なら誰でも知っているので、私は教えません。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><head><meta charset="utf-8" />
<title>文档标题</title>
</head>
<body>
    <p style="font-size: 68px;">
        <a href="javascript:open_or_download_app();">打开APP</a>
        <span id="device"></span>
    </p>
    <script type="text/javascript">
    //<![CDATA[
    function open_or_download_app() {
        var device = document.getElementById("device");
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
            device.innerHTML = "ios设备";
            // 判断useragent,当前设备为ios设备
            var loadDateTime = new Date();
          // 设置时间阈值,在规定时间里面没有打开对应App的话,直接去App store进行下载。
            window.setTimeout(function() {
                var timeOutDateTime = new Date();
                if (timeOutDateTime - loadDateTime <2200) {
                    window.location = "xxxxxxxx";  // APP下载地址
                } else {
                    window.close();
                }
            },2000);
             window.location = "apptest://apptest";  //ios端URL Schema
        } else if (navigator.userAgent.match(/android/i)) {
            device.innerHTML = "Android设备";
            // 判断useragent,当前设备为Android设备
            // 判断useragent,当前设备为ios设备
            var loadDateTime = new Date();
          // 设置时间阈值,在规定时间里面没有打开对应App的话,直接去App store进行下载。
            window.setTimeout(function() {
                var timeOutDateTime = new Date();
                if (timeOutDateTime - loadDateTime < 2200) {
                    window.location = "xxxxxxxx";   // APP下载地址
                } else {
                    window.close();
                }
            },2000);
             window.location = "apptest://apptest";  // Android端URL Schema 
        } 
    } 
    //]]>
    </script>
    </body>
    </html>
ログイン後にコピー

AndroidのURLスキーマは「設定したスキーマ://設定したスキーマ」と書くことでアクセスできます。 iOSはこれとは異なります。 URL Schemaの詳細な説明はBaiduで見ることができ、より理解が深まります。
参考情報によると、APP がバックグラウンドで開いている場合でも、JS は一定期間 (約 600 ~ 1000 ミリ秒) 実行されるため、少なくともタイミング スケジュールを 1 秒より長く設定する必要があり、これがより確実です。

window.setTimeout(function() {},2000);  // 需要设置大一点,才有效果,否则会始终执行
ログイン後にコピー

次に、APP をパッケージ化して携帯電話にインストールしてテストすることもできます。また、APP を削除して 2 つの結果を比較することもできます。

iOSは必要に応じて追加されます

以上がモバイルブラウザからAPPを開く、またはダウンロードページにジャンプする実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート