Uniapps Erfahrung in der Entwicklung kleiner Programme

1. Erstellen Sie ein neues UI-Projekt

Zunächst einmal basiert unsere Benutzeroberfläche auf ColorUI. Wenn ColorUI keinen Stil hat, basiert es auf der Benutzeroberfläche, die mit Uniapp geliefert wird. Daher sollten diese beiden UI-Frameworks zu Beginn des Projekts eingeführt werden.
Erstellen Sie wie folgt ein neues Uni-UI-Projekt.

Erstellen Sie ein weiteres ColorUI-Projekt.

Wenn Sie die Wirkung von ColorUI sehen müssen, damit Sie wissen, welche Komponenten Sie verwenden müssen, können Sie es wie folgt ausführen.

Gleiches gilt für uni-ui. Auf diese Weise können alle benötigten Stile aus diesen beiden Benutzeroberflächen übernommen werden.

2. Bauen Sie Ihr eigenes Projekt

Erstelle ein neues, eigenes Uniapp-Projekt und schließe es ab. Die Projektstruktur ist wie folgt.

Als nächstes stellen wir den ColorUI-Stil vor:

• Kopieren Sie das Verzeichnis „Colorui“ unter dem ColorUI-Projekt in das Stammverzeichnis Ihres eigenen Projekts.
• Fügen Sie zwei CSS-Dateien in die Datei App.vue im Stammverzeichnis Ihres Projekts ein, wie folgt

<Stil>
	/*Gemeinsames CSS für jede Seite */
	@import "colorui/main.css";
	@import "colorui/icon.css";

</Stil>

• Wenn Sie einen bestimmten Stil benötigen, können Sie die Elemente im ColorUI-Projekt überprüfen und die entsprechende Klasse kopieren.

Wenn der gewünschte Stil in ColorUI nicht verfügbar ist, müssen Sie den Stil von uni-ui importieren:

• Kopieren Sie das Common im Stammverzeichnis des Uni-UI-Projekts in das Stammverzeichnis Ihres eigenen Projekts.
• Importieren Sie die CSS-Datei in das App.vue-Verzeichnis
  

Schließlich ähnelt App.vue:

<Stil>
	/*Gemeinsames CSS für jede Seite */
	@import "colorui/main.css";
	@import "colorui/icon.css";
	@import url("common/uni.css");
</Stil>

Seitdem ist der UI-Projektimport abgeschlossen

3. Einige grundlegende Arbeiten

Tabbar verwenden: Sie können auf der offiziellen Uniapp-Website den Tabbar-Teil finden und ihn zur Verwendung kopieren.

Seitensprung, Anfrage starten: Gehen Sie zur offiziellen Uniapp-Website und verwenden Sie Uniapp-Komponenten

Wenn eine Seite zu komplex ist, empfiehlt es sich, sie in mehrere Komponenten aufzuteilen. Erstellen Sie ein neues Komponentenverzeichnis unter dem Seitenverzeichnis und erstellen Sie mehrere Komponenten (Vue-Dateien) unter dem Komponentenverzeichnis, wie in der folgenden Abbildung dargestellt:

Komponenten importieren: Wie in der folgenden Abbildung gezeigt, importieren Sie bei Bedarf Komponenten und übergeben Sie sogar Werte.

4. Seitenlayout

Hier einige praktische Vorschläge zum Seitenlayout.

• Die Elemente sind von oben nach unten angeordnet, belegen eine einzelne Zeile und können mit dem Standard-Flow-Div angeordnet werden.
• Müssen die Elemente in einer Reihe angeordnet werden, ist ein Float-Layout erforderlich. Das schwebende Layout kann Elemente jedoch nicht genau an einer angegebenen Position im Container platzieren, daher ist das Positionslayout erforderlich. Da diese Methode jedoch vom Dokumentenfluss getrennt werden muss und verschiedene Löschvorgänge zum Löschen der Floats erforderlich sind, ist sie veraltet. Es wird empfohlen, Flex-Layout zu verwenden
• Zusammenfassend wird „div“ für das Layout von oben nach unten und „float“ und „position“ für das Layout von links nach rechts verwendet. Oder verwenden Sie Flex
• Die Verwendung von Flex bietet viele Vorteile. Sie können Justify-Content verwenden, um Elemente in linken und rechten Layouts an bestimmten Positionen anzuordnen. Daher ist dieses Layout beliebt.

Zusammenfassen

Dies ist das Ende dieses Artikels über das Uniapp-Entwicklungs-Miniprogramm. Weitere relevante Inhalte zum Uniapp-Entwicklungs-Miniprogramm finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!