Méthode d'instance H5 pour démarrer la page native de l'APP-Tutoriel H5-php.cn

Je n'ai pas écrit de blog depuis longtemps. Récemment, il y a eu une demande pour que H5 démarre la page native de l'APP. J'ai rencontré quelques pièges dans le processus. J'ai lu certains plans de mise en œuvre en ligne et je les ai spécialement résumés. 🎜>

1. Nécessité de juger la plate-forme client et d'y accéder dans le navigateur WeChat

1. Jugement du client

Lors du démarrage de l'application, les systèmes Android et IOS la traitent. différemment. Puisque Android est ouvert, vous pouvez Dans le navigateur, via la balise et la balise méta, l'application du navigateur obtient l'autorisation d'ouvrir l'application sur le téléphone, puis démarre l'application.

Du côté d'IOS, les systèmes après IOS9 peuvent ajouter une configuration et l'écriture de code logique pendant le processus de développement de l'APP. Le système ouvrira l'APP correspondant à ce nom de domaine avant que le navigateur ne soit sur le point d'accéder à un nom de domaine. c'est un peu tape-à-l'œil, il y a quand même des avantages à être fermé.

Nous devons donc d'abord juger sur le client s'il s'agit d'un système Android ou d'un système IOS. Le code de jugement est le suivant

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;
}

Copier après la connexion

2. c'est dans le navigateur intégré WeChat

Peu importe la plateforme sur laquelle le client est Android/IOS, il y a un problème lors de son accès sur la plateforme WeChat, c'est-à-dire que le client ne peut pas être démarré. limitation de WeChat pour des raisons de sécurité. Android bloque le protocole de schéma, sauf si l'entreprise est partenaire de WeChat et a rejoint la liste blanche, il peut

être utilisé. store correspondant à l’application, mais WeChat bloque souvent l’URL de l’App Store, la rendant inaccessible. Le moyen le plus pratique consiste à ouvrir la page de téléchargement de l'App Store dans le navigateur WeChat, qu'il s'agisse d'IOS ou d'Android (IOS finira par accéder à la page

appstore). Mon exigence ici est d'inviter l'utilisateur à cliquer sur "..." pour l'ouvrir avec le navigateur par défaut.

Pour déterminer s'il est dans WeChat, le code est le suivant :

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

Copier après la connexion

2. Principe

Tout d'abord, qu'il s'agisse d'Andorid ou d'IOS, il est impossible de déterminer si le téléphone mobile est équipé d'une application via JS dans le navigateur, même si le navigateur est autorisé à lire la liste des applications du téléphone mobile. , il n'existe pas d'API externe fixe permettant de faire une demande. L'application de démarrage H5 ouvre essentiellement l'application via le schéma d'URL

. Une application peut définir un ou plusieurs schémas d'URL pour ouvrir le sien. Le navigateur accédera au schéma d'URL d'une certaine application, puis si le système. est installé avec cette application, il demandera l'autorisation d'ouvrir l'application. En fait, cela peut être considéré comme une application de navigateur

ouvrant une autre application. iOS peut utiliser la méthode canOpenUrl de UIApplication pour détecter si le schéma d'URL peut ouvrir l'application correspondante, et Android est similaire. Bien sûr, si le schéma d'URL de saut JS ne répond pas, cela signifie également que le téléphone n'installe pas

l'application.

3. Plateforme Android

Modifiez d'abord AndroidManifest.xml, principalement pour ajouter le deuxième

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

Copier après la connexion

Par exemple, wushang ici est un schéma. Cela devrait être l'identifiant unique de l'application. Sinon, lorsque H5 se réveillera, une boîte de sélection apparaîtra pour choisir quelle application démarrer. Hôte signifie démarrer la page. En fait, cela devrait être remplacé par un nom de package tel que com.android.sky.

Dans ce cas, l'URL complète est wushang://android?data=sky, suivie du transfert de paramètres. Dans l'activité, vous pouvez utiliser le code suivant pour obtenir les paramètres

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

Copier après la connexion

Ensuite, vous pouvez faire une interception de chaîne ou autre.

Parlons du code front-end. Il y a deux situations ici

1 Lorsque la page est actualisée, demandez l'autorisation d'appeler l'application

C'est relativement simple, ajoutez simplement la balise méta

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

Copier après la connexion

en tête en haut de la page. Lorsque la page sera actualisée, cette balise accédera au lien et. démarrez l’application. Mais il y a un problème. S'il s'agit du navigateur Safari du système Apple, un message d'erreur sera donné lors de l'accès à l'en-tête avec cette méta. Par conséquent, cet en-tête peut être transmis via l'en-tête

du client lors du rendu. la page sur le backend. Les classes sont ajoutées.

2. Appelez l'APP via un événement de clic

Le moyen le plus simple est bien sûr d'utiliser la balise a directement, comme suit

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

Copier après la connexion

Mais en utilisation réelle À l'heure actuelle, il est nécessaire de juger du type de plate-forme du client et de savoir s'il se trouve dans le navigateur intégré de WeChat, cette approche n'est donc certainement pas possible.

Ensuite, parlons d'un problème rencontré au cours du processus de développement et enregistrons-le. Parce que la bibliothèque d'outils utilisée sur le terminal mobile ici est zepto et que l'événement de clic utilisé est tap. Cependant, lorsque vous utilisez tap pour le traitement, vous devez souvent cliquer plusieurs fois pour activer l'application

<.>

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

Copier après la connexion

Je ne connais pas la raison précise. Il se peut que l'événement Tap utilise une touche légère. Puis après quelques explorations, j'ai utilisé l'événement click, ou j'ai directement marqué la fonction handler sur la balise a pour éviter ce problème

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

Copier après la connexion

J'ai donc décidé de l'utiliser si je rencontre cela genre de problème à l'avenir. Ce qui suit est la fonction de traitement réelle

En fait, il existe un moyen très simple, qui consiste à accéder directement à l'application. Que ce soit sur Android ou IOS, ainsi que sur WeChat et non-WeChat. La page de téléchargement de l'App Store a deux fonctions : téléchargement et ouverture (si elle est sur la plateforme IOS, c'est en se connectant à l'App Store)

4. Plateforme IOS

Pour le problème de non-ouverture dans iOS9 et versions ultérieures, iOS9 fournit en fait une meilleure solution : lien universel.

Il s'agit d'une fonctionnalité lancée par iOS9. Si votre application prend en charge les liens universels, vous pouvez facilement lancer l'application via un lien HTTP traditionnel (si votre application est déjà installée sur l'appareil iOS) (pas besoin de créer une application). tout jugement supplémentaire, etc.), ou ouvrez une page web (votre application n'est pas installée sur l'appareil iOS). Peut-être que cela peut être expliqué plus simplement. Avant iOS9, pour la nécessité de réveiller l'APP à partir de divers navigateurs, Safari, UIWebView ou WKWebView, nous ne pouvions généralement utiliser que le schéma.

Ce qui précède vient de l'introduction sur les liens universels sur Internet. Pour le front-end, en termes simples, vous accédez à une URL http si cette URL contient du contenu correspondant aux règles du fichier de configuration que vous avez soumis au développement. plate-forme, le système iOS essaiera d'ouvrir votre application. Si elle ne peut pas être ouverte, le système vous redirigera vers le lien que vous souhaitez visiter dans le navigateur. C'est un très bon attribut, car grâce à cet attribut, nous pouvons contourner l'interception de WeChat et ouvrir l'application sur iOS9.

Donc, l'événement de clic ci-dessus sert simplement à accéder à l'App Store, car si l'application est installée, elle sera déjà dans l'APP lorsque le navigateur y accédera.

Ce sont toutes des choses de configuration IOS, donc je n'écrirai pas plus. En ce qui concerne le passage des paramètres et l'orientation de la page, cela équivaut en fait à obtenir l'URL actuellement connectée dans UIWebView, puis à effectuer un fractionnement et une vérification des chaînes pour déterminer à quelle page accéder et obtenir les valeurs des paramètres.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!