当前位置：网站首页>使用hbuilder X创建uniapp项目

使用hbuilder X创建uniapp项目

2022-06-25 15:48:00 【天使的同类】

使用hbuilder X创建uniapp项目

一、打开hbuilder X软件，左上角文件-新建-项目，如图：

在这里插入图片描述
二、在弹窗内，填写项目名称，选择你自己需要的项目案例，可根据自己需求选择vue版本2/3，如图：

在这里插入图片描述
三、这时你的项目已经创建好了，自动由hbuilderX打开，项目大致文件内容如图：

在这里插入图片描述
四、设置底部导航跳转，打开pages.json文件（pages是路由跳转地址，tabBar是配置底部导航栏），如果顶部导航想要添加相应的按钮图标，可添加‘app-plus’配置，这里的‘fontSrc’图标来自阿里，下面有如何下载阿里图标的步骤，先看pages.json的文件配置吧

{
    
	"pages": [{
    
		"path": "pages/index/index",
		"style": {
    
			"navigationBarTitleText": "人人通"
		}
	}, {
    
		"path": "pages/message/index",
		"style": {
    
			"navigationBarTitleText": "消息",
			"app-plus": {
    
				"titleNView": {
    
					"buttons": [{
    
						"text": "&#xe6c7;",
						"fontSrc": "/static/iconfont/iconfont.ttf",
						"fontSize": "20",
						"float": "right",
						"color": "#7A7E83"
					}]
				}
			}
		}
	}, {
    
		"path": "pages/personel/index",
		"style": {
    
			"navigationBarTitleText": "我的"
		}
	}, {
    
		"path": "pages/collectInfo/index",
		"style": {
    
			"navigationBarTitleText": "信息采集"
		}
	}, {
    
		"path": "pages/messageDetails/index",
		"style": {
    
			"navigationBarTitleText": "消息详情"
		}

	}],
	"tabBar": {
    
		"color": "#7A7E83",
		"selectedColor": "#1296db",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"height": "50px",
		"fontSize": "10px",
		"iconWidth": "24px",
		"spacing": "3px",
		"iconfontSrc": "static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
		"list": [{
    
			"pagePath": "pages/index/index",
			"iconPath": "static/home.png",
			"selectedIconPath": "static/se_home.png",
			"text": "首页"
		}, {
    
			"pagePath": "pages/message/index",
			"iconPath": "static/message.png",
			"selectedIconPath": "static/se_message.png",
			"text": "消息"
		}, {
    
			"pagePath": "pages/personel/index",
			"iconPath": "static/mine.png",
			"selectedIconPath": "static/se_mine.png",
			"text": "我的"
		}]
	},
	"globalStyle": {
    
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#fff",
		"backgroundColor": "#fff",
		"app-plus": {
    
			"background": "#efeff4"
		}
	}
}