Anmerkungen zur nullbasierten Entwicklungsstudie von Uniapp (1) – vorläufige Projekterstellung
Ich habe Grundkenntnisse in C# und Python und wollte schon immer APP- oder Webentwicklung erlernen. Heutzutage gibt es verschiedene praktische Anwendungs-Apps. Der ursprüngliche Anwendungsumfang von Winform ist sehr begrenzt, aber es gibt keine guten Lernkanäle und auch verschiedene Konzepte wie Front-End/Back-End/JS/NODE/VUE/CSS/HTML5 Es ist so kompliziert, dass ich gar nicht weiß, wo ich anfangen soll. Ich habe zufällig das Uniapp-Entwicklungs-Tutorial auf der Webseite entdeckt. Es schien relativ einfach zu sein. Nach dem Herunterladen von HBuilderX gab es viele offizielle Codes, daher wollte ich durch Kopieren und Einfügen der offiziellen Codes einige einfache Seiten erstellen und das einfügen, was ich verstanden habe Notieren Sie sich das Wissen als Festigung, machen Sie jeden Tag kleine Fortschritte und können Sie es später richtig und vollständig anwenden.
1. Überprüfen Sie zunächst die offizielle Hilfedatei
Gutes Lernen beginnt immer mit der offiziellen Hilfedatei. Öffnen Sie das Einführungs-Tutorial über den Hilfeeingang.
Adresse https://hx.dcloud.net.cn/Tutorial/StartedTutorial
Nachdem ich die Einführung von HBuilderX kurz gelesen hatte, stellte ich fest, dass es leistungsstark und einfach zu verwenden ist, aber ich hatte nicht das Gefühl, dass es so war, also bin ich direkt zum Uni-App-Entwicklungsdokument gesprungen
Adressehttps://uniapp.dcloud.net.cn/
Der Kernbestandteil der Entwicklungsdokumentation besteht darin, dass neue Projekte entdeckt werden können Es gibt viele Vorlagen. Vorlagen bedeuten, dass sie kopiert und eingefügt werden können...< /span>
Auf diese Weise ist die Entwicklung durch Kopieren und Einfügen viel einfacher zu verstehen. .
2. Öffnen Sie ein Komponentenbeispielprojekt
Nach der Auswahl eines neuen Projekts gibt es 5 Grundtypen gewöhnlicher Projekte/uni-app/Wap2App/5+App/IDE-Plug-in. Wählen Sie uni-app
und dort Es gibt 10 Arten von Projekten. Es stehen Vorlagen zur Verfügung:
Die erste ist die Standardvorlage. Nach dem Öffnen gibt es nur eine grundlegende Projektstruktur und keinen Inhalt. Sie eignet sich sehr gut zum Üben des Ausfüllens Code für Basisprojekte.
Die zweite ist die Vorlage der Uni-App-Komponente, die die Codes verschiedener Komponenten enthält. Bei den Komponenten handelt es sich um verschiedene Steuerelemente, die Winform ähneln, und es gibt auch Anwendungscodes und Effekte verschiedener Komponenten . Es kann als beste Fallstudie für Anfänger verwendet werden.
Die dritte Möglichkeit besteht darin, uniCloud für die Cloud-Entwicklung zu verwenden. Es ist bereits etwas fortgeschritten, daher werde ich es noch nicht lernen. 4-10 ist eine umfassende Anwendung. Lernen Sie zuerst die zweite und sprechen Sie dann darüber.
Daher erstellen wir hier zunächst ein Hello-Uni-App-Demoprojekt.
Öffnen Sie das Verzeichnis, wählen Sie App.vue aus und wählen Sie dann „Im integrierten Browser ausführen“ im Menü „Ausführen“. Sie müssen das integrierte Browser-Debugging-Plug-in herunterladen Voraus, oder Sie können externes Chrome Open verwenden.
Nachdem die Kompilierung abgeschlossen ist, können Sie den Beispielcodeeffekt der Uni-App-Komponente sehen.
3. Erstellen Sie ein Standardvorlagenprojekt
Erstellen Sie ein neues Uni-App-Projekt mit dem Namen Demo1, wählen Sie die Standardvorlage aus und verwenden Sie sie als Lernprojekt.
In diesem Verzeichnis fehlen viele Unterverzeichnisse und Dateien.
Nach der Kompilierung wird die Standarddatei „pages/index/index.vue“ angezeigt.
Der Titel lautet „uni-app“, der in „pages.json“ definiert ist. a> Die im Code lesbaren Informationen sind das Logo und die Position im Bild-Tag ist src="/static /logo.png", Sie können zu einem anderen Bild wechseln, indem Sie ein Bild ändern.
„navigationBarTitleText“: „uni-app“ ist nicht in index.vue
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{
{title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
4. Referenzseite zur Änderung des Komponentencodes
Die Seite index.vue ist relativ einfach, daher wollte ich den Komponentencode des Hello-Uni-App-Demoprojekts verwenden, um sie umzuwandeln, beispielsweise in eine Anmeldeseite zu verwandeln, und lernen, wie man sie verwendet.
Überprüfen Sie die Komponenten von Hello uni-app und stellen Sie fest, dass die Seitenstruktur des Formulars relativ ähnlich ist. Daher erstelle ich ein neues Komponentenverzeichnis unter Demo1 und ändere dann „pages\components\form\“. Hauptverzeichnis von Hello uni-app Kopieren Sie form.vue
Kopieren Sie diese Beispielcodes aus form.vue und fügen Sie sie in index.vue ein
<form @submit="formSubmit" @reset="formReset">
<view class="uni-form-item uni-column">
<view class="title">姓名</view>
<input class="uni-input" name="nickname" placeholder="请输入姓名" />
<view class="title">姓名</view>
<view class="uni-input-wrapper">
<input class="uni-input" name="password" password type="text" placeholder="请输入密码" />
</view>
</view>
<view class="uni-btn-v">
<button form-type="submit">Submit</button>
<button type="default" form-type="reset">Reset</button>
</view>
</form>
Der Effekt nach dem Ausführen ist
Ändern Sie den obigen Code in Kombination mit dem Beispielcode
<form @submit="formSubmit" @reset="formReset">
<view class="uni-form-item uni-column">
用户名
<input class="uni-input" name="username" placeholder="请输入用户名" />
密码
<view class="uni-input-wrapper">
<input class="uni-input" name="password" password type="text" placeholder="请输入密码" />
</view>
</view><br>
<view class="uni-btn-v">
<button type= "primary" form-type="submit">登录</button><br>
<button type="default" form-type="reset">重置</button>
</view>
</form>
Der endgültige Effekt ist wie folgt:
Unabhängig davon, ob es gut aussieht oder nicht, ist zumindest der vorläufige Stil fertig. Später werde ich langsam lernen, das Layout und den Auslöser zu ändern Aktionen. Der erste Schritt des Lernens endet hier.