Erste Schritte mit Uni-App: Projekterstellung und native Tabbar-Konfiguration

uni-app ist ein Front-End-Framework für die Entwicklung plattformübergreifender Anwendungen mit Vue.js. Entwickler schreiben einen Codesatz, der für mehrere Plattformen wie iOS, Android, H5 und Miniprogramme kompiliert werden kann. Im Vergleich zur nativen Miniprogrammentwicklung werden beide Enden der APP nativ entwickelt und die Lern- und Entwicklungskosten sind geringer. Die Plattform verfügt über umfangreiche Komponenten und das Lauferlebnis ist sehr gut, sodass sie von Entwicklern allgemein begrüßt wird.

Bevor Sie beginnen, müssen Entwickler die folgenden Tools herunterladen und installieren: Wählen Sie links das Uni-App-Projekt aus, geben Sie den Projektnamen ein, z. B. „test“, den Speicherortdateipfad, verwenden Sie die Standardvorlage und klicken Sie auf „Erstellen“, um erfolgreich ein Uni-App-Projekt zu erstellen.

2. Einführung in das Projektverzeichnis

Nachdem das neue Uni-App-Projekt erfolgreich erstellt wurde, generiert das Projektverzeichnis die folgende Bilddatei:

3. Debugging-Vorschau

Nach der neuen Uni-App Wenn das Projekt erfolgreich erstellt wurde, können Sie auf die Schaltfläche „Vorschau“ auf der rechten Seite der HBuilderX-Tool-Vorschau innerhalb des Tools klicken. Sie können die Layoutstruktur, den Stil, die Konsole usw. debuggen und über die Vorschau-Symbolleiste anzeigen

4. Erstellung und Konfiguration der nativen Tabbar

Öffnen Sie die Datei „pages.json“, ändern Sie den Titel und fügen Sie Seiten hinzu. Routing, tabBar hinzufügen, tabBar fügt vier „Homepage“, „Kategorie“, „Warenkorb“ und „Mein“ hinzu. Erstellen Sie entsprechend vier Seiten im Seitenverzeichnis. Der Code lautet wie folgt:

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "ShopWind多商户商城"
			}
		}, {
			"path": "pages/user/index",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}, {
			"path": "pages/cart/index",
			"style": {
				"navigationBarTitleText": "购物车"
			}
		}, {
			"path": "pages/category/index",
			"style": {
				"navigationBarTitleText": "商品分类"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#333333",
		"selectedColor": "#fc2b34",
		"borderStyle": "white",
		"backgroundColor": "#FFFFFF",
		"position": "bottom",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/images/home.png",
				"selectedIconPath": "static/images/home-hover.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/category/index",
				"iconPath": "static/images/gcategory.png",
				"selectedIconPath": "static/images/gcategory-hover.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/cart/index",
				"iconPath": "static/images/cart.png",
				"selectedIconPath": "static/images/cart-hover.png",
				"text": "购物车"
			},
			{
				"pagePath": "pages/user/index",
				"iconPath": "static/images/my.png",
				"selectedIconPath": "static/images/my-hover.png",
				"text": "我的"
			}
		]
	}
}

5. Importieren Sie das statische Ressourcenpaket (Bild)

Der obige Codeblock wird auf das statische Ressourcenbild angewendet und das Bild muss im statischen Verzeichnis abgelegt werden

6 Das Projekt ist erstellt und der Effekt ist wie folgt:

Ressourcenpaket-Download

Das obige ist der detaillierte Inhalt vonErste Schritte mit Uni-App: Projekterstellung und native Tabbar-Konfiguration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!