Rumah > hujung hadapan web > uni-app > teks badan

Bermula dengan uni-app: penciptaan projek dan konfigurasi bar tab asli

似水流年ヾ ^_^
Lepaskan: 2022-06-20 17:30:39
asal
1846 orang telah melayarinya

uni-app ialah rangka kerja bahagian hadapan untuk membangunkan aplikasi merentas platform menggunakan Vue.js Pembangun menulis satu set kod yang boleh disusun ke berbilang platform seperti iOS, Android, H5 dan applet. Berbanding dengan pembangunan program mini asli, pembangunan asli pada kedua-dua hujung APP mempunyai kos pembelajaran dan pembangunan yang lebih rendah Platform ini dilengkapi dengan komponen yang kaya dan pengalaman berjalan sangat baik, jadi ia disambut secara meluas oleh pembangun.

Sebelum bermula, pembangun perlu memuat turun dan memasang alatan berikut: HBuilderX: Alamat muat turun IDE rasmi

1 Cipta projek uni-app yang pertama

Klik Fail->Baharu->Projek dalam bar alat:

Pilih projek uni-app di sebelah kiri, masukkan nama projek, seperti: ujian, pilih laluan fail, gunakan lalai templat, dan klik Cipta , anda boleh berjaya mencipta projek uni-apl.

Bermula dengan uni-app: penciptaan projek dan konfigurasi bar tab asli

2 Pengenalan direktori projek

Selepas projek uni-app baharu berjaya dibuat, direktori projek akan menjana fail berikut:

Bermula dengan uni-app: penciptaan projek dan konfigurasi bar tab asli

3. Pratonton Nyahpepijat

Selepas projek uni-apl baharu berjaya dibuat, anda boleh pratonton dalam alat dengan mengklik butang pratonton di sebelah kanan Alat HBuilderX. Anda boleh nyahpepijat dan melihat struktur susun atur, gaya, konsol, dll.

Bermula dengan uni-app: penciptaan projek dan konfigurasi bar tab asli

4 .json, ubah suai tajuk, tambah penghalaan halaman, tambah tabBar dan tambah empat tabBars "Home", "Category", "Shopping Troli", "My". Sejajar dengan itu buat empat halaman dalam direktori halaman. Kod adalah seperti berikut:

5 Import pakej sumber statik (imej)
{
	"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": "我的"
			}
		]
	}
}
Salin selepas log masuk

Blok kod di atas digunakan pada imej sumber statik, dan imej perlu diletakkan dalam direktori statik

6. Projek ujian dibina dan kesannya adalah seperti berikut

Bermula dengan uni-app: penciptaan projek dan konfigurasi bar tab asli

Muat turun pakej sumber

Atas ialah kandungan terperinci Bermula dengan uni-app: penciptaan projek dan konfigurasi bar tab asli. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan