H5-Instanzmethode zum Starten der nativen APP-Seite-H5-Tutorial-php.cn

Ich habe schon lange keinen Blog mehr geschrieben, da es eine Nachfrage nach der Einführung der APP-nativen Seite gab. Ich habe dabei einige Fallstricke gelesen und diese speziell zusammengefasst 🎜>

1. Beurteilung der Client-Plattform und ob im WeChat-Browser darauf zugegriffen werden soll

1. Beurteilung des Clients

Beim Starten der APP verarbeiten die Android- und IOS-Systeme diese Da Android geöffnet ist, können Sie im Browser über das -Tag die Berechtigung zum Öffnen der App auf dem Telefon einholen und dann die APP starten.

Auf der IOS-Seite können Systeme nach IOS9 während des APP-Entwicklungsprozesses Konfigurations- und Logikcode hinzufügen. Das System öffnet die APP, die diesem Domänennamen entspricht, bevor der Browser auf einen Domänennamen zugreift. Das ist ein bisschen protzig, aber es hat immer noch Vorteile, geschlossen zu sein.

Also müssen wir zuerst beurteilen, ob es sich um ein Android-System oder ein IOS-System handelt. Der Beurteilungscode lautet wie folgt:

function isInIos(){var userAgentInfo = navigator.userAgent ,
        Agents = ["iPhone" , "iPad", "iPod"];for(var v = 0; v < Agents.length; v++) {if (userAgentInfo.indexOf(Agents[v]) > 0) {          return true;
        }
    }return false;
}

Nach dem Login kopieren

Ob Es befindet sich im integrierten WeChat-Browser

Egal auf welcher Plattform der Client Android/IOS ist, es gibt ein Problem beim Zugriff auf die WeChat-Plattform, das heißt, der Client kann nicht gestartet werden Einschränkung von WeChat aus Sicherheitsgründen. Sofern das Unternehmen kein Partner von WeChat ist und sich der Whitelist angeschlossen hat, kann es auf die Download-Seite der App zugreifen Store, der der App entspricht, aber WeChat blockiert häufig die URL des App Stores und macht ihn so unzugänglich. Der bequemere Weg besteht darin, die Download-Seite des App Store im WeChat-Browser zu öffnen, unabhängig davon, ob es sich um IOS oder Android handelt (IOS wechselt schließlich zur Seite

Appstore). Meine Anforderung hier ist, den Benutzer aufzufordern, auf „…“ zu klicken, um es mit dem Standardbrowser zu öffnen.

Um festzustellen, ob es sich um WeChat handelt, lautet der Code wie folgt:

function isInWx(){var agent = window.navigator.userAgent.toLowerCase();return agent.match(/MicroMessenger/i) == 'micromessenger';
}

Nach dem Login kopieren

2. Prinzip

Ob es sich um ein Android- oder iOS-Gerät handelt, ist es unmöglich, über JS im Browser festzustellen, ob das Mobiltelefon mit einer APP ausgestattet ist, selbst wenn der Browser die Berechtigung hat, die Anwendungsliste des Mobiltelefons zu lesen , es gibt keine feste externe API für uns, um eine Anfrage zu stellen. Die H5-Start-APP öffnet die APP im Wesentlichen über das URL-Schema

. Eine APP kann ein oder mehrere URL-Schemas festlegen, um ihr eigenes URL-Schema zu öffnen mit dieser APP installiert wird, wird die Erlaubnis zum Öffnen der APP angefordert. Tatsächlich kann es als Browser-App betrachtet werden

Das Öffnen einer anderen App kann mithilfe der canOpenUrl-Methode von UIApplication erkennen, ob das URL-Schema die entsprechende APP öffnen kann, und Android ist ähnlich. Wenn das JS-Jump-URL-Schema nicht reagiert, bedeutet dies natürlich auch, dass das Telefon die App nicht

installiert.

3. Android-Plattform

Zuerst AndroidManifest.xml bearbeiten, hauptsächlich um den zweiten hinzuzufügen

Beispiel: Wushang hier ist Schema Dies sollte die eindeutige Kennung der App sein. Andernfalls wird beim Aufwachen von H5 ein Auswahlfeld angezeigt, in dem Sie auswählen können, welche App gestartet werden soll. Und Host bedeutet, die Seite zu starten. Tatsächlich sollte dies durch einen Paketnamen wie com.android.sky ersetzt werden.

<activity android:name=".activity.LoadingActivity"  android:label="${APP_NAME}"  android:screenOrientation="portrait"  android:theme="@style/FirstActivityTheme">  <intent-filter>  <action android:name="android.intent.action.MAIN" />　　　　　　<category android:name="android.intent.category.LAUNCHER" />  </intent-filter>  <intent-filter>  <action android:name="android.intent.action.VIEW" />　　　　　　<category android:name="android.intent.category.DEFAULT" />　　　　　　<category android:name="android.intent.category.BROWSABLE" />　　　　　　<data android:host="android"android:scheme="wushang" />  </intent-filter></activity>

Nach dem Login kopieren

In diesem Fall lautet die vollständige URL wushang://android?data=sky, gefolgt von der Parameterübergabe. In der Aktivität können Sie den folgenden Code verwenden, um die Parameter

abzurufen. Dann können Sie eine Zeichenfolge abfangen oder was auch immer.

public void onCreate(Bundle savedInstanceState) {             
     Uri uridata = this.getIntent().getData();             
     String mydata = uridata.getQueryParameter("data");            
}

Nach dem Login kopieren

Sprechen wir über den Front-End-Code

1. Wenn die Seite aktualisiert wird, fordern Sie die Erlaubnis zum Aufrufen der APP an

Das ist relativ einfach: Fügen Sie einfach das Meta-Tag

in den Kopf oben auf der Seite ein. Wenn die Seite aktualisiert wird, greift dieses Tag auf den Link zu Starten Sie die APP. Es gibt jedoch ein Problem. Wenn es sich um den Safari-Browser des Apple-Systems handelt, wird beim Zugriff auf den Header mit diesem Meta eine Fehlermeldung ausgegeben. Daher kann dieser Header beim Rendern über den

<meta http-equiv="refresh" content="0;url=wushang://android?data=sky">

Nach dem Login kopieren

-Header übergeben werden Die Seite im Backend wird hinzugefügt.

2. Rufen Sie die APP über ein Klickereignis auf

Am einfachsten ist es natürlich, den a-Tag direkt zu verwenden, wie folgt

Aber im tatsächlichen Gebrauch muss zu diesem Zeitpunkt der Plattformtyp des Clients beurteilt werden und ob er im integrierten Browser von WeChat vorhanden ist, sodass dieser Ansatz definitiv nicht möglich ist.

<a href="wushang://android">open Android app</a>

Nach dem Login kopieren

Als nächstes sprechen wir über ein Problem, das während des Entwicklungsprozesses aufgetreten ist, und zeichnen es auf. Da die hier auf dem mobilen Endgerät verwendete Werkzeugbibliothek Zepto ist und das verwendete Klickereignis Tap ist, müssen Sie bei Verwendung von Tap zur Verarbeitung häufig mehrmals klicken, um die APP zu aktivieren

Ich kenne den genauen Grund nicht. Es kann sein, dass das Tippereignis eine leichte Berührung erfordert. Nach einiger Erkundung habe ich dann das Click-Ereignis verwendet oder die Handler-Funktion direkt im a-Tag markiert, um dieses Problem zu vermeiden.

<script type="text/javascript">
  $('#go').tap(function(){
      window.location.href = "wushang://android";
  });</script>

Nach dem Login kopieren

Also habe ich beschlossen, dies zu verwenden, wenn ich darauf stoße Art von Problem in der Zukunft. Das Folgende ist die eigentliche Verarbeitungsfunktion

<a id="go" >open Android app</a><a href="javascript:startApp()">
   open</a><script src="../res/lib/zepto.min.js?1.1.11"></script><script src="../res/lib/public.js?1.1.11"></script><script>$('#go').click(function () {       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    });function startApp(){       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    }</script>

Nach dem Login kopieren

Tatsächlich gibt es eine ganz einfache Möglichkeit, nämlich direkt zur App zu springen. Ob auf Android oder IOS, sowie WeChat und Nicht-WeChat. Die Download-Seite des App Store hat zwei Funktionen: Herunterladen und Öffnen (wenn sie sich auf der IOS-Plattform befindet, erfolgt dies durch Herstellen einer Verbindung zum App Store)

4. IOS-Plattform

Für das Problem, dass iOS9 und höher nicht geöffnet werden, bietet iOS9 tatsächlich eine bessere Lösung – universeller Link.

Dies ist eine von iOS9 eingeführte Funktion. Wenn Ihre App Universal Links unterstützt, können Sie die APP einfach über einen herkömmlichen HTTP-Link starten (wenn Ihre App bereits auf dem iOS-Gerät installiert ist). weitere Urteile usw.) oder öffnen Sie eine Webseite (Ihre App ist nicht auf dem iOS-Gerät installiert). Vielleicht lässt es sich einfacher erklären: Für die Notwendigkeit, die APP über verschiedene Browser, Safari, UIWebView oder WKWebView, aufzuwecken, konnten wir normalerweise nur Schema verwenden.

Das Obige stammt aus der Einführung zu universellen Links im Internet. Vereinfacht gesagt greifen Sie auf eine http-URL zu, wenn diese URL den Regeln in der Konfigurationsdatei entspricht, die Sie an die Entwicklung übermittelt haben Plattform wird das iOS-System versuchen, Ihre App zu öffnen. Wenn sie nicht geöffnet werden kann, leitet das System Sie zu dem Link weiter, den Sie im Browser besuchen möchten. Dies ist ein sehr gutes Attribut, da wir mit diesem Attribut das Abfangen von WeChat umgehen und die App auf ios9 öffnen können.

Das obige Klickereignis dient also lediglich dem Zugriff auf den App Store, denn wenn die App installiert ist, befindet sie sich bereits in der APP, wenn der Browser darauf zugreift.

Das sind alles IOS-Konfigurationsdinge, daher werde ich nicht mehr schreiben. Was die Parameterübergabe und Seitenausrichtung betrifft, entspricht dies tatsächlich dem Abrufen der aktuell verbundenen URL in UIWebView und dem anschließenden Durchführen einer Zeichenfolgenaufteilung und -überprüfung, um zu bestimmen, zu welcher Seite gewechselt werden soll, und Parameterwerte abzurufen.

Das obige ist der detaillierte Inhalt vonH5-Instanzmethode zum Starten der nativen APP-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!