微信小程序中的全局配置和页面配置

---

前言

今天一起看一下微信小程序中的全局配置和页面配置，页面配置和全局配置同时存在，哪一个会生效呢？一起来研究一下吧~

---

一、全局配置

1. app.json配置文件

小程序根目录下的 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，只显示文本

注： tabbar 详细文档

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

  注意：

  1. 都不支持网络图片
  2. 当 position 为 top 时，不显示 icon

四、页面配置

1. app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现；

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

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

注： 页面配置详细文档

---

总结

Sow nothing, reap nothing.