Comment réaliser un projet uni-app ? Cet article vous donnera une explication systématique du processus de création d'une application uni. J'espère qu'il vous sera utile !
Le processus de création d'une uni-app :
Contient un grand nombre de compétences essentielles frontales actuelles, telles que vue, applet WeChat, encapsulation de composants, encapsulation de gestes mobiles, pagination de données, axios, moment , mise en page flexible, sass, lecture vidéo, téléchargement vidéo et autres fonctions. [Recommandations associées : "tutoriel uniapp"]
1. Introduction à uni-app
1.1 Qu'est-ce qu'uni-app
uni-app est un outil qui utilise la syntaxe vue.js pour développer toutes les applications frontales Le framework
peut développer diverses choses
également appelé framework de développement complet
2 Bases d'uni-app
2.1 Connaissances de base
- première expérience d'uni-app
.
- introduction à la structure du projet
- Styles et culot
- Syntaxe de base
- Événements
- Composants
- Cycle de vie
3. Les bases d'abord, puis les projets
La pile technologique requise est
- html.
- css
- JavaScript
- vue
- Applet WeChat
- uni-app
- uni-ui
- uni-api
- moment.js
- Emballage gestuel
4. Construisez le projet avec un échafaudage.
1. installation
npm install -g @vue/cli
Copier après la connexion
2. Créez un projet
vue create -p dcloudio/uni-preset-vue my-project
Copier après la connexion
3. Démarrez le projet (applet WeChat)
npm run dev:mp-weixin
Copier après la connexion
4. Importez le projet avec l'outil de développement d'applet WeChat
N'oubliez pas d'entrer dans le répertoire racine
4.1 Répertoire du projet.
4.2 Style et sass
- prend en charge rpx des mini programmes et vw et vh de h5
- Il y a une configuration sass intégrée, il vous suffit d'installer les dépendances correspondantes "npm install sass-loader node-sass "
- Dans le composant vue, ajoutez l'attribut "
5. Syntaxe de base
Syntaxe de base de Vue
telle que v-bind, v-if, v -show, v-for et autres
6. L'utilisation des événements
v-on
7. passage de paramètres
Emplacement de composant
7.1 Utilisation simple des composants
Définition des composantsIntroduction des composants
Enregistrement des composants
- Utilisation des composants
- 7. 11 Définition des composants
Créer un nouveau dossier compon dans le répertoire src ents Utilisé pour stocker les composants
Créer un nouveau composant *.vue directement dans le répertoire des composants
- 7.12 Introduction des composants
Introduire les composants dans la page "importer le nom du composant from'component path'"
7.13 Registre des composants
Dans l'instance sur la page, ajoutez de nouveaux composants d'attribut
Les composants d'attribut sont un objet, placez le composant pour vous inscrire
- 7.14 Utilisation des composants
Dans la balise de la page, utilisez directement l'import Le composant "
"
7.2 Le composant transmet les paramètres
Le parent transmet les paramètres à l'enfant via attributs
L'enfant transmet les paramètres au parent via
événement déclencheur - Utiliser les paramètres de transmission de données globales
En montant des prototypes - Vue
via - globalData
- 7. 21 Le père transmet les données au fils au père page au gendre à l'enfant à l'enfant à l'enfant à l'enfant à l'enfant à l'enfant Le composant ul-com
transmet un tableau de données via le nom de l'attribut
list
.
Le composant enfant reçoit les données via props
événements d'écoute
Écriture
methods: {
handleclick(){
this.$emit("textchange",'来自子组件的数据');}
}
Copier après la connexion
Copier après la connexion
- Définissez l'événement de clic sur le composant enfant
- Définissez les paramètres passés dans les méthodes
Définissez un événement d'écoute dans la vue parent-enfant
Stockage local
Vue.prototype.baseURL="http: //www.baidu.com"
Copier après la connexion
Emplacement pour composants 7.4-
- Les balises sont en fait un type de données Si vous souhaitez transférer dynamiquement des balises vers des sous-composants, vous pouvez utiliser des emplacements
- Utilisez des emplacements pour implémenter des espaces réservés
En termes simples, jetez simplement les balises de la page parent. vers la sous-page
8. Cycle de vie
8.1 Introduction
- Le cycle de vie du framework uni-app combine le cycle de vie de vue et l'applet WeChat
- Utilisé dans l'APP globale onLaunch signifie lorsque l'application démarre.
- est utilisé dans la page onLoad ou onShow signifie lorsque la page est chargée et lorsque la page est affichée,
montée- est utilisée dans le composant. est monté
Cet article est reproduit à partir de : https://juejin.cn/post/6996561691639037983
Pour plus de connaissances sur la programmation, veuillez visiter :
Introduction à la programmation ! !
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!