Maison > interface Web > Tutoriel H5 > Partage d'exemples de développement d'applications mobiles HTML5plus

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

小云云
Libérer: 2018-02-08 15:23:13
original
3139 Les gens l'ont consulté

Qu'est-ce que HTML5plusDCloud fournit une solution pour développer des applications mobiles utilisant les technologies Web traditionnelles. Cet article partage principalement avec vous des exemples de développement d'applications mobiles HTML5plus, en espérant aider tout le monde.

La version améliorée du moteur de navigateur mobile amène HTML5 au niveau natif !

Les slogans des produits sont toujours exagérés, alors ne faites pas attention à ces détails.

Conseils

  • HTML5plus a un nom long, il est donc également appelé HTML5+, ou 5+ en abrégé.

  • Les applications mobiles développées à l'aide de ce moteur sont également appelées 5+App.

  • Le SDK associé est appelé 5+SDK.

Comment utiliser

Runtime

C'est-à-dire utiliser HBuilder, un autre produit de la société DCloud, pour le développement et le débogage directs.

SDK

Intégrez 5+SDK dans votre propre application native et vous pourrez utiliser son API JS étendue dans votre application.

Différences

  • La méthode d'exécution peut utiliser directement le packaging cloud fourni par DCloud, sans créer d'environnement de packaging local.

  • La méthode d'exécution ne nécessite pas la capacité de maîtriser le développement natif, il suffit d'utiliser l'API étendue de manière raisonnable.

  • La méthode SDK peut répondre à plus de besoins, mais elle nécessite de pouvoir maîtriser le développement natif.

Une brève compréhension de la méthode
Runtime n'exige pas que les développeurs développent eux-mêmes la partie de base de l'application native. 5+ le fait pour les développeurs ici, et n'a qu'à la soumettre. l'application Il suffit de regrouper les ressources dans le cloud.
La méthode SDK est différente. Dans ce cas, 5+SDK est étendu en fonction de la base d'application native d'origine. Par conséquent, les développeurs doivent créer leur propre environnement de développement natif et effectuer certains travaux de développement natif.

Architecture de base

Selon la documentation officielle, les conseils de développement de plug-ins tiers de la plate-forme Android sont grossièrement divisés en une structure à trois couches. Pour une compréhension plus facile, l’explication est divisée en quatre parties.

Webview

peut être compris comme un simple navigateur, HTML, CSS et JavaScript sont tous ici.

plus

Cette partie est dans Webview. Basée sur l'environnement du navigateur d'origine, l'extension peut appeler l'API des fonctions natives. Ces API sont toutes dans l'objet window.plus.

JS Bridge

est chargé de connecter la couche JavaScript et la couche Native.

  • Reçoit la requête de la couche JavaScript et informe la couche native de répondre en conséquence.

  • Reçoit le résultat de la réponse de la couche native et notifie à la couche JavaScript de recevoir le résultat.

Natif

c'est-à-dire Android et iOS, et constitue également l'élément clé de HTML5plus.

Le processus d'exécution d'un appel

Prenons comme exemple l'obtention du numéro de version de l'application

plus.runtime.version;
Copier après la connexion
  1. Appel de couche JSplus.runtime.version, Webview vers JS Bridge Faites une demande.

  2. JS Bridge reçoit la demande et demande à la couche native de lire les informations sur le numéro de version de l'application.

  3. La couche Native exécute et obtient le résultat, et notifie la couche JS Bridge du résultat correspondant.

  4. JS Bridge obtient les résultats correspondants de la couche native et notifie les informations de résultat Webview correspondantes.

  5. La couche JS obtient les informations de version de l'application.

S'en plaindre

Personnellement, je pense que chaque produit et chaque entreprise a son propre concept de design et sa propre stratégie commerciale. Différents utilisateurs auront toujours des besoins et des opinions différents.
Par conséquent, lors de la sélection d'une technologie, vous devez comprendre vos propres besoins et les informations sur le produit étudiées. Dans la communauté DCloud, des articles tels que "Pourquoi n'y a-t-il pas d'API XXX", "Pourquoi ne pas intégrer le SDK XXX", "Impossible de développer nativement, j'espère que le responsable pourra étendre l'API XXX" et ainsi de suite apparaissent souvent. Quant aux raisons spécifiques de ces problèmes, chacun a sa propre compréhension et ne sera pas abordée ici.
Lors de la sélection d'une technologie, il est préférable de l'essayer vous-même. Ne vous attendez pas à ce que le fournisseur du produit vous donne la meilleure réponse, car il ne repoussera pas bêtement les utilisateurs.
------Magnifique ligne de démarcation------
Ci-dessous, je partagerai mon expérience personnelle et mes idées, dans l'espoir d'aider d'autres développeurs à faire référence lors de la sélection de la technologie.

Avantages

  1. Faible coût d'apprentissage, tant que vous maîtrisez les capacités de base de développement Web, vous pouvez commencer.

  2. Emballage cloud, il n'est pas nécessaire de créer localement des environnements de développement Android et iOS pour le traitement de l'empaquetage.

  3. Un ensemble de code peut être compilé en deux packages pour Android et iOS avec seulement un petit traitement de compatibilité.

  4. Je ne m'y attendais pas, je l'ajouterai à la discussion.

Insuffisant

  1. plus.ModuleName.* L'API fournie par plus.ModuleName.* est limitée Bien qu'il existe un produit Native.js, vous devez maîtriser une certaine quantité de connaissances natives.

  2. S'appuie sur la vue Web du téléphone, les performances sur certains téléphones ne sont donc pas idéales. Cela a un certain impact sur certains produits professionnels.

  3. Suite au point 1, la mise en œuvre de certaines fonctions nécessite que les développeurs intègrent des SDK pour l'extension. Par exemple, Bluetooth, persistance en arrière-plan de l'application, etc. Cela nécessite également que les développeurs disposent de capacités de développement natives.

  4. Certaines fonctions ne sont pas entièrement implémentées en raison de problèmes de compatibilité. Par exemple, les icônes de coin des icônes du bureau, etc. Bien entendu, Android est très fragmenté et certaines lacunes sont compréhensibles.

  5. Certaines parties du contenu du document ne sont pas expliquées assez clairement. De plus, la mise en page du document est un peu étrange.

  6. Je n’ai pas rencontré d’autres pièges jusqu’à présent, peut-être que je ne le connais pas encore.

Portée plus adaptée

Basé sur des présentations de cas officielles et une expérience de développement personnel. Pour résumer, le développement d'applications 5+ est plus adapté aux situations ou produits suivants :

  • Les start-up qui ont besoin de lancer des applications rapidement.

  • Informations d'actualité (36Kr), e-commerce (HiMall), partage de contenu (Fengqiaoju Flowers), plats à emporter et la plupart des autres produits commerciaux O2O, etc.

  • Les fonctions cœur de métier ne s'appuient pas sur certaines fonctions natives

  • Certaines applications d'entreprise peuvent également s'appuyer sur des besoins spécifiques.

Situations non recommandées

Certaines situations ne peuvent pas être généralisées, les explications seront donc basées sur des situations spécifiques.

  • Dépend fortement de certaines fonctions natives, telles que la nécessité d'implémenter un dessin de ligne de carte personnalisé dans l'application, la nécessité de modules Bluetooth pour la communication de données, etc.

  • Le cœur de métier concerne la messagerie instantanée (IM), et nous ne souhaitons pas utiliser de SDK de version JS tiers.

  • Besoin de lire et d'écrire des fichiers, comme enregistrer de courtes vidéos, éditer des images, éditer des vidéos, etc.

  • Quelques fonctions plus "voyous", telles que la persistance en arrière-plan de l'application, la persistance du service push, etc.

  • Contrôlez les autorisations des applications, telles que l'interdiction des captures d'écran. Cela ne peut être géré que dans la couche native et vous connaissez la compatibilité Android.

Beaucoup des situations ci-dessus doivent être résolues grâce au développement de la couche native. Bien sûr, plus de 5 SDK peuvent être intégrés en même temps, et les API d'extension pertinentes peuvent toujours. être utilisé.

Produits similaires

  • cordova

  • apicloud

  • appcan

  • ionic

  • weex

  • react native

Actuellement C'est ce que j'ai appris ci-dessous. Certains produits ont été brièvement échantillonnés, et certains produits n'ont pas été testés du tout, je ne ferai donc pas de comparaisons ni de commentaires excessifs ici.

Supplément :

  • HBuilder est un IDE et est également le nom de la base pour le débogage de machines réelles. Ensemble, ces deux éléments constituent l'environnement et les outils permettant de développer plus de 5 applications.

  • HTML5plus a de nombreux noms. Le site officiel de DCloud indique qu'il s'agit de 5+Runtime. Responsable de l'extension de l'API JS et de la possibilité pour JS d'appeler des fonctions natives.

  • MUI est un framework d'interface utilisateur pour le développement mobile. Afin de faciliter le développement, il encapsule plusieurs méthodes impliquant HTML5plus, qui est souvent mal compris. Mais il ne s’agit en réalité que d’un framework d’interface utilisateur, et l’appel de fonctionnalités natives n’a rien à voir avec cela.

Recommandations associées :

Introduction détaillée sur la façon d'utiliser l'application mobile du développeur WeChat pour créer et obtenir un ID d'application (photo)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal