Heim > Web-Frontend > H5-Tutorial > Hauptteil

Implementierung des Öffnens der APP über einen mobilen Browser oder des Springens zur Download-Seite

一个新手
Freigeben: 2018-05-28 17:47:29
Original
18804 Leute haben es durchsucht

Öffnen Sie die APP über den mobilen Browser oder springen Sie zur Download-Seite

Im Folgenden werden nur die einfachsten Beispiele und Schlüsselcodes angezeigt
Aufgrund begrenzter Hardwarebedingungen wurde nur die Situation auf Android getestet

Schemata hinzufügen

Unter dem von HBuilder erstellten mobilen APP-Projekt befindet sich eine Datei manifest.json. Fügen Sie darin Schemata hinzu und legen Sie die Werte in Schemata fest zu dem, was Ihnen gefällt.
Implementierung des Öffnens der APP über einen mobilen Browser oder des Springens zur Download-Seite

Webseiteneinstellungen

Zu diesem Zeitpunkt benötigen Sie ein einfaches Websystem, das eine einfache Webseite für den mobilen Browserzugriff bereitstellen kann.
Jeder, der Java gemacht hat, weiß das, deshalb werde ich es Ihnen nicht sagen.

<!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>
Nach dem Login kopieren

Auf das URL-Schema von Android kann zugegriffen werden, indem Sie „Schema, das Sie festlegen://Schema, das Sie festlegen“ eingeben. IOS unterscheidet sich davon. Eine ausführliche Erklärung des URL-Schemas finden Sie auf Baidu. Dort erhalten Sie ein tieferes Verständnis.
Der Referenz zufolge wird JS auch dann noch für einen Zeitraum von etwa 600 bis 1000 Millisekunden ausgeführt, wenn die APP im Hintergrund geöffnet wird. Daher sollte der Zeitplan zumindest auf mehr als 1 Sekunde eingestellt sein ist garantierter.

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

Als nächstes können Sie die APP packen und zum Testen auf Ihrem Telefon installieren. Sie können die APP auch löschen und die Ergebnisse zweimal vergleichen.

IOS wird bei Bedarf hinzugefügt

Das obige ist der detaillierte Inhalt vonImplementierung des Öffnens der APP über einen mobilen Browser oder des Springens zur Download-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage