项目里边生成了不同类型的文件:
-
.json后缀的JSON配置文件 -
.wxml后缀的WXML模板文件 -
.wxss后缀的WXSS样式文件 -
.js后缀的JS脚本逻辑文件
JSON 配置
在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json
JSON配置的一些注意事项
语法：JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。
JSON的Key必须包裹在一个双引号中
JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。
- 数字，包含浮点数和整数
- 字符串，需要包裹在双引号中
- Bool值，true 或者 false
- 数组，需要包裹在方括号中 []
- 对象，需要包裹在大括号中 {}
- Null
还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。
小程序配置 app.json
小程序根目录下的 app.json，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
简单举例：
{
"pages": ["pages/index/index", "pages/logs/logs"],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
}
有以下属性：
配置项
属性 | 类型 | 必填 | 描述 | 最低版本 |
string[] | 是 | 页面路径列表 | | |
Object | 否 | 全局的默认窗口表现 | | |
Object | 否 | 底部 | | |
Object | 否 | 网络超时时间 | | |
boolean | 否 | 是否开启 debug 模式，默认关闭 | | |
boolean | 否 | 是否启用插件功能页，默认关闭 | ||
Object[] | 否 | 分包结构配置 | ||
string | 否 | Worker 代码放置的目录 | ||
string[] | 否 | 需要在后台使用的能力，如「音乐播放」 | | |
Object | 否 | 使用到的插件 | ||
Object | 否 | 分包预下载规则 | ||
boolean | 否 | iPad 小程序是否支持屏幕旋转，默认关闭 | ||
string[] | 否 | 需要跳转的小程序列表，详见 wx.navigateToMiniProgram | ||
Object | 否 | 全局自定义组件配置 | 开发者工具 1.02.1810190 | |
Object | 否 | 小程序接口权限相关设置 | 微信客户端 7.0.0 |
一些常用配置项详解
pages
用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。
文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。
window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
属性 | 类型 | 默认值 | 描述 | 最低版本 |
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色，如 | |
navigationBarTextStyle | string | white | 导航栏标题颜色，仅支持 | |
navigationBarTitleText | string | | 导航栏标题文字内容 | |
navigationStyle | string | default | 导航栏样式，仅支持以下值：
| 微信客户端 6.6.0 |
backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
backgroundTextStyle | string | dark | 下拉 loading 的样式，仅支持 | |
backgroundColorTop | string | #ffffff | 顶部窗口的背景色，仅 iOS 支持 | 微信客户端 6.5.16 |
backgroundColorBottom | string | #ffffff | 底部窗口的背景色，仅 iOS 支持 | 微信客户端 6.5.16 |
enablePullDownRefresh | boolean | false | 是否开启全局的下拉刷新。 | |
onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为px。 | |
pageOrientation | string | portrait | 屏幕旋转设置，支持 详见 响应显示区域变化 |
以及
tabBar
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
networkTimeout
各类网络请求的超时时间，单位均为毫秒。
debug等属性
完整配置项说明请参考小程序全局配置
以下是一个包含了部分常用配置选项的 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,
"navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}工具配置 project.config.json
针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等
你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
其他配置项细节可以参考文档 开发者工具的配置
页面配置 page.json
这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置
你可以在 app.json 里边声明一些统一公用的的属性
但是如果页面有特殊的要求，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
完整配置项说明请参考小程序页面配置
配置示例
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
