Heim  >  Artikel  >  Web-Frontend  >  So rufen Sie die APP-Funktion auf der H5-Seite auf

So rufen Sie die APP-Funktion auf der H5-Seite auf

php中世界最好的语言
php中世界最好的语言Original
2018-01-19 09:31:423091Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie die APP-Funktion auf der H5-Seite aufrufen. Was sind die Vorsichtsmaßnahmen beim Aufrufen der APP-Funktion auf der H5-Seite? sehen.

Diese Art von Funktion ist häufig auf dem Markt zu sehen und sollte mittlerweile weit verbreitet sein, wie z. B. Taobao H5, Zhihu H5 usw. . .

Wenn Sie darauf klicken, wird die APP gestartet oder die Download-Seite geöffnet oder direkt heruntergeladen.

Aber ich habe festgestellt, dass diese Funktion von Zhihu etwas anders ist

Ihre Logik besteht darin, mich zuerst zu fragen, ob ich die Zhihu-APP auf meinem Telefon öffnen soll (der Browsermechanismus fragt den Benutzer um Erlaubnis ). Dann erscheint erneut die Download-Eingabeaufforderung.

Lösungs-URL-Schema

URL-Schema wird sowohl auf IOS als auch auf Android unterstützt und ist gut kompatibel.

Verwenden Sie zuerst iframe

Der Pseudocode lautet wie folgt:

const iframe = document.createElement('iframe');
iframe.src = 'URL scheme'; // URL scheme的方式跳转
iframe.style.display = 'none';
document.body.appendChild(iframe);

Zu diesem Zeitpunkt wird die APP aktiviert, wenn alle Umgebungen dies unterstützen.

Aber dies ist eine ideale Situation, mehr ist die schnelle Logik der Kompatibilitätsverarbeitung.

Einige Systeme fangen den src von iframe ab (dies ist nur einer der Gründe dafür, dass die APP nicht aktiviert werden kann), da dieses src Attribut ein illegaler Hacker ist und es viele Schwachstellen gibt verursacht durch die Verwendung von.

Zu diesem Zeitpunkt ist es daher notwendig, festzustellen, ob die Anpassung der APP fehlgeschlagen ist.

Der Pseudocode lautet wie folgt:

const timer = 1000;
setTimeout(function() {
        // 执行成功后移除iframe
    document.body.removeChild(iframe);
    //setTimeout小于2000通常认为是唤起APP失败
    if (Date.now() - last < 2000) {
            // 执行失败函数
            // 这里需要考虑一下之前知乎遇到的那个问题(浏览器询问导致时间小于2S)
    } else {
           //  执行成功函数
        }
}, timer);

Verständnis:

Wenn der Anruf erfolgreich ist, wird die H5-Seite in den Hintergrund geschaltet und der Timer läuft verzögert. Auch wenn der Benutzer von der App zur H5-Seite wechselt, muss der Zeitunterschied größer als 2S sein.

Wenn die Erregung fehlschlägt, wird der Timer rechtzeitig ausgeführt (auch wenn eine Verzögerung von 100 ms vorhanden ist, reicht das aus), und sie muss zu diesem Zeitpunkt weniger als 2 Sekunden betragen.

Wenn der Iframe abgefangen wird, können wir aus Kompatibilitätsgründen das window.location.href = URL-Schema verwenden.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So nutzen Sie die neuen Funktionen von HTML 5

HTML-Tabellen-Maus-Drag-Sortierung So implementieren Sie es

html So übergeben Sie Parameter beim Seitenwechsel

Das obige ist der detaillierte Inhalt vonSo rufen Sie die APP-Funktion auf der H5-Seite auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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