前言

一、全局配置

1. app.json配置文件

它决定了页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

在 app.json 配置文件中，最主要的配置节点是：

pages 数组：配置小程序的页面路径 window 对象：用于设置小程序的状态栏、导航条、标题、窗口背景色 tabBar 对象：配置小程序的tab栏效果

注：

2. pages数组

app.json 中的 pages 数组，用来配置小程序的页面路径

基础配置

pages 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径+文件名 信息。 文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json、 .js、 .wxml 和 .wxss 四个文件进行处理。

创建页面的另一种方式

打开 app.json --> pages 数组节点 --> 新增页面路径并保存 --> 自动创建路径对应的页面

设置项目的首页

打开 app.json -> pages 数组节点 按需调整数组中路径的顺序，即可修改默认首页

注意事项：

1. 数组的第一项代表小程序的小程序的初始页面也就是首页
2. 小程序中新增/减少页面，都需要对 pages 数组进行修改，否则在运行小程序时就会报错

二、修改配置文件

1. 设置导航栏标题文字内容

app.json --> window --> navigationBarTitleText 将属性值修改即可

2. 设置导航栏背景色

app.json --> window --> navigationBarBackgroundColor 将属性值修改为指定的颜色就可以

3. 设置导航栏标题颜色

app.json --> window --> navigationBarTextStyle 将属性值修改为指定的颜色就可以

4. 全局开启下拉刷新功能

通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为

app.json --> window --> 把 enablePullDownRefresh 的值设置为 true

5. 设置下拉刷新窗口的背景色

当全局开启下拉刷新功能之后，默认的窗口背景为白色

app.json -> window -> backgroundColor

6. 设置下拉loading的样式

当全局开启下拉刷新功能之后，默认窗口的loading样式为白色

app.json --> window --> backgroundTextStyle

7. 设置上拉触底的距离

手指在屏幕上的上拉滑动操作，从而加载更多数据的行为

app.json --> window --> onReachBottomDistance

注意： 默认距离为 50px，如果没有特殊需求，建议使用默认值即可

三、tabBar

1. 概念

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换；小程序中通常将其分为底部 tabBar 和顶部 tabBar

注意：tabBar 中，只能配置最少2个、最多5个 tab 页签，当渲染顶部 tabBar 的时候，不显示 icon，只显示文本

注：

2. 组成部分

backgroundColor：导航条背景色 selectedIconPath：选中时的图片路径 borderStyle：tabBar上边框的颜色 iconPath：未选中时的图片路径 selectedColor：tab 上的文字选中时的颜色 color：tab 上的文字默认（未选中）颜色

3. tabBar节点的配置项

tabBar 节点的配置项 属性 类型 必填 默认值 描述 color HexColor 是 . tab 上的文字默认颜色，仅支持十六进制颜色 selectedColor HexColor 是 . tab 上的文字选中时的颜色，仅支持十六进制颜色 backgroundColor HexColor 是 . tab 的背景色，仅支持十六进制颜色 borderStyle string 否 black tabBar 上边框的颜色， 仅支持 black / white list Array 是 . tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab position string 否 bottom tabBar 的位置，仅支持 bottom/ top custom boolean 否 false 自定义 tabBar list 节点的配置项 属性 类型 必填 说明 pagePath string 是 页面路径，必须在 pages 中先定义 text string 是 tab 上按钮文字 iconPath string 否 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px selectedIconPath string 否 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px 注意： 都不支持网络图片 当 position 为 top 时，不显示 icon

四、页面配置

1. app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现；
2. 如果某些小程序页面，想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求；

注意：页面级别配置优先于全局配置生效

注：

总结

Sow nothing, reap nothing.