Partager une application mobile HTML5Plus

Qu'est-ce que l'application mobile HTML5Plus ? L'application mobile HTML5 Plus, appelée 5+App, est une application écrite basée sur HTML, JS et CSS qui s'exécute sur le téléphone mobile. téléphone via l'API JS étendue, obtenant les mêmes fonctions et performances puissantes que l'application native.

Pour faire simple, utilisez la technologie de développement web pour développer des applications mobiles natives.

5+App et Web mobile

Bien que les technologies associées utilisées dans le développement de 5+App et de Web mobile soient généralement les mêmes, la différence entre les deux reste évidente.

• 5+App est C/S et Web est B/S.

• 5+App est un client indépendant et les ressources de l'application ne peuvent généralement être que des fichiers statiques. Les modèles de serveur tels que PHP et JSP n'ont pas d'analyseurs pour les traiter.

• 5+App est regroupé dans un package avec les suffixes apk et ipa, qui est une application mobile native.

• window.plus API étendue, s'appuyant sur 5+ moteurs d'exécution. Les navigateurs ordinaires n'intègrent pas ce moteur et le développement Web n'utilise généralement pas ces API.

Préparation

Outils de développement

HBuilder dispose d'un environnement de développement intégré pour plus de 5 applications, vous devez donc d'abord télécharger cet IDE.

Enregistrez un compte

Après avoir téléchargé et décompressé HBuilder, démarrez l'IDE. Lors de la première utilisation, vous devez créer un compte pour faciliter la gestion ultérieure de l'application et des activités de la communauté.

Équipement

Comme il n'y a pas d'appareils iOS ni de machines Mac OS, cette série de partage utilise comme exemple le développement d'applications Android sous les systèmes Windows.

Un ordinateur et un téléphone portable. Le téléphone mobile est de préférence Android 4.4 et supérieur, et les émulateurs ne sont pas recommandés. Un câble USB est également requis et, bien entendu, HBuilder prend également en charge le débogage WiFi.

La première application 5+

Nouvelle application

• Démarrez HBuilder et connectez-vous.

• Menu-> Fichier-> Nouveau-> Application mobile

• Le modèle n'a pas besoin d'être ajusté pour le moment. , entrez le nom de l'application "HelloWorld" , cliquez pour terminer.

index.html

La page d'entrée de l'application est similaire dans son concept à la page d'entrée du Web. La valeur par défaut est index.html dans le répertoire racine de l'application, cela peut être ajusté.

manifest.json

5+Fichier de configuration de l'application, utilisé pour configurer les informations de l'application. HBuilder effectue un traitement spécial sur ce fichier et fournit une interface d'édition visuelle.

• Informations sur l'application

• Nom de l'application : Il s'agit du nom de votre application affiché sur le bureau du téléphone mobile.

• appid : Ceci est attribué lors de la création de l'application 5+, ne la modifiez pas. Ne pas confondre avec l'AppID d'iOS ou l'appid sur d'autres plateformes tierces.

• Numéro de version : Numéro de version de l'application

• Entrée de page : C'est la page de la page d'accueil, qui peut être modifiée.

• Description de l'application : Décrivez brièvement les informations de l'application

• Configuration des icônes

• est le logo de l'application. Suivez les instructions pour créer une image conforme aux spécifications, puis générez une remplacement en un seul clic.

• Image de démarrage

• L'image de démarrage est l'image d'espace réservé lorsque l'application QQ est un pingouin. c'est cette lune.

• Options de démarrage : utilisez généralement simplement la valeur par défaut, ajustez si nécessaire.

• Paramètres d'image : créez des images png de tailles correspondantes selon vos besoins et sélectionnez la configuration.

• Configuration du SDK

• Si vous utilisez certaines fonctions du SDK tiers, vous devez configurer les informations correspondantes.

• L'activation du SDK nécessite de renseigner les informations et de s'inscrire sur la plateforme ouverte tierce correspondante.

• Configuration des autorisations des modules

• L'activation de certains modules nécessite la configuration des autorisations

• Relation de référence de page

• Je n'y connais pas grand chose, il suffit de lire le manuel.

• Vue Code

• La partie code source de la configuration, toutes les configurations ne fournissent pas une vue d'édition visuelle.

Fonctionnement sur un appareil réel

Connectez votre téléphone à l'ordinateur, HBuilder détectera automatiquement l'appareil connecté à l'ordinateur. Menu -> Exécuter -> Exécuter sur un appareil réel, sélectionnez simplement votre appareil. Une base de débogage HBuilder sera installée pour la première fois. Si la version de l'IDE HBuilder change, le fonctionnement réel de la machine écrasera l'ancienne version de la base HBuilder.

Débogage

• Le style de la page, il est recommandé d'utiliser le mode mobile du navigateur Chrome de l'ordinateur pour le débogage.

• Lorsque le véritable appareil Android est en cours d'exécution, chaque fois que le fichier est modifié et enregistré, la base du téléphone mobile synchronise le code.

• Android peut toujours utiliser Chrome RemoteDebugging pour le débogage, mais cela nécessite un appareil Android 4.4 ou supérieur et nécessite de contourner le mur pour la première fois.

Appelez l'API 5+

Encapsulez simplement le rappel d'événement de l'achèvement du chargement de l'API d'extension

var plusReady = function(callback) {
  if(window.plus) {
    callback();
  } else {
    document.addEventListener('plusready', callback);
  }
};

Ensuite, lisez le type de réseau de la connexion actuelle de l'appareil et sortie sur la page.

plusReady(function() {
  var netType = plus.networkinfo.getCurrentType();
  document.write('当前网络类型为：' + netType);
});

Lors de l'exécution sur une machine réelle, vous pouvez voir le contenu de la page "Le type de réseau actuel est : 3", qui est l'environnement du réseau WiFi.

Package

• Confirmez que les informations contenues dans manifest.json sont correctes

• Si le logo et l'image de démarrage ne sont pas configurés , la valeur par défaut sera utilisée pour les images liées à HBuilder.

• Menu-> Release-> Cloud Packaging-Construire le package d'installation natif

• Vérifiez Android, le certificat Android est relativement aléatoire. C'est la même chose, que vous utilisiez celui prêt à l'emploi fourni par DCloud ou que vous le génériez vous-même.

• Le nom du package doit suivre strictement les spécifications de format des noms de packages Android et ne pas les écrire au hasard. Ajustez-le ici et remplacez-le par com.helo.html5plus.

• S'il y a une erreur dans les informations de configuration, une invite s'affichera et vous devrez la modifier correctement avant de pouvoir continuer.

• Une fois que tout est correct, cliquez sur « Package » et attendez.

• Une fois l'emballage terminé, il sera automatiquement téléchargé dans le répertoire correspondant.

Installation

Installez l'apk téléchargé à partir du package cloud sur votre téléphone et démarrez l'application pour afficher les informations actuelles sur l'état du réseau. Ensuite, notre première application 5+ a été produite avec succès.

Recommandations associées :

Introduction à l'apprentissage du développement mobile HTML5Plus

Partage d'exemples de développement d'applications mobiles HTML5plus

Interface de chat WeChat imitation HTML5 et code de cercle d'amis

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!