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 时需要注意的一些地方。