在上一文中学习开发小程序的起航日记，我们准备好了开发小程序时所需的环境和准备工作，同时也简单的了解了一下小程序的项目结构组成。
这一章，我们主要对小程序的配置文件进行学习。

小程序_配置文件

1.json

JSON 是一种轻量级的数据格式，常用于前端、后端数据的交互。但在小程序中，JSON起到的是配置项的作用，用于配置项目或者页面属性的行为，每个页面或组件也都有一个对应的 json 文件。

---

2.app.json

小程序全局配置文件，用于配置小程序的一些全局属性和页面路由。

pages 属性

还记得在一章节中，我们是怎么创界新界面的吗？

就是在 app.json：“pages” 属性中添加代码之后，新的页面文件会随之在相应路径下生成。

是的！pages 属性就是用于存放页面路由的，

但在配置时有以下需要注意：

1. 页面路由不需要写文件后缀，框架会自动去寻找对应位置的四个文件进行处理
2. 在小程序中新增、删除页面，都需要对 pages 数组进行修改
3. 如果未指定 entryPagePath 时，数组的第一项路径则代表小程序的初始界面

如：

{"entryPagePath": "pages/index/index","pages": ["pages/index/index","pages/t_one/t_one"],"window": {"navigationBarTextStyle": "black","navigationStyle": "custom"},"style": "v2","sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents"
}

这段代码就是由于页面过多直接通过entryPathPath属性设置小程序的首页界面，
不设置该属性的情况下，默认界面为 pages 属性中的第一行。

window 属性

该属性用于设置小程序的状态栏、导航条、窗口等。更多内容可查阅官方文档

小程序的官方文档链接

下述代码，我对界面进行了简单的设置：

  "window": {// 导航栏标题设置"navigationBarTitleText": "your_w 助理",// 导航栏背景色设置"navigationBarBackgroundColor": "#f3514f",// 添加刷新功能"enablePullDownRefresh": true,// 刷新时下拉框的背景色"backgroundColor": "#efefef",// 刷新时背景色亮度设置"backgroundTextStyle":"light"},

tabBar 属性

作用于小程序顶部、底部 tab 栏，用以实现页面之间的快速切换，可通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

我们先对 tabBar 有个基础概念的认识，然后通过其给人印象最深的一面开始入手。

就是实现快速页面切换，我根据自己理想中的小程序实现样子创建 4 个界面。

准备好了 tabBar 属性需要绑定的素材，我们先来绑定第一个界面：

//tabBar 属性和 pages、window 同级，且他是一个对象
"tabBar": {//在tabBar对象中设置 list数组"list": [//数组中的每项都是一个对象，我们最少要配置两个这样的对象//而我理想中的界面有四个，这里为了看代码方便就放了一个并注释，下面我会补上我设置的四个{//设置界面标题"text": "首页",//设置界面路径"pagePath": "pages/index/index",//设置界面图标素材路径"iconPath": "/assets/tabbar/index.png",//设置图标被点击时的响应素材路径"selectedIconPath": "/assets/tabbar/index.png"}]},

通过上述代码，我们清楚了 tarBar，而我理想中的小程序有4个界面，所以我还要配置三个，而且 tabBar最少要配置2两个，不然会出现报错信息。

"tabBar": {"list": [{"text": "首页","pagePath": "pages/index/index","iconPath": "/assets/tabbar/index.png","selectedIconPath": "/assets/tabbar/index.png"},{"text": "计划","pagePath": "pages/sked/sked","iconPath": "/assets/tabbar/sked.png","selectedIconPath": "/assets/tabbar/sked.png"},{"text": "记账","pagePath": "pages/tally/tally","iconPath": "/assets/tabbar/tally.png","selectedIconPath": "/assets/tabbar/tally.png"},{"text":"个人","pagePath": "pages/profile/profile","iconPath": "/assets/tabbar/profile.png","selectedIconPath": "/assets/tabbar/profile.png"}]},

上个代码块已经注释好了每个配置项的说明，这里不加注释了。

配置完的界面效果图：

哦！对了，我的四个图是我用windows自带的画板画完截下来的，因为在网上没有找到合适的用图。如果你需要，也可以像我这样。

最后，我微调了一下tabbar的颜色设置，为了简单明了一下，我只展示我设置的内容，如果你有更多的需要，可以通过上述分享的文档链接去查阅官方文档定义的 tabbar 属性的更多内容。

"tabBar": {"selectedColor": "#6666cc","color": "#666","list": [{"text": "首页","pagePath": "pages/index/index","iconPath": "/assets/tabbar/index.png","selectedIconPath": "/assets/tabbar/index.png"}]},

3.页面.json

小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口模式、页面标题等。

下面通过 .json 局部配置文件，设置一下我的第二个界面。

{"usingComponents": {},"navigationBarTitleText": "个人计划","navigationBarBackgroundColor": "#00AF92","enablePullDownRefresh": true,"backgroundTextStyle":"light"
}

4.project.config.json AND project.private.config.json

小程序项目的配置文件，用于保存项目的一些配置信息和开发者的个人信息。

创建项目后，每个项目根目录都会生成两个 config.json 文件，用于保存开发者在工具上做的个性化配置。

我们来看一下项目中的这两个文件：

project.confic.json：项目配置文件，常用来进行配置公共的配置

project.private.config.json：项目私有的配置，常用来配置个人的配置

就目前来说，我们不需要对两个文件有太多改动，暂时先用项目配置的默认值即可。但你要知晓：
如果需要对项目配置做出改动，且最终影响整个项目，你就针对 project.confic.json 文件去做改动，因为该文件会影响项目全局配置的最终结果。
而如果你只想改动一些局部设置，而不是整个项目的配置随之变动，就改动project.private.config.json文件即可。
真是如上两个加粗字体所释了。

这里，我们再在小程序项目里集成一个 sass语言。

在全局配置文件的 setting属性 下添加：

"useCompilerPlugins": ["sass"],

如果你加上这个会报错，说明你的 微信开发者 中没有加入Easy sass 插件。

你需要下载 vscode，因为插件是从这个软件中下在到的。

下在好之后，更该一下插件的文件：

然后，提示的报错消失了。说明你可以正常导入了。

然后随便找一个页面测试一下：

这就一行代码。直接上图了。

5.sitemap.json

配置小程序及其页面是否允许被微信索引，提高小程序在搜索引擎搜索到的概率。