首頁 > 文章 > web前端 > 透過手機瀏覽器開啟APP或跳到下載頁面的實現

透過手機瀏覽器開啟APP或跳到下載頁面的實現

一个新手原創: 2018-05-28 17:47:2918784瀏覽

透過手機瀏覽器開啟APP或跳到下載頁面

以下僅展示最簡單的範例及關鍵程式碼
由於硬體條件有限，僅測試了Android 下的情況

新增schemes

在HBuilder 建立的移動APP 專案下有manifest.json 文件，在裡面加入schemes，schemes 中的值你喜歡設定成什麼就什麼吧。
透過手機瀏覽器開啟APP或跳到下載頁面的實現

網頁設定

這個時候，你需要一個簡單 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 Schema 寫成 “你設定的Schema://你設定的Schema” 即可存取。 IOS 的和這個不同。 URL Schema 的詳解自行百度，你會有更深的理解。
根據參考，即使在後台開啟了 APP，JS 仍會執行一段時間，大概是 600 - 1000 毫秒，所以至少也要設定定時調度大於 1 秒，這樣比較有保證。

window.setTimeout(function() {},2000);  // 需要设置大一点，才有效果，否则会始终执行

接下來就可以打包 APP 安裝到手機上進行測試，也可以刪除 APP，比較兩次的結果。

IOS 的有條件再補上

以上是透過手機瀏覽器開啟APP或跳到下載頁面的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！

Java json JS android ios

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：BootStrap基本樣式介紹下一篇：BootStrap基本樣式介紹

看更多