Wie erstelle ich ein Uni-App-Projekt? Prozesserklärung

Wie erstelle ich ein Uni-App-Projekt? Dieser Artikel wird Ihnen den Prozess der Uni-App-Erstellung systematisch erklären. Ich hoffe, dass er Ihnen weiterhilft!

Der Prozess der Erstellung einer Uni-App:

Enthält eine große Anzahl aktueller grundlegender Front-End-Fähigkeiten, wie z. B. Vue, WeChat-Applet, Komponentenkapselung, Kapselung mobiler Gesten, Daten-Paging, Axios, Moment , Flex-Layout, Sass, Videowiedergabe, Video-Download und andere Funktionen. [Verwandte Empfehlungen: „uniapp-Tutorial“]

1. Einführung in uni-app

1.1 Was ist uni-app?

uni-app ist ein Tool, das zur Entwicklung die vue.js-Syntax verwendet alle Front-End-Anwendungen Das Framework

kann verschiedene Dinge entwickeln

auch Full-End-Entwicklungsframework genannt

2. Grundlagen der Uni-App

2.1 Grundkenntnisse

• Uni-App erste Erfahrungen
• Einführung in die Projektstruktur. Stile und Sass
html
• css
• JavaScript
vue
WeChat-Applet
• uni-app

uni-uiuni-api

moment.js

Gesture-Verpackung
• 4. Erstellen Sie das Projekt mit Gerüsten
• 1 .Globale Installation

npm install -g @vue/cli

• 3. Starten Sie das Projekt (WeChat-Applet)

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

• 4. Importieren Sie das Projekt mit dem WeChat-Applet-Entwicklertool
• 4.1 Projektverzeichnis. npm install sass-loader node-sass "
• Fügen Sie in der Vue-Komponente das Attribut „

Grundlegende Syntax von Vue

wie v-bind, v-if, v-show, v-for und dergleichen

v-on

7. Einfache Verwendung von Komponenten

Komponentenparameterübergabe

Komponentenslot

7.1 Einfache Verwendung von Komponenten

Definition von KomponentenEinführung von KomponentenRegistrierung von Komponenten

Verwendung von Komponenten
• 7.11 Definition der Komponenten

Erstellen Sie einen neuen Ordner „compon“ im src-Verzeichnis „ents“, der zum Speichern von Komponenten verwendet wird.Erstellen Sie eine neue Komponente *.vue direkt im Komponentenverzeichnis.

7.12 Einführung von Komponenten Name aus 'Komponentenpfad'"

7.13 Komponentenregister

In der Instanz auf der Seite neue Attributkomponenten hinzufügenAttributkomponenten sind ein Objekt, fügen Sie die Komponente in die Registrierung ein

• 7.14 Verwendung von Komponenten
• Im Tag der Seite den Import direkt verwenden. Die Komponente „“

7.2 Komponente übergibt Parameter

• Die übergeordnete Komponente übergibt Parameter an das untergeordnete Element über
• Attribute
• Das untergeordnete Element übergibt Parameter an das übergeordnete Element über
• auslösendes Ereignis

. Verwenden Sie globale Datenübertragungsparameter

, indem Sie Vue

-Prototypen

• über
globalData
• bereitstellen .21 Vater übergibt die Daten an der Sohn an den Vater, an den Schwiegersohn, an das Kind, an das Kind, an das Kind, an das Kind, an das Kind. Die Komponente
ul-com

übergibt Array-Daten über den Attributnamen

list

Die untergeordnete Komponente empfängt die Daten über

props

npm run dev:mp-weixin

7.22 Das untergeordnete Element übergibt Daten an das übergeordnete Element

• Die untergeordnete Komponente löst das Ereignis aus
über
• Daten an die übergeordnete Komponente übergeben

Die übergeordnete Komponente empfängt Daten durch

Hörereignisse

Schreiben

• <ul-com : list="[1,2,3,4]">
  
  props: {
  list: Array
  },

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

Legen Sie das Klickereignis für die untergeordnete Komponente fest.Legen Sie die übergebenen Parameter in Methoden fest

Akzeptieren Sie einen Parameter in den Methoden des übergeordneten Elements.
• 7.3 Globale gemeinsame Daten.
• Teilen Sie Daten über den Vue-Prototyp (holen Sie es sich hiermit).
  • Teilen Sie Daten über globalData (verwenden Sie getapp, um sie nach der Definition abzurufen). Lokaler Speicher

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

  • 7.4-Komponentensteckplatz
  • Tags sind eigentlich eine Art von Daten. Wenn Sie Tags dynamisch an Unterkomponenten übertragen möchten, können Sie Slots verwenden. Verwenden Sie Slots, um Platzhalter zu implementieren. Einfach ausgedrückt: Werfen Sie einfach die Tags der übergeordneten Seite weg zur Unterseite
  8. Lebenszyklus

  8.1 Einführung

  Der Lebenszyklus des Uni-App-Frameworks kombiniert den Lebenszyklus von Vue und WeChat-AppletWird in der globalen APP verwendet onLaunch

  bedeutet, wann die Anwendung gestartet wird.
  • Verwenden Sie
  onLoad
  • oder onShow auf der Seite, um anzugeben, wann die Seite geladen bzw. wann die Seite angezeigt wird.
  • Wird in der Komponente verwendet. montiertWenn die Komponente gemountet ist
  Dieser Artikel ist nachgedruckt von: https://juejin.cn/post/6996561691639037983
  • Weitere Kenntnisse zum Thema Programmierung finden Sie unter:
  Einführung in die Programmierung
  ! !

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Uni-App-Projekt? Prozesserklärung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!