pages.json配置文件分析

发布时间：2023-04-25 08:43:11 所属栏目：教程来源：

导读：pages.json 配置文件我们在前面小节中多次讲过，配置页面路由、进行页面的全局配置和页面配置都可以在 pages.json 文件中配置。属于我们开发过程中经常会操作的文件。

但pages.json 文件的功能可不止这些，本小节

pages.json 配置文件我们在前面小节中多次讲过，配置页面路由、进行页面的全局配置和页面配置都可以在 pages.json 文件中配置。属于我们开发过程中经常会操作的文件。

但pages.json 文件的功能可不止这些，本小节我们来详细看一下 pages.json 配置文件中的其他配置项。

condition 配置项
condition 是与 pages同级的配置项，意义是启动模式配置，只在开发期间生效，那既然项目上线后又不起作用，为什么会用到 condition 启动模式配置呢？主要是方便我们进行页面测试时看到预览效果。

比如我们开发的页面是嵌套在N个页面以后，每次测试需要层层跳转才能看到预览效果，这样就会极大的拉低我们开发效率，这时候condition启动模式配置就派上用场了。

可以直接将当前开发的页面设置为启动页面，测试的时候，每次重新运行项目，当前开发的页面都会作为第一个页面显示出来，再也不同点击多次才能看到页面效果了。

实例：

// condition 是与 tabBar 同级的配置项
"condition": {
"current": , //当前激活的模式（list 的索引项）
"list": [
{
"name": "index", //模式名称
"path" : "pages/index/index",//启动页面(我们需要调试页面的路径)

"query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到

},
{
"name": "about",
"path" : "pages/about/about",
"query": "" /
}

]
}

list说明
list是一个数组列表，里面存放着我们需要调试的页面对象，我们将想要调试的页面都放在 list 数组列表中。

想要调试哪个页面，就将这个页面对象所对应的的 list 索引写在 current 属性的后面、这样我们调试的时候，就会将这个页面作为项目的启动页面了。

比如 "current": 1，current 属性后面跟着 1，也就是 list 数组列表中索引为 1 的页面对象，我们调试的时候，list 数组中的第 2 个页面对象就会作为项目的初始启动页面。

Tips：
我们一般直接在 App 里真机调试运行，这样可以直接打开配置的页面，如果在微信开发者工具中调试需要手动改变编译模式。

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"
}]
}
list说明
list是一个用来存放 tab 项的数组列表，将所有的 tab 项都放在 list 数组列表中。

selectedColor 说明
selectedColor 是 tab 上的文字选中时的颜色，要注意这里只能是十六进制的颜色，比如白色要写成#FFFFFF，不能写成white

pagePath 说明
pagePath 表示点击 tab 时，需要跳转的页面路径，这个页面路径必须要先在 pages 配置项中定义，不然会报错。

图标路径说明
我们每个 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 函数，这个开发的时候需要注意。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!