微信小程序学习（一）：配置文件

1、配置文件介绍

小程序中常见的配置文件有以下几种：

• 全局配置文件 app.json ：小程序全局配置文件，用于配置小程序的一些全局属性和页面路由。
• 局部配置文件 页面.json ：小程序页面配置文件，用于配置当前页面的窗口样式、页面标题等。
• 项目配置文件 project.config.json： 小程序项目的配置文件，用于保存项目的一些配置信息和开发者的个人设置。
• 搜索配置文件 sitemap.json： 配置小程序及其页面是否允许被微信索引，提高小程序在搜索引擎搜索到的概率。
• 🔗小程序配置官方文档

具体用途如下。

2、全局配置文件

• 小程序app.json文件是小程序的全局配置文件，用于配置小程序的一些全局属性和页面路由。
• 当小程序启动时，会自动读取app.json文件中的配置，根据配置生成对应的页面和组件、界面表现、网络超时时间、底部tab，在小程序运行过程中起着关键的作用。
• 🔗全局配置官方文档
• 具体字段：

2.1 pages

pages字段：用于指定小程序由哪些页面组成，用于为了让小程序知道由哪些页面组成以及页面定义在哪个目录，每一项都对应一个页面的 路径（含文件名） 信息。

{
  "pages": [
    "pages/index/index",
    "pages/list/list"
  ]
}

注意事项：

• 文件名不需要写文件后缀框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理
• 小程序中新增/减少页面，都需要对pages数组进行修改。
• 未指定entryPagePath时，数组的第一项代表小程序的初始页面（首页）

2.2 window

• window字段： 用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性	类型	描述	默认值
navigationBarBackgroundColor	HexColor	导航栏背景颜色	#000000
navigationBarTextStyle	string	导航栏标题、状态栏颜色，仅支持 black / white	white
navigationBarTitleText	string	导航栏标题文字内容
backgroundColor	HexColor	窗口的背景色	#ffffff
enablePullDownRefresh	boolean	是否开启全局的下拉刷新。详见Page.onPullDownRefresh	false
onReachBottomDistance	number	页面上拉触底事件触发时距页面底部距离，单位为 px。详见Page.onReachBottom	50
如：

{
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

• 🔗全局配置：window官方文档

2.3 tabBar

• tabBar字段：定义小程序顶部、底部 tab 栏。如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性	类型	描述	必填	默认值
color	HexColor	tab 上的文字默认颜色，仅支持十六进制颜色	是
selectedColor	HexColor	tab 上的文字选中时的颜色，仅支持十六进制颜色	是
backgroundColor	HexColor	tab 的背景色，仅支持十六进制颜色	是
borderStyle	string	tabbar 上边框的颜色， 仅支持 black / white	否	black
list	Array	tab 的列表，详见 list 属性说明（表格下方），最少 2 个、最多 5 个 tab	是
position	string	tabBar 的位置，仅支持 bottom / top	否	bottom
custom	boolean	自定义 tabBar，见详情	否	false

• 其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。

如：

{
  "tabBar": {
    "color": "#252933",
    "selectedColor": "#FF734C",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "text": "首页",
        "iconPath": "/assets/tabbar/home.png",
        "selectedIconPath": "/assets/tabbar/home-active.png",
        "pagePath": "pages/home/home"
      },
      {
        "text": "列表",
        "iconPath": "/assets/tabbar/list.png",
        "selectedIconPath": "/assets/tabbar/list-active.png",
        "pagePath": "pages/list/list"
      },
      {
        "text": "购物车",
        "iconPath": "/assets/tabbar/cart.png",
        "selectedIconPath": "/assets/tabbar/cart-active.png",
        "pagePath": "pages/cart/cart"
      },
      {
        "text": "我的",
        "iconPath": "/assets/tabbar/my.png",
        "selectedIconPath": "/assets/tabbar/my-active.png",
        "pagePath": "pages/my/my"
      }
    ]
  }
}

• 🔗全局配置：tabBar官方文档

3、页面配置

• app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。
• 页面中配置项在当前页面会覆盖 app.json 中相同的配置项（样式相关的配置项属于 app.json 中的 window属性，但这里不需要额外指定 window字段），具体的取值和含义可参考全局配置文档中说明。
• 🔗页面配置官方文档

如：

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

4、项目配置文件

• project.config.json 文件中配置公共的配置
• project.private.config.json 配置个人配置
  • project.private.config.json 文件同样可以对项目进行配置
  • project.private.config.json中的相同设置优先级高于project.config.json
• 与最终编译结果有关的设置必须设置到 project.config.json 中
• 🔗项目配置文件官方文档

5、搜索配置文件

• 微信现已开放小程序内搜索，开发者可以通过 sitemap.json配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。
• 小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引。
• 🔗搜索配置文件官方文档