[TOC] ## 1.1 JSON配置——`*.json`文件 JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演静态配置的角色。 根目录中的`app.json`文件为项目的公共配置文件。 代码清单2-1 app.json文件代码 ~~~ { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } } ~~~ JSON文件在小程序代码中扮演静态配置的作用，在小程序运行之前就决定了小程序一些表现，但无法在运行过程中去动态更新JSON 配置文件从而发生对应的变化。 JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。 JSON的值只能是以下几种数据格式： - **数字**，包含浮点数和整数 - **字符串**，需要包裹在双引号中 - **Bool值**，true 或者 false - **数组**，需要包裹在方括号中 [ ] - **对象**，需要包裹在大括号中 { } - **Null** >[danger] 其他任何格式都会触发报错，例如 JavaScript 中的 undefined 。 >[danger] JSON 文件中无法使用注释，试图添加注释将会引发报错。 ### 1.1.1 全局配置--`app.json` `app.json`文件用来对微信小程序进行全局配置，决定小程序各个页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。[【官方文档详细说明】](https://developers.weixin.qq.com/miniprogram/dev/framework/config.html) :-: app.json 配置项列表 | 属性 | 类型 | 必填 | 描述 | |--- | --- |--- | --- | | pages | String Array | 是 | 设置页面路径 | | window | Object | 否 | 设置默认页面的窗口表现 | | tabBar | Object | 否 | 设置底部 tab 的表现 | | networkTimeout | Object | 否 | 设置网络超时时间 | | debug | Boolean | 否 | 设置是否开启 debug 模式 | 代码清单3-7 app.json包含了所有配置选项。默认pages字段的第一个页面路径为小程序的首页。 ~~~ { "pages": [ "pages/index/index", // 第一项默认为首页 "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile":10000 }, "debug": true } ~~~ * **`pages`** 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。**小程序中新增/减少页面，都需要对 pages 数组进行修改**。文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。 * **`window`** 用于设置小程序的状态栏、导航条、标题、窗口背景色。 :-:  ~~~ { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" } } ~~~ * **`tabBar`** 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。 :-:  属性说明： | 属性 | 类型 | 必填 | 默认值 | 描述 | | --- | --- | --- | --- | --- | | color | HexColor | 是 | | tab 上的文字默认颜色 | | selectedColor | HexColor | 是 | | tab 上的文字选中时的颜色 | | backgroundColor | HexColor | 是 | | tab 的背景色 | | color | HexColor | 是 | | tab 上的文字默认颜色 | | borderStyle | String | 否 | black | tabbar上边框的颜色， 仅支持 black/white| | list | Array | 是 | | tab 的列表，详见 list 属性说明，最少2个、最多5个 tab| | position | String | 否 | bottom | 可选值 bottom、top| 其中 `list` 接受一个数组，数组中的每个项都是一个对象，其属性值如下： | 属性 | 类型 | 必填 | 说明 | | --- | --- | --- | --- | | pagePath | String | 是 | 页面路径，必须在 pages 中先定义 | | text | String | 是 | tab 上按钮文字 | iconPath | String | 否 | 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片 | | selectedIconPath | String | 否| 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效，不支持网络图片 | * **`networkTimeout`** 可以设置各种网络请求的超时时间。 属性说明： | 属性 | 类型 | 必填 | 说明 | | --- | --- | --- | --- | | request | Number | 否 | wx.request的超时时间，单位毫秒，默认为：60000 | | connectSocket | Number | 否 | wx.connectSocket的超时时间，单位毫秒，默认为：60000 | | uploadFile | Number | 否 | wx.uploadFile的超时时间，单位毫秒，默认为：60000 | | downloadFile | Number | 否 | wx.downloadFile的超时时间，单位毫秒，默认为：60000| * **`debug`** 可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。 ### 1.1.2 页面配置 每一个小程序页面使用`.json`文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。 页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，如： | 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色，如"#000000" | | navigationBarTextStyle | String | white | 导航栏标题颜色，仅支持 black/white | | navigationBarTitleText | String | 导航栏标题文字内容 | | backgroundColor | HexColor | #ffffff | 窗口的背景色 | | backgroundTextStyle | String| dark | 下拉 loading 的样式，仅支持 dark/light | | enablePullDownRefresh | Boolean | false | 是否开启下拉刷新，详见页面相关事件处理函数。 | | disableScroll | Boolean | false | 设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项| | onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为px | 例如： ~~~ { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" } ~~~ ### 1.1.3 工具配置--`project.config.json` [【官方文档】](https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html) 通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。 考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个`project.config.json`，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。