uni-app入门（uni-app项目结构介绍、pages.json配置项列表）

一、uni-app项目结构

上一篇博客咱们介绍了如何创建一个uni-app项目，项目创建完成后的目录样式如图所示：

1. pages 业务页面文件存放的目录

pages里面可以存放.vue的页面，如下图所示：index的页面

2. static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
   

3. App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期

4. main.js Vue初始化入口文件

5. manifest.json 配置应用名称、appid、logo、版本等打包信息
   

6. pages.json 配置页面路由、导航条、选项卡等页面类信息
   

二、pages.json配置项列表

下面只介绍几个常用的属性，如需其他熟悉可查看uni-app的官方文档

属性	类型	必填	描述
pages	Object Array	是	设置页面路径及窗口表现
globalStyle	Object	否	设置默认页面的窗口表现
tabBar	Object	否	设置底部 tab 的表现
condition	Object	否	启动模式配置

• globalStyle

用于设置应用的状态栏、导航条、标题、窗口背景色等。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏
backgroundColor	HexColor	#ffffff	下拉显示出来的窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px

• pages

uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：

属性	类型	默认值	描述
path	String		配置页面路径
style	Object		配置页面窗口表现 （详细查看下面pages下style的属性）

注意：

pages节点的第一项为应用入口页（即首页）
应用中新增/减少页面，都需要对 pages 数组进行修改
文件名不需要写后缀，框架会自动寻找路径下的页面资源

• pages下style的属性：

用于设置每个页面的状态栏、导航条、标题、窗口背景色等。
页面中配置项会覆盖 globalStyle 中相同的配置项

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
navigationBarShadow	Object		导航栏阴影
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px

注意：窗口的背景色backgroundColor，只有在开启下拉刷新时（enablePullDownRefresh：true），当下拉的时候才会看见窗口的背景色