详细讲解小程序代码构成中的json 后缀的 JSON 配置文件

微信小程序代码由以下四类文件构成：

.json 后缀的 JSON 配置文件

.wxml 后缀的 WXML 模板文件

wxss 后缀的 WXSS 样式文件

.js 后缀的 JS 脚本逻辑文件一、JSON 配置我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下他们的用途。

小程序配置 app.json

app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"}}我们简单说一下这个配置各个项的含义:

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。

工具配置 project.config.json

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。配置细节app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

以下是一个包含了所有配置选项的 app.json ：{"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}app.json 配置项列表属性类型必填描述pagesString Array是设置页面路径windowObject否设置默认页面的窗口表现tabBarObject否设置底部 tab 的表现networkTimeoutObject否设置网络超时时间debugBoolean否设置是否开启 debug 模式pages接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。

如开发目录为：

则需要在 app.json 中写{"pages":["pages/index/index","pages/logs/logs"]}window用于设置小程序的状态栏、导航条、标题、窗口背景色。属性类型默认值描述最低版本navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如"#000000" navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black/white navigationBarTitleTextString 导航栏标题文字内容 navigationStyleStringdefault导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮微信版本 6.6.0backgroundColorHexColor#ffffff窗口的背景色 backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark/light backgroundColorTopString#ffffff顶部窗口的背景色，仅 iOS 支持微信版本 6.5.16backgroundColorBottomString#ffffff底部窗口的背景色，仅 iOS 支持微信版本 6.5.16enablePullDownRefreshBooleanfalse是否开启下拉刷新，详见页面相关事件处理函数 onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位为px注：HexColor（十六进制颜色值），如"#ff00ff"

注：navigationStyle 只在 app.json 中生效。开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用） 可方便切到旧视觉

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

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

Tip：

当设置 position 为 top 时，将不会显示 icon

tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性说明：属性类型必填默认值描述colorHexColor是 tab 上的文字默认颜色selectedColorHexColor是 tab 上的文字选中时的颜色backgroundColorHexColor是 tab 的背景色borderStyleString否blacktabbar上边框的颜色， 仅支持 black/whitelistArray是 tab 的列表，详见 list 属性说明，最少2个、最多5个 tabpositionString否bottom可选值 bottom、top其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：属性类型必填说明pagePathString是页面路径，必须在 pages 中先定义textString是tab 上按钮文字iconPathString否图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片selectedIconPathString否选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效networkTimeout

可以设置各种网络请求的超时时间。

属性说明：属性类型必填说明requestNumber否wx.request的超时时间，单位毫秒，默认为：60000connectSocketNumber否wx.connectSocket的超时时间，单位毫秒，默认为：60000uploadFileNumber否wx.uploadFile的超时时间，单位毫秒，默认为：60000downloadFileNumber否wx.downloadFile的超时时间，单位毫秒，默认为：60000debug可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。page.json每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，如：属性类型默认值描述navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如"#000000"navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black/whitenavigationBarTitleTextString 导航栏标题文字内容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark/light enablePullDownRefreshBooleanfalse是否开启下拉刷新，详见页面相关事件处理函数。disableScrollBooleanfalse设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位为px{"navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "微信接口功能演示","backgroundColor": "#eeeeee","backgroundTextStyle": "light"}相关文章：

微信小程序 教程之小程序配置

微信小程序的配置

相关视频：

App.json全局配置文件详解-微信小程序开发视频教程以上就是详细讲解小程序代码构成中的json 后缀的 JSON 配置文件的详细内容，更多请关注小潘博客其它相关文章！