Adresse originale: http: //www.hcoder.net/tutorials/info_79.html
Pourquoi MUI naissance
1. écart entre la performance et l' expérience, a été la principale cause des développeurs d'applications mobiles à renoncer à HTML5.
2. La feuille de coupe innée du navigateur en noir et blanc, ne pouvait pas supporter de regarder directement à l'animation de tourner la page, secouez éléments flottants, pas lisse tirer vers le bas pour rafraîchir, glisser le tiroir Caton et d'autres questions, qui sont si HTML5 développeurs se sentent frustrés, en particulier pour obtenir machines bas de gamme Android courir, lancer des téléphones mobiles ont un cœur;
D'autre part, le style de contrôle par défaut du navigateur est insuffisante et laid, ce qui rend un contrôle agréable est très difficile, il y a quelques simples cadre de prise ui, mais de mauvaises performances. cadre Mui résoudre efficacement ces problèmes, il est facile de développer un cadre pour la haute performance App, est actuellement le plus proche du cadre initial effet App.
Position MUI est: cadre de l'interface utilisateur est le plus proche de l'expérience native de mobile App
Mui géolocalisé, Mui produit plusieurs caractéristiques, léger, petit, ne concerne que l'interface utilisateur, déplacer uniquement App né, le style d'interface biologique d'origine.
Donc, s'il vous plaît noter, Mui faire quelque chose:
1, Mui pas JQ, non dom opération encapsulé
Ui rien à voir avec mui ne faites pas que vous aimeriez JQ ou zepto eux-mêmes et ne sont pas en conflit.
Mais nous ne recommandons pas l'introduction de JQ ou Zepto ces cadres dans l'application mobile, les raisons suivantes:
Pour les performances, les couches du cadre de l'emballage, en particulier lors du déplacement dom cycle, affectent l'efficacité, en particulier sur les téléphones Android bas de gamme, nous facturons alors seulement les performances Si Jin en millisecondes, un peu améliorée, de s'engager dans ce cadre venir, nous allons dom beaucoup d'efforts et gaspillé.
Natif JS assez simple, pourquoi le besoin JQ?
succès JQ était pas compatible car ie6,7,8,9,10, chrome, ff ces navigateurs, ce qui permet aux développeurs d'effondrement, et la bonne performance du navigateur sur le PC, la compatibilité multi-plateforme n'affecte pas les performances. Mais JQ tout simplement pas conçu pour les téléphones mobiles.
Le téléphone seul navigateur WebKit (ne pas tenir wp, de toute façon Mui ne supporte pas wp), ne pas besoin de ce cadre JQ paquet pour faire fonctionner dom.
Et HBuilder fournit un bloc de code pour simplifier le développement, frapper la DG, DQ, générer directement document.getElementById ( « »), document.querySelectorAll ( « »), est très rapide et facile, et la mise en œuvre de la performance est très élevé, et il n'y a pas de problèmes de compatibilité du navigateur.
Constaté que de nombreux développeurs JQ, de toute façon, je veux continuer à utiliser JQ pas de problème dans l'App. Mais vous suggérons aussi que vous apprenez js lui-même.
2, mui, HTML5 +, 5 + Runtime relation décrite
Mui est un cadre frontal, HTML5 + spécification est un ensemble d'extensions HTML5 fonctionnalités, HTML5 + Runtime est d'obtenir HTML5 + spécification améliorée du moteur du navigateur.
Un peu semblable à la relation entre bootstrap, w3c et os de chrome.
HTML5 + spécification fait partie de http://www.html5plus.org, la spécification HTML5 ne définit pas mais les développeurs ont besoin de faire application étendue spécifications.
DCloud de 5+ Runtime la mise en œuvre complète de la spécification HTML5 +. Pendant ce temps 5+ Runtime met également en œuvre Native.js, une sorte de centaines de milliers d'appels d'API natives par un js technique.
Pour améliorer l'expérience, Mui est lié à appeler environ 5 + Rutime d'autonomisation, principalement plus.webview et plus.nativeUI.
Mui mais ne remplace pas HTML5Plus, après également pas l'intention de remplacer tous les api 5+ WebView sont enveloppés dans une couche.
A commencé à l' expérience MUI
1, installez la nouvelle version HBUilder
Télécharger: http://www.dcloud.io/
2, les nouveaux projets d'applications
3, le dispositif de débogage et en cours d'exécution
Soit iOS ou Android, ou si elle est un véritable simulateur de machine, peuvent être connectés au fonctionnement de la machine réelle HBuilder.
Dans le passé pour développer des applications, un besoin de changer l'interface, puis emballer et l'installer sur votre téléphone et accéder à l'interface, changer l'apparence d'encore. Dans le cas contraire, le cycle de cette action, très inefficace.
Une fois que vous avez une vraie machine en cours d'exécution, modifiez le code est stocké, le téléphone immédiatement voir l'effet, si une erreur se produit lors de l'exécution sur le téléphone, puis connectez-vous et les messages d'erreur peuvent également être réinjecté dans la console HBuilder.
Certains développeurs aiment alerte Dafa, mais en fait frapper saboterie dans HBuilder des années js, en jouant avec le journal pour mieux ajuster le programme.
4, la description de la structure de fichier
| _ css dossier feuilles de style
| _ polices de caractères dossier
| _ js dossier script JavaScript
| _ entrée de fichier index.html
disposition de base
Une tête
de base mui-bar css mui-bar- nav
< Tête class = "mui-bar mui-bar-nav" > < a class = "mui-action-retour mui-icon mui-icon-gauche nav mui-pull-gauche" > </ a > < h1 class = "mui-title" > bonjour </ h1 > </ tête >
En second lieu , la partie de corps de
la css de noyau mui-contenu
< Div class = "MUI-Content" > partie du corps .... </ div >
code complet montre
<! DOCTYPE html > < html > < tête > < meta charset = "utf-8" > < meta nom = "fenêtre" content = "width = dispositif de largeur, initiale échelle = 1, au moins à l' échelle = 1, dimension maximale = 1, évolutif user = non » /> < title > </ title > < scénario src = "/ js mui.min.js" > </ scripts > < link href = "css / mui.min.css" rel = "stylesheet" /> = "text / javascript" charset = "utf-8" > mui.init (); </ Scénario > </ tête > < body > < div > < tête class = "mui-bar mui-bar-nav" > < a class = "mui-action-retour mui-icon mui-icon-gauche nav mui -Pull gauche » > </ a > < h1 class = "mui-title" > bonjour </ h1 > </ tête > < partie SOMMAIRE .... </ div > </ body > </ HTML >
