pages.json配置文件详解
1. 前言
pages.json 配置文件我们在前面小节中多次讲过，配置页面路由、进行页面的全局配置和页面配置都可以在 pages.json 文件中配置。属于我们开发过程中经常会操作的文件。
但pages.json 文件的功能可不止这些，本小节我们来详细看一下 pages.json 配置文件中的其他配置项。
2. condition 配置项
condition 是与 pages同级的配置项，意义是启动模式配置，只在开发期间生效，那既然项目上线后又不起作用，为什么会用到 condition 启动模式配置呢？主要是方便我们进行页面测试时看到预览效果。
比如我们开发的页面是嵌套在N个页面以后，每次测试需要层层跳转才能看到预览效果，这样就会极大的拉低我们开发效率，这时候condition启动模式配置就派上用场了。
可以直接将当前开发的页面设置为启动页面，测试的时候，每次重新运行项目，当前开发的页面都会作为第一个页面显示出来，再也不同点击多次才能看到页面效果了。
实例：
// condition 是与 tabBar 同级的配置项
"condition": {
"current": 0, //当前激活的模式（list 的索引项）
"list": [
{
"name": "index", //模式名称
"path" : "pages/index/index",//启动页面(我们需要调试页面的路径)
"query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到
},
{
"name": "about",
"path" : "pages/about/about",
"query": "" /
}
]
}
2.1 list说明
list是一个数组列表，里面存放着我们需要调试的页面对象，我们将想要调试的页面都放在 list 数组列表中。
想要调试哪个页面，就将这个页面对象所对应的的 list 索引写在 current 属性的后面、这样我们调试的时候，就会将这个页面作为项目的启动页面了。
比如 "current": 1，current 属性后面跟着 1，也就是 list 数组列表中索引为 1 的页面对象，我们调试的时候，list 数组中的第 2 个页面对象就会作为项目的初始启动页面。
Tips：
我们一般直接在 App 里真机调试运行，这样可以直接打开配置的页面，如果在微信开发者工具中调试需要手动改变编译模式。
3. tabBar 配置项
tabBar 是与 condition、pages同级的配置项，当应用需要显示 tab 栏时，我们只需要通过配置 pages.json 配置文件中的 tabBar 属性，就可以控制项目中 tab 栏的显示。
不能只配置1个 tab 项，只能配置最少2个，最多5个 tab 项。tab 栏从左到右的显示顺序与 tabBar 中 list 数组中 tab 项的排序有关。接下来我们来看看怎样来设置 tabBar 配置项。
实例：
"tabBar": {
"color": "#8B8B8B", // 必须设置的选项，表示 tab 文字默认的颜色，也是没有选中 tab 时文字显示的颜色
"selectedColor": "#EA5149", // 必须设置的选项，表示选中 tab 时文字显示的颜色
"backgroundColor": "#ffffff",// 必须设置的选项，表示 tab 的背景颜色
"borderStyle": "black",// 可选设置，表示 tab 上边框的颜色，目前只支持 black/white
"list": [{
"text": "首页", // 表示第1个 tab 项的显示文字
"pagePath": "pages/index/main", // 表示第1个 tab 项的页面路径
"iconPath": "static/images/danhuang.png", // 表示第1个 tab 项未选中时所显示的图标路径
"selectedIconPath": "static/images/danhuang-active.png"// 表示第1个 tab 项被选中时所显示的图标路径
},
{
"text":"记录",
"pagePath":"pages/record/main",
"iconPath": "static/images/huasheng.png",
"selectedIconPath": "static/images/huasheng-active.png"
},
{
"text": "我的",
"pagePath": "pages/me/main",
"iconPath": "static/images/binggan.png",
"selectedIconPath": "static/images/binggan-active.png"
}]
}
3.1 list说明
list是一个用来存放 tab 项的数组列表，将所有的 tab 项都放在 list 数组列表中。
3.2 selectedColor 说明
selectedColor 是 tab 上的文字选中时的颜色，要注意这里只能是十六进制的颜色，比如白色要写成#FFFFFF，不能写成white
3.3 pagePath 说明
pagePath 表示点击 tab 时，需要跳转的页面路径，这个页面路径必须要先在 pages 配置项中定义，不然会报错。
3.4 图标路径说明
我们每个 tab 项需要设置两个图标，一个是未选中时显示的图标路径 iconPath，一个是选中时显示的图标路径 selectedIconPath。
这些图标我们一般需要自己去下载，在这里给大家推荐一个免费的矢量图标平台，这里面素材挺全的，基本可以满足我们的开发需求。
Iconfont 平台
这个网址建议收藏一下，不仅仅是 tab 图标，我们日常项目开发需要用到的图标，在这个平台上面基本都可以找到。
将图标下载下来之后，我们将图标放到项目根目录下面的 static 文件夹下面，然后就可以在 pages.json配置文件中引用了，引用的时候 static 前面不要加 /，不然图片显示不出来。
正确引用方式：
"iconPath": “static/images/binggan.png"
错误引用方式：
"iconPath”: “/static/images/binggan.png”
Tips：
tab 页面展示过一次以后就会保存在内存中，再次切换 tab 时，只会触发页面的 onShow 函数，不会再触发 onLoad 函数，这个开发的时候需要注意。
4. 小结
本小节我们主要讲了pages.json 配置文件中，除了配置页面路由、进行页面的全局配置和页面配置之外的其他配置项。本小节我们需要掌握的重点如下：
- 掌握 condition 配置项的代码实例，了解condition 启动模式配置在开发过程中的应用；
- 掌握 tabBar 配置项的用法，以及配置 tabBar 时需要注意的一些地方。