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 平台
网址：https://www.iconfont.cn

这个网址建议收藏一下，不仅仅是 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 时需要注意的一些地方。