Getting started with uni-app: project creation and native tabbar configuration

uni-app is a front-end framework for developing cross-platform applications using Vue.js. Developers write a set of code that can be compiled to multiple platforms such as iOS, Android, H5, and mini programs. Compared with native mini program development, both ends of the APP are natively developed, and the cost of learning and development is lower. The platform comes with rich components and the running experience is very good, so it is widely welcomed by developers.

Before starting, developers need to download and install the following tools: HBuilderX: Official IDE download address

1. Create the first uni-app project

Click File->New->Project in the toolbar:

Select the uni-app project on the left, enter the project name, such as: test, select the file path, use the default template, and click Create , you can successfully create a uni-app project.

2. Project directory introduction

After the new uni-app project is successfully created, the project directory will generate the following file:

3. Debugging Preview

After the new uni-app project is successfully created, you can preview it in the tool by clicking the preview button on the right side of the HBuilderX tool. You can debug and view the layout structure, style, Console, etc.

4. Creation and configuration of native tabbar

Open the pages.json file, modify the title, add page routing, add tabBar, and add four tabBars "Home", "Category", "Shopping Cart", "My". Correspondingly create four pages in the pages directory. The code is as follows:

{
	"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. Import static resource package (picture)

The above code block is applied to static resource pictures, and the pictures need to be placed in the static directory

6. The test project is built and the effect is as follows

Resource package download

The above is the detailed content of Getting started with uni-app: project creation and native tabbar configuration. For more information, please follow other related articles on the PHP Chinese website!