项目创建

使用HBuilderX选择uni-app模版进行直接创建

项目结构

• pages.json文件--对uni-app进行全局配置，决定页面路径、窗口样式、原生的导航栏和底部tabbar等
• manifest.json--应用的配置文件，用于指定应用的名称、图标、权限等
• package.json--可以通过增加uni-app扩展节点实现自定义条件编译平台
• uni.scss--用于控制整体风格，全局样式。
• App.vue--uni-app的主组件，是页面的入口文件。但App.vue本身不是页面，不能编写视图元素。作用有调用生命周期函数、配置全局样式、配置全局的存储globalData
• main.js--uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex
• pages--文件夹存放需要写的文件
• sstatic--存放静态资源

pages.json详情

• *globalStyle--设置窗口的默认表现
• *pages--设置路径及窗口表现
• *tabBar--设置底部tab的表现
• easycom--组件自动引入规则
• condition--启动模式配置
• subPackages--分包加载配置
• preloaRule--分包预下载规则（微信小程序）
• workers--worker代码放置的目录（微信小程序）

globalStyle

	"globalStyle": {
		"pageOrientation": "portrait",//屏幕旋转设置
		*"navigationBarTitleText": "Hello uniapp",//导航栏标题内容
		*"navigationBarTextStyle": "white",//导航栏颜色及状态栏前景颜色
		*"navigationBarBackgroundColor": "#007AFF",//导航栏背景色
		*"backgroundColor": "#F8F8F8",//下拉显示出来的窗口背景色
		"backgroundColorTop": "#F4F5F6",//顶部窗口的背景色
		"backgroundColorBottom": "#F4F5F6",//底部窗口的背景色
		"mp-360": {
			"navigationStyle": "custom"
		},//编译到360的特定样式
		"h5": {
			"maxWidth": 1190,
			"navigationBarTextStyle": "black",
			"navigationBarBackgroundColor": "#F1F1F1"
		}//设置编译到h5的特定样式
             

pages

"pages": [
		// pages数组中第一项表示应用启动页
		{
			"path": "pages/tabBar/component/component",//路径
			"style": {//用于设置每一个页面的样式，优先级高于global
				"navigationBarTitleText": "内置组件",
				"app-plus": {
					"bounce": "vertical",
					"titleNView": {
						"buttons": [{
							"text": "\ue534",
							"fontSrc": "/static/uni.ttf",
							"fontSize": "22px",
							"color": "#FFFFFF"
						}]
					}
				}
			}
		},

tabBar

"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#007AFF",
		"borderStyle": "black",
		"backgroundColor": "#F8F8F8",
		"list": [{
				"pagePath": "pages/tabBar/component/component",
				"iconPath": "static/component.png",
				"selectedIconPath": "static/componentHL.png",
				"text": "内置组件"
			},
			{
				"pagePath": "pages/tabBar/API/API",
				"iconPath": "static/api.png",
				"selectedIconPath": "static/apiHL.png",
				"text": "接口"
			}