Comment réaliser un projet uni-app ? Explication du processus

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

2. Créez un projet

vue create -p dcloudio/uni-preset-vue my-project

3. Démarrez le projet (applet WeChat)

npm run dev:mp-weixin

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

<ul-com : list="[1,2,3,4]">

props: {
list: Array
},

• 7.22 L'enfant transmet les données au parent
Le composant enfant déclenche l'événement
• via Transmettre les données au composant parent
Le composant parent reçoit les données par

événements d'écoute

Écriture

methods: {
    handleclick(){
    this.$emit("textchange",'来自子组件的数据');}
}

<ul-com :list="[1,2,3,4]"
@textChange="handleTextchange">

• 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

• Acceptez un paramètre dans les méthodes du parent
7.3 Données globales partagées
Partagez des données via le prototype de Vue (obtenez-les avec ceci)

• Partagez des données via globalData (utilisez getapp pour obtenir après définition)

vuex

Stockage local

Vue.prototype.baseURL="http: //www.baidu.com"

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!