Zusammenfassung der Implementierungsmethoden und Punkte der H5-Wakeup-APP

Vorwort

Als Frontend-Entwickler haben Sie häufig eine solche Anforderung. Wenn ein Benutzer Ihre eigene APP installiert hat, öffnen Sie die APP-Homepage oder eine angegebene Seite. Wenn die APP nicht installiert ist, springen Sie zur entsprechenden Download-Seite. Eine solche Nachfrage ist auch ein unverzichtbarer Bestandteil der Gewinnung neuer Benutzer und der Spaltung, daher müssen wir dieses Problem lösen. Sehen wir uns heute an, wie das erreicht werden kann.

Zur APP-Methode springen

Derzeit gibt es zwei bessere Möglichkeiten, diese Funktion zu implementieren: URL-Schema, Meta-Tags und universelle Links.

URL-Schema

URL Scheme ist eine externe Schnittstelle, die es Apps ermöglicht, zueinander zu springen. Durch die Definition eines eindeutigen URL-Pfades für die APP können Sie die angegebene APP schnell von außen öffnen. Das URL-Schema jeder App ist unterschiedlich. Wenn dasselbe URL-Schema vorhanden ist, reagiert das System auf das URL-Schema der zuerst installierten App, da das URL-Schema der später installierten App überschrieben wird und nicht aufgerufen werden kann. Das Format des URL-Schemas ist:

[Schema]://[Host]/[Pfad]?[Abfrage]

Einführung in mehrere häufig verwendete URL-Schema-Plattformen:

• QQ: mqq://
• WeChat: weixin://
• Tencent Weibo: TencentWeibo://
• Taobao: taobao://
• Alipay: alipay://
• Weibo: sinaweibo://

Unterstützt sowohl Android- als auch iOS-Plattformen

Meta-Tags

Legen Sie das Meta-Tag auf der Webseite fest. Wenn Sie diese mit Safari öffnen, wird die Navigationsleiste Ihrer App oben angezeigt. Wenn die App nicht installiert ist, klicken Sie darauf, um zum App Store zu springen und sie herunterzuladen. Wenn die App installiert ist, können Sie die App direkt über das Meta-Tag oben aktivieren.

Nur iOS

Universelle Links

Universal Links ist ein universeller Link. Benutzer von iOS9 und höher können durch Klicken auf diesen Link nahtlos zu einer App weiterleiten, ohne sie über Safari öffnen zu müssen. Wenn der Benutzer diese App nicht installiert hat, wird die Webseite, auf die dieser Link verweist, in Safari geöffnet.

Exklusiv für iOS und nur in iOS 9.0 verfügbar

Verschiedene Einsatzmöglichkeiten

Sowohl das URL-Schema als auch die universellen Links müssen konfiguriert werden und können erst nach der Konfiguration wirksam werden.

Verwendung des URL-Schemas

Das URL-Schema ist nicht schwer zu verwenden. Die einfachste Möglichkeit besteht darin, einen A-Tag-Link hinzuzufügen:

<a href="weixin://" rel="external nofollow" >WeChat öffnen</a>

Diese Zugriffsmethode ist relativ einfach und kann sowohl auf Android als auch auf iOS verwendet werden, funktioniert jedoch nicht auf WeChat. WeChat verfügt über eine Whitelist, die die Verwendung des URL-Schemas vollständig blockiert. Sofern es nicht zur Whitelist hinzugefügt wird, kann es direkt wie JD.com geöffnet werden, andernfalls ist es unmöglich.

Verwendung von Meta-Tags

Auch die Meta-Tag-Methode ist sehr einfach. Sie müssen lediglich den Meta-Tag zur Webseite hinzufügen:

 <meta charset="UTF-8" name="apple-itunes-app" content="app-id=7777777, affiliate-data=myAffiliateData, app-argument=yourScheme://">

Der Effekt besteht darin, dass oben auf der Webseite eine Sticky Bar angezeigt wird.

Verwendung universeller Links

Diese Konfigurationsmethode ist etwas mühsam. Ich war nicht an der iOS-Entwicklung beteiligt, daher gebe ich Ihnen eine Einführung auf der offiziellen Website.

Zusammenfassen

Keine der oben genannten Methoden kann eine perfekte Lösung bieten. Entweder wird es nur von Apple unterstützt, oder es gibt viele Einschränkungen für Head-Apps, sodass Sie selbst viel Arbeit in die Anpassung investieren müssen.

Zunächst müssen wir bestätigen, welche Methode wir verwenden. Basierend auf der obigen Einführung sollte nur die erste URL-Schema-Methode die beste Wahl sein. Schließlich wird sie von beiden Plattformen unterstützt. Der nächste Schritt besteht darin, zu lösen, wie es in der Haupt-App geöffnet werden kann. Tatsächlich fordert dieses Problem Benutzer normalerweise dazu auf, es in einem externen Browser zu öffnen, sodass das Problem im Grunde gelöst ist. Lassen Sie uns Code verwenden, um es Schritt für Schritt umzusetzen.

Realisieren Sie die Wake-up-APP-Funktion

Browser zum Öffnen auffordern

Zunächst müssen Sie eine kleine Eingabeaufforderung implementieren, die im Browser wie folgt geöffnet wird:

Realisieren Sie die Funktion zur Beurteilung der Top-APP

Hier verwenden wir den User-Agent des Browsers, um festzustellen, ob es sich um WeChat oder andere APP-Browser handelt. Der Code lautet wie folgt:

/**
 * Bestimmen Sie, ob der Browser eine Head-App ist
 */
Funktion istBlackApp() {
  var u = navigator.userAgent.toLowerCase();
  return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf('mqqbrowser') > -1;
}

Die obige Funktion bestimmt mehrere Browser: WeChat, Weibo, QQ und QQ Browser. Wenn Sie auf die Schaltfläche „Öffnen“ oder „Herunterladen“ klicken, wird festgestellt, ob es sich um eine Head-App handelt. Wenn dies der Fall ist, werden Sie aufgefordert, sie im Browser zu öffnen. Andernfalls können Sie direkt Ihre eigene App öffnen. Der Code lautet wie folgt:

Funktion openTuer() {
  wenn (istBlackApp()) {
    // Header APP ermöglicht der Webseite, Tipps anzuzeigen und öffnet sich im Browser showTips();
  } anders {
    // Wenn es keine Head-APP ist, öffnen Sie sie direkt. Sie müssen hier keine Parameter verwenden. Sie können sie später nach dem Schreiben hinzufügen. openApp(0, 0);
  }
}

Die Kernmethode zum Aufwecken der APP

Die Funktion openApp wurde oben ebenfalls erwähnt. Wie sieht sie also konkret aus? Hier erfahren Sie, wie diese Funktion implementiert wird. Hier werden gemäß den aktuellen Projektanforderungen zwei Parameter zum Öffnen der APP benötigt, einer zum Öffnen einer bestimmten Seite der APP und der andere ist der zum Öffnen einer bestimmten Seite erforderliche Parameter arg. Unsere OpenApp-Funktion erfordert also zwei Parameter.

Implementierung von openApp

Die Funktion „openApp“ ist sehr einfach und ruft zwei Funktionen wie folgt auf:

Funktion openApp(welche, arg) {
    jumpApp("testApp://which=" + welche + "&arg=" + arg);
    keineApp();
}

Die erste Funktion ist für das Öffnen der APP zuständig, die zweite für den Adresssprung, wenn die APP nicht geöffnet bzw. installiert ist.

Implementierung von jumpApp

Beachten Sie, dass diese Funktion vor iOS8 mit iframe implementiert werden kann, nach iOS8 jedoch nicht, da sie von Apple blockiert wird. Daher kann sie nur durch Seitensprung implementiert werden. Der spezifische Code lautet wie folgt:

Funktion jumpApp(t) {
  versuchen {
    var e = navigator.userAgent.toLowerCase(),
      n = e.match(/cpu iphone os (.*?) wie mac os/);
    wenn (((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)) {
      Fenster.Standort.href = t;
    } anders {
      var r = document.createElement("iframe");
      (r.src = t), (r.style.display = "keine"), document.body.appendChild(r);
    }
  } fangen (e) {
    Fenster.Standort.href = t;
  }
}

Implementierung von noApp

Auch die Implementierung von noApp ist sehr einfach. Definieren Sie einfach einen Timer. Wenn innerhalb einer bestimmten Zeitspanne keine Antwort erfolgt, springen Sie zur angegebenen Download-Seite. Der spezifische Code lautet wie folgt:

var Timer = null;
Funktion keineApp() {
  var t = Date.now(),
    r = "http://www.tuerapp.com";
  Timer = setzeTimeout(Funktion() {
    return Date.now() - t > 2200
      ? (Zeitüberschreitung(Timer), !1)
      : !document.webkitHidden und !document.hidden und void (location.href = r);
  }, 2000);
}

Bisher wurden die Grundfunktionen realisiert. Im tatsächlichen Prozess können jedoch viele Probleme auftreten.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Implementierungsmethode und Vorsichtsmaßnahmen der H5-Wake-up-App. Weitere relevante Inhalte zur H5-Wake-up-App-Methode finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!