Detaillierte Erklärung des Unterschieds zwischen Uniapp und Vue

Projektverzeichnis:

┌─uniCloud-Cloud-Space-Verzeichnis, Alibaba Cloud ist uniCloud-aliyun, Tencent Cloud ist uniCloud-tcb
│─components Das Uni-App-Komponentenverzeichnis, das der Vue-Komponentenspezifikation entspricht│ └─comp-a.vue Die wiederverwendbare a-Komponente ├─Das Verzeichnis, in dem die Hybrid-App lokale HTML-Dateien speichert ├─platforms Das Verzeichnis, in dem die dedizierten Seiten jeder Plattform gespeichert sind ├─pages Das Verzeichnis, in dem die Geschäftsseitendateien gespeichert sind│ ├─index
│ │ └─index.vue Indexseite│ └─Liste
│ └─list.vue-Listenseite ├─static Das Verzeichnis zum Speichern lokaler statischer Ressourcen (wie Bilder, Videos usw.), auf die von der Anwendung verwiesen wird. Hinweis: Statische Ressourcen können nur hier gespeichert werden. ├─uni_modules Speichert uni_module-Standard-Plugins.
├─wxcomponents ist das Verzeichnis zum Speichern von Applet-Komponenten ├─main.js Vue-Initialisierungseintragsdatei ├─App.vue-Anwendungskonfiguration, wird verwendet, um den globalen Stil der App zu konfigurieren und den Anwendungslebenszyklus zu überwachen ├─manifest.json konfiguriert den Anwendungsnamen, die App-ID, das Logo, die Version und andere Verpackungsinformationen └─pages.json konfiguriert Seitenrouting, Navigationsleiste, Registerkarten und andere Seitenklasseninformationen

1. Einfaches Seitenbeispiel

<template> <view class="hello">{{hello}}view>template><script>export default { data() {return {hello: 'hello， 我是神的尾巴' } } }script><style>.hello {color: red;}style>

2.uni-app unterstützt die gemischte Verwendung von Vue-Komponenten und nativen Miniprogrammkomponenten

Informationen zur spezifischen Verwendung finden Sie unter Uni-App Mini-Program Component Support: https://uniapp.dcloud.io/frame?id=Mini-Program Component Support.

3. Zu den gängigen Tags und Komponenten gehören Ansicht, Text, Wischgeste, Bildlaufansicht usw.

Unterstützt Verschachtelung und

und sind keine Komponente, sondern nur ein Wrapper-Element, das auf der Seite nichts rendert und nur Steuerelementeigenschaften akzeptiert.

<Vorlage>
    <Ansicht>
        <Vorlage v-if="test">
            <view>Wird angezeigt, wenn der Test wahr ist</view>
        </Vorlage>
        <Vorlage v-else>
            <view>Wird angezeigt, wenn der Test falsch ist</view>
        </Vorlage>
    </Ansicht>
</Vorlage>

4. Lebenszyklus

4.1 Anwendungslebenszyklus in app.vue

4.2 Seitenlebenszyklus, kann auf jede Seite geschrieben werden.

uni-app unterstützt die folgenden Seiten-Lebenszyklusfunktionen:

beim Laden: Funktion() {
console.log('Besucher beim Laden');
},
onShow: Funktion() {
console.log('Besucher onShow');
},
montiert: Funktion () {
console.log('Besucher gemountet');
},

4.3 Komponentenlebenszyklus, entspricht dem Lebenszyklus von Vue.

5. Plugins nutzen

Uni-App-Plug-in-Markt, um einige für unsere Geschäftsszenarien geeignete Plug-ins zu finden.

Zum Beispiel das Pulldown-Aktualisierungs-Plug-In, das native APP-One-Click-Login-Plug-In usw.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!