


Partage d'exemples de développement d'applications mobiles HTML5plus
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;
Appel de couche JS
plus.runtime.version
, Webview vers JS Bridge Faites une demande.JS Bridge reçoit la demande et demande à la couche native de lire les informations sur le numéro de version de l'application.
La couche Native exécute et obtient le résultat, et notifie la couche JS Bridge du résultat correspondant.
JS Bridge obtient les résultats correspondants de la couche native et notifie les informations de résultat Webview correspondantes.
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
Faible coût d'apprentissage, tant que vous maîtrisez les capacités de base de développement Web, vous pouvez commencer.
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.
Un ensemble de code peut être compilé en deux packages pour Android et iOS avec seulement un petit traitement de compatibilité.
Je ne m'y attendais pas, je l'ajouterai à la discussion.
Insuffisant
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.
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.
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.
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.
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.
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 :
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

H5 fait référence à HTML5, la dernière version de HTML. H5 est un langage de balisage puissant qui offre aux développeurs plus de choix et d'espace créatif. Son émergence favorise le développement de la technologie Web et rend l'interaction et l'effet des pages Web plus excellents. mûrit progressivement et devient populaire, je pense qu'il jouera un rôle de plus en plus important dans le monde d'Internet.

Cet article vous aidera à distinguer rapidement entre H5, WEB front-end, grand front-end et WEB full stack. J'espère qu'il sera utile aux amis dans le besoin !

Dans H5, vous pouvez utiliser l'attribut position pour contrôler le positionnement des éléments via CSS : 1. Positionnement relatif, la syntaxe est "style="position: relative;"; 2. Positionnement absolu, la syntaxe est "style="position : Absolute;" "; 3. Positionnement fixe, la syntaxe est "style="position:fixed;" et ainsi de suite.

Étapes de mise en œuvre : 1. Surveiller l'événement de défilement de la page ; 2. Déterminer si la page a défilé vers le bas ; 3. Charger la page de données suivante ; 4. Mettre à jour la position de défilement de la page.

La description du rendu est basée sur vue.js et ne repose pas sur d'autres plug-ins ou bibliothèques ; les fonctions de base restent cohérentes avec element-ui, et certains ajustements ont été apportés à l'implémentation interne pour les différences mobiles. La plate-forme de construction actuelle est construite à l'aide de l'échafaudage officiel uni-app. Étant donné que la plupart des terminaux mobiles ont actuellement deux types : les mini-programmes h6 et WeChat, elle est très adaptée à la sélection technologique pour exécuter un ensemble de codes sur plusieurs terminaux. API de base de l'idée de mise en œuvre : utilisez provide et inject, correspondant à et. Dans le composant, une variable (tableau) est utilisée en interne pour stocker toutes les instances, et les données à transférer sont exposées via provide ; le composant utilise inject en interne pour recevoir les données fournies par le composant parent, et combine enfin ses propres attributs avec soumission de méthode

Cet article vous donnera une introduction aux nouvelles balises de promotion H5. J'espère qu'il sera utile aux amis dans le besoin !

H5Referstohtml5, apivotaltechnologyInwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp OrtsMultimeDiaHithoutPlugins, améliorant la réception detièmeaCrOsDevices.3) SemantelelementsImproveContentsTructureAndSeo.4) H5'sRespo

H5 améliore l'accessibilité des pages Web et les effets SEO via des éléments sémantiques et des attributs ARIA. 1. Utiliser, etc. pour organiser la structure du contenu et améliorer le référencement. 2. Les attributs ARIA tels que Aria-Babel améliorent l'accessibilité, et les utilisateurs de technologies d'assistance peuvent utiliser en douceur les pages Web.
