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

一、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 配置项列表属性 pages String Array 设置页面路径 window Object 设置默认页面的窗口表现 tabBar Object 设置底部 tab 的表现 networkTimeout Object 设置网络超时时间 debug Boolean 设置是否开启 debug 模式 pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

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

如开发目录为：

pages/pages/index/index.wxmlpages/index/index.jspages/index/index.wxsspages/logs/logs.wxmlpages/logs/logs.jsapp.jsapp.jsonapp.wxss

则需要在 app.json 中写

{
 pages :[
 pages/index/index ,
 pages/logs/logs 
}

window

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

属性 最低版本 navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如"#000000" navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/white navigationBarTitleText String 导航栏标题文字内容 navigationStyle String default 导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮 微信版本 6.6.0 backgroundColor HexColor #ffffff 窗口的背景色 backgroundTextStyle String dark 下拉 loading 的样式，仅支持 dark/light backgroundColorTop String #ffffff 顶部窗口的背景色，仅 iOS 支持 微信版本 6.5.16 backgroundColorBottom String #ffffff 底部窗口的背景色，仅 iOS 支持 微信版本 6.5.16 enablePullDownRefresh Boolean false 是否开启下拉刷新，详见页面相关事件处理函数 onReachBottomDistance Number 页面上拉触底事件触发时距页面底部距离，单位为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 按数组的顺序排序。

属性说明：

属性 color HexColor tab 上的文字默认颜色 selectedColor HexColor tab 上的文字选中时的颜色 backgroundColor 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的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。

page.json

每一个小程序页面也可以使用.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 页面上拉触底事件触发时距页面底部距离，单位为px

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

相关文章：

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

微信小程序的配置

相关视频：

App.json全局配置文件详解-微信小程序开发视频教程

以上就是详细讲解小程序代码构成中的json 后缀的 JSON 配置文件的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。