Creating a uniapp project using hbuilder x

Use hbuilder X establish uniapp project

One 、 open hbuilder X Software , top left corner file - newly build - project , Pictured ：

Two 、 In the pop-up window , Fill in the project name , Choose your own project case , You can choose according to your own needs vue edition 2/3, Pictured ：

3、 ... and 、 By this time your project has been created , Automatically by the hbuilderX open , The general contents of the project documents are shown in the figure ：

Four 、 Set the bottom navigation jump , open pages.json file （pages Is the route jump address ,tabBar Is to configure the bottom navigation bar ）, If the top navigation wants to add the corresponding button icon , Additable ‘app-plus’ To configure , there ‘fontSrc’ The icon comes from Ali , Here are the steps to download the Alibaba icon , First look at pages.json File configuration of

{
    
	"pages": [{
    
		"path": "pages/index/index",
		"style": {
    
			"navigationBarTitleText": " Everyone knows "
		}
	}, {
    
		"path": "pages/message/index",
		"style": {
    
			"navigationBarTitleText": " news ",
			"app-plus": {
    
				"titleNView": {
    
					"buttons": [{
    
						"text": "",
						"fontSrc": "/static/iconfont/iconfont.ttf",
						"fontSize": "20",
						"float": "right",
						"color": "#7A7E83"
					}]
				}
			}
		}
	}, {
    
		"path": "pages/personel/index",
		"style": {
    
			"navigationBarTitleText": " my "
		}
	}, {
    
		"path": "pages/collectInfo/index",
		"style": {
    
			"navigationBarTitleText": " information acquisition "
		}
	}, {
    
		"path": "pages/messageDetails/index",
		"style": {
    
			"navigationBarTitleText": " News details "
		}

	}],
	"tabBar": {
    
		"color": "#7A7E83",
		"selectedColor": "#1296db",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"height": "50px",
		"fontSize": "10px",
		"iconWidth": "24px",
		"spacing": "3px",
		"iconfontSrc": "static/iconfont.ttf", // app tabbar  typeface .ttf File path  app 3.4.4+
		"list": [{
    
			"pagePath": "pages/index/index",
			"iconPath": "static/home.png",
			"selectedIconPath": "static/se_home.png",
			"text": " home page "
		}, {
    
			"pagePath": "pages/message/index",
			"iconPath": "static/message.png",
			"selectedIconPath": "static/se_message.png",
			"text": " news "
		}, {
    
			"pagePath": "pages/personel/index",
			"iconPath": "static/mine.png",
			"selectedIconPath": "static/se_mine.png",
			"text": " my "
		}]
	},
	"globalStyle": {
    
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#fff",
		"backgroundColor": "#fff",
		"app-plus": {
    
			"background": "#efeff4"
		}
	}
}

Ali icon download , Search for the icon you need , Add cart - Add to project - Download to local , This will download a compressed package , After decompressing iconfont.ttf Copy files to your own project , stay pages.json Just introduce the corresponding icon in the ：

Final rendering of the page ：

Change begins with persistence and commitment.