在上一文中学习开发小程序的起航日记，我们准备好了开发小程序时所需的环境和准备工作，同时也简单的了解了一下小程序的项目结构组成。
这一章，我们主要对小程序的配置文件进行学习。
文章目录
- 小程序_配置文件
- 1.json
- 2.app.json
- pages 属性
- window 属性
- tabBar 属性
- 3.页面.json
- 4.project.config.json AND project.private.config.json
- 5.sitemap.json
小程序_配置文件
1.json
JSON 是一种轻量级的数据格式，常用于前端、后端数据的交互。但在小程序中，JSON起到的是配置项的作用，用于配置项目或者页面属性的行为，每个页面或组件也都有一个对应的 json 文件。
2.app.json
小程序全局配置文件，用于配置小程序的一些全局属性和页面路由。
pages 属性
还记得在一章节中，我们是怎么创界新界面的吗？
就是在 app.json：“pages” 属性中添加代码之后，新的页面文件会随之在相应路径下生成。
是的！pages 属性就是用于存放页面路由的，
但在配置时有以下需要注意：
- 页面路由不需要写文件后缀，框架会自动去寻找对应位置的四个文件进行处理
- 在小程序中新增、删除页面，都需要对 pages 数组进行修改
- 如果未指定 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
配置小程序及其页面是否允许被微信索引，提高小程序在搜索引擎搜索到的概率。
