Introduction à uni-app (1) Introduction, déploiement et structure de répertoires d'uni-app

Préface

Cet article présente principalement la situation de base d'uni-app et guide la création et le fonctionnement rapides du premier projet uni-app. En même temps, la structure du répertoire et les spécifications du code du projet sont expliquées en détail, ce qui convient aux débutants avec uni-app basé sur zéro.

Une introduction à l'application unique

uni-app est un produit important officiellement lancé par DCloud, un framework frontal pour le développement d'applications multiplateformes à l'aide de Vue.js. Le site officiel est http://uniapp.dcloud.io/ .
En écrivant un ensemble de code Vue.js, les développeurs peuvent utiliser uni-app pour le compiler sur plusieurs plates-formes telles que iOS, Android, l'applet WeChat, etc. , afin de s'assurer qu'il fonctionne correctement et offre une excellente expérience, et n'a besoin que de JS pour terminer le développement de l'application. , Pour obtenir l'effet du partage multi-terminal , réduisant considérablement les coûts de développement et d'apprentissage: les
développeurs n'ont pas besoin d'apprendre autant de technologies de développement de plates-formes, de rechercher de nombreux frameworks frontaux, il suffit d'apprendre une application basée sur la vue; les
entreprises peuvent également couvrir avec des coûts inférieurs Plus d'utilisateurs.
uni-app hérite de Vue.js et offre une expérience de développement Vue.js complète. En tant qu'outil de développement efficace, uni-app fournit également le moyen le plus rapide de démarrer pour le WeChat actuel et d'autres petits programmes. Ses spécifications de composants et ses API étendues et ses petits programmes WeChat fondamentalement le même.
Les développeurs ayant une certaine expérience de développement d'applet Vue.js et WeChat peuvent rapidement démarrer avec uni-app et développer des applications compatibles multi-extrémités, qui peuvent être compatibles avec Android, iOS, des applets et d'autres développements multi-extrémités en même temps. En même temps, il fournit une optimisation de compilation conditionnelle, qui peut être élégante Écrivez un code personnalisé pour une certaine plate-forme et appelez des capacités propriétaires sans affecter les autres plates-formes.
Uni-app utilise toujours le moteur 5+ lorsqu'il est intégré à l'application. Toutes les capacités de 5+ peuvent être utilisées dans l'uni-app. Les performances de fonctionnement du côté de l'application sont fondamentalement les mêmes que celles de l'applet WeChat.
Afin de permettre aux développeurs de faire l'expérience des composants, interfaces et modèles uni-app, DCloud a publié le programme de démonstration Hello uni-app, réalisant un ensemble de codes pouvant être publiés simultanément sur les applets iOS, Android et WeChat. Vous pouvez utiliser votre téléphone mobile pour scanner l'application ci-dessous. Téléchargez le package d'installation natif pour iOS et Android à l'aide du code. Vous pouvez également utiliser WeChat pour analyser le code du mini-programme et découvrir la version mini-programme d'uni-app:

2. Démarrez rapidement le premier projet

1. Construisez l'environnement

Avant de démarrer le projet, vous devez télécharger et installer les outils suivants:

• HBuilderX a un
  compilateur uni-app intégré et un modèle de projet, vous pouvez cliquer sur https://www.dcloud.io/hbuilderx.html pour sélectionner et télécharger la dernière version du système correspondant, sans installation, décompressez directement et placez le répertoire décompressé dans le répertoire spécifié Cliquez sur HBuilderX.exe sous le chemin à utiliser.
• Les outils de développement WeChat sont utilisés pour
  compiler et déboguer de petits programmes, cliquez sur https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html et sélectionnez la dernière version à télécharger et installer.

2. Créez et exécutez le projet

Vous pouvez créer un projet 点击工具栏里的文件- 新建->项目et 选择uni-appsaisir le nom du projet. Par exemple hello uniapp, cliquez sur Créer pour créer avec succès une uni-app, ou cliquez sur Créer à partir d'un modèle et sélectionnez hello-uniapp pour découvrir l'exemple officiel.
Le schéma est le suivant:

Après la création, vous pouvez exécuter et déboguer, vous pouvez choisir un navigateur, un téléphone mobile ou un simulateur et un simulateur d'applet et d'autres modes de fonctionnement.
(1) Exécuter
en mode petit programme. Entrez dans le projet hello uniapp, cliquez sur la barre 运行->运行到小程序模拟器->微信开发者工具d' outils pour compiler le projet et découvrez uni-app dans l'outil de développement WeChat. Uni-app compile le projet dans le répertoire de décompression du répertoire racine par défaut .
Le schéma est le suivant:

On peut voir qu'après avoir sélectionné l'outil de développement WeChat pour compiler et exécuter dans HBuilderX, le simulateur d'outil de développement WeChat est automatiquement appelé pour l'affichage et le fonctionnement.

Remarque:
Lors de la première utilisation, vous devez configurer le chemin d'installation des outils de développement WeChat pour qu'il s'exécute correctement. En même temps, vous devez ouvrir le port de service dans les paramètres de sécurité des options de paramètres des outils de développement WeChat, afin que HBuilderX puisse appeler les outils de développement WeChat. comme suit:

Si HBuilderX ne peut pas démarrer l'outil de développement WeChat normalement, le développeur doit le démarrer manuellement, puis copier le chemin du projet uni-app dans l'outil de développement WeChat, développer dans HBuilderX, et vous pouvez voir le temps réel dans l'outil de développement WeChat Effet de simulation.

(2)
Fonctionnement réel de la machine Connectez le téléphone mobile et ouvrez le débogage USB, entrez dans le projet hello uniapp, cliquez sur la barre d'outils 运行 -> 真机运行 -> 选择运行的设备, vous pouvez découvrir l'uni-app dans l'appareil, comme indiqué ci-dessous: l'

interface du téléphone mobile est la suivante:

Remarque: pour
fonctionner sur une machine réelle, vous devez définir l'affichage de l'application. Après vous être connecté à hbuilderX, cliquez sur le cloud pour l'obtenir.

Lors du débogage et de l'exécution, vous pouvez également cliquer directement sur le bouton de raccourci pour sélectionner l'appareil à exécuter, comme suit:

Trois, structure de répertoire uni-app et spécifications de code

1. Structure du répertoire

Comme vous pouvez le voir dans le projet qui vient d'être créé, la structure typique d'un projet uni-app est à peu près la suivante:

C:.
│  App.vue
│  main.js
│  manifest.json
│  pages.json
│  project.config.json
│  uni.scss
│
├─pages
│  └─index
│          index.vue
│
├─static
│      logo.png
│
└─unpackage

Parmi eux:
project.config.json est le fichier de configuration globale du projet, qui configure les paramètres de base tels que l'ID APP
;
main.js est le fichier d'entrée d'initialisation de Vue; App.vue est la configuration de l'application, utilisée pour configurer le style global de l'application et surveiller le cycle de vie de l'application;
manifeste .json est utilisé pour configurer les informations d'empaquetage telles que le nom de l'application, l'appid, le logo, la version, etc., comme suit:

pages.json est utilisé pour configurer les informations de type de page telles que le routage des pages, les barres de navigation et les onglets, et est défini sous la forme d'objets;
le répertoire statique stocke les fichiers de ressources statiques pour répondre aux exigences de taille du projet telles que les petits programmes et optimiser la structure du projet; le
décompression est un projet compilé Le package généré à l'époque.

2. Spécification SFC

Les pages vues et autres fichiers que nous avons développés se trouvent généralement dans le répertoire pages. Parallèlement, pour les petits programmes, une page comprend généralement 4 fichiers, à savoir page.wxss (fichier de style), page.js, page.json (fichier de configuration) et page.wxml (composant DOM), mais il n'y a pas autant de fichiers dans uni-app. Afin de réaliser la compatibilité entre terminaux des applets WeChat et des applications natives, en tenant compte de facteurs tels que la vitesse de compilation et les performances d'exécution, uni-app développe des pages. La spécification stipule que la spécification Vue Single File Component (SFC) : un
.vuefichier est un type de fichier personnalisé qui utilise une syntaxe de type HTML pour décrire un composant Vue. Chaque .vuefichier contient trois types de blocs de langage de niveau supérieur <template>(définissant la couche de modèle), <script>(Couche JS) et <style>(couche de style), il est également autorisé d'ajouter des blocs personnalisés facultatifs, les exemples sont les suivants:

<template>
  <div class="example">{
   
   { msg }}</div>
</template>

<script>
export default {
     
     
  data () {
     
     
    return {
     
     
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
     
     
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>

vue-loader analysera automatiquement le fichier et extraira chaque bloc de langue, si nécessaire, sera traité par un autre chargeur, et finalement assemblé dans un module ES , son exportation par défaut est un objet des options du composant Vue.js. vue-loader prend en charge l'utilisation de langages autres que ceux par défaut, tels que le préprocesseur CSS, le langage de modèle HTML précompilé et l'attribut lang en définissant le bloc de langue.
Par exemple, nous pouvons écrire des styles en utilisant la syntaxe Sass comme suit:

<style>
  /* write Sass! */
</style>

Le bloc de langue de niveau supérieur du composant Vue est le suivant:

• Modèle
  Chaque .vuefichier contient au plus un <template>bloc, le contenu est extrait et transmis à vue-template-compilerune chaîne prétraitée dans une fonction de teinture JavaScript, et finalement injecté dans le <script>composant exporté.
• Script
  Chaque .vuefichier contient au plus un <script>bloc, et ce script sera exécuté en tant que module ES . Son exportation par défaut est un Vue.jsobjet d'option de composant, et il peut également exporter Vue.extend()un objet étendu créé par lui, mais un objet normal est un meilleur choix.
  Toutes les .jsrègles Webpack qui correspondent au fichier (ou à l'extension spécifiée par sa fonction lang) seront appliquées au <script>contenu de ce bloc.
• Le style
  correspond /\.css$/par défaut et un .vuefichier peut contenir plusieurs <style>balises. <style>Les balises peuvent avoir des attributs de portée ou de module pour mieux encapsuler le style dans le composant actuel. Plusieurs <style>balises avec différents modes d'encapsulation peuvent être mélangées dans le même composant. Toutes les .cssrègles Webpack qui correspondent au fichier (ou à l'extension spécifiée par sa fonction lang) seront appliquées au <style>contenu de ce bloc.
• Blocs personnalisés
  Vous pouvez .vueajouter des blocs personnalisés supplémentaires au fichier pour répondre aux besoins spécifiques du projet, tels que des <docs>blocs. vue-loader utilisera le nom de la balise pour trouver le chargeur Webpack correspondant à appliquer au bloc correspondant. Le chargeur webpack doit être spécifié dans les charges d' options de vue-loader .

Si vous devez séparer le fichier .vue en plusieurs fichiers, vous pouvez importer un fichier externe via l'attribut src et utiliser les balises correspondantes pour différents blocs de langue, comme suit:

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

Remarque: L'
importation src suit les mêmes règles de résolution de chemin que la requête du module Webpack, le chemin relatif doit donc ./commencer par.
Vous pouvez importer des ressources à partir de dépendances NPM comme suit:

<style src="todomvc-app-css/index.css">

L'importation Src est également prise en charge sur les blocs personnalisés, comme suit:

<unit-test src="./unit-test.js">
</unit-test>

La spécification du document est proche de la spécification Vue Single File Component (SFC) , la même interface est complétée par 3 blocs de langue, pour plus de détails, veuillez vous référer à https://vue-loader.vuejs.org/zh/spec.html ; l'
étiquette du composant est proche de la spécification de l'applet WeChat , Y compris les formulaires, les vues, les boutons, etc. En même temps, vous ne pouvez pas utiliser de balises HTML standard, ni utiliser js pour faire fonctionner dom. Pour plus de détails, reportez-vous au document http://uniapp.dcloud.io/component/README ;
les capacités d'interface (API JS) sont proches Spécification de l'applet WeChat , mais le préfixe wx doit être remplacé par uni. Pour plus de détails, reportez-vous à http://uniapp.dcloud.io/api/README ;
la liaison de données et la gestion des événements sont proches de la spécification Vue.js , ainsi que de l'application et de la page Cycle de vie: étant
donné que la mise en page flex est recommandée pour les petits programmes et que flex est plus flexible et contrôlable que le modèle de boîte traditionnel. Afin d'être compatible avec un fonctionnement multi-terminal, il est recommandé d'utiliser la mise en page flex pour le développement. Reportez-vous à https: // css-tricks. com / snippets / css / a-guide-to-flexbox / et http://www.hcoder.net/tutorials/info_183.html .

Pour résumer

En tant que framework qui utilise Vue.js pour développer toutes les applications front-end, uni-app offre aux développeurs une grande commodité et réduit les coûts d'apprentissage et de développement.La diversité de la plate-forme actuelle est de plus en plus abondante et les besoins de développement deviennent de plus en plus complexes. Dans les circonstances, de plus en plus favorisé par les développeurs.