小程序2-基本架构讲解(一)JSON配置与详解

时间:2021-01-04 09:57:43

小程序2-基本架构讲解(一)JSON配置与详解

项目里边生成了不同类型的文件:

  1. .json 后缀的 JSON 配置文件
  2. .wxml 后缀的 WXML 模板文件
  3. .wxss 后缀的 WXSS 样式文件
  4. .js 后缀的 JS 脚本逻辑文件

JSON 配置

在项目的根目录有一个 app.json 和 project.config.json,此外在 pages/logs 目录下还有一个 logs.json


JSON配置的一些注意事项

语法:JSON文件都是被包裹在一个大括号中 {},通过key-value的方式来表达数据。

JSON的Key必须包裹在一个双引号中

JSON的值只能是以下几种数据格式,其他任何格式都会触发报错,例如 JavaScript 中的 undefined。

  1. 数字,包含浮点数和整数
  2. 字符串,需要包裹在双引号中
  3. Bool值,true 或者 false
  4. 数组,需要包裹在方括号中 []
  5. 对象,需要包裹在大括号中 {}
  6. Null

还需要注意的是 JSON 文件中无法使用注释,试图添加注释将会引发报错。


小程序配置 app.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

简单举例:

{
"pages": ["pages/index/index", "pages/logs/logs"],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
}

有以下属性:

配置项

属性 类型 必填 描述 最低版本
pages string[] 页面路径列表  
window Object 全局的默认窗口表现  
tabBar Object 底部 tab 栏的表现  
networkTimeout Object 网络超时时间  
debug boolean 是否开启 debug 模式,默认关闭  
functionalPages boolean 是否启用插件功能页,默认关闭 2.1.0
subpackages Object[] 分包结构配置 1.7.3
workers string Worker 代码放置的目录 1.9.90
requiredBackgroundModes string[] 需要在后台使用的能力,如「音乐播放」  
plugins Object 使用到的插件 1.9.6
preloadRule Object 分包预下载规则 2.3.0
resizable boolean iPad 小程序是否支持屏幕旋转,默认关闭 2.3.0
navigateToMiniProgramAppIdList string[] 需要跳转的小程序列表,详见 wx.navigateToMiniProgram 2.4.0
usingComponents Object 全局自定义组件配置 开发者工具 1.02.1810190
permission Object 小程序接口权限相关设置 微信客户端 7.0.0

一些常用配置项详解

pages

用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。

文件名不需要写文件后缀,框架会自动去寻找对于位置的 .json.js.wxml.wxss 四个文件进行处理。

数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改。

小程序2-基本架构讲解(一)JSON配置与详解

小程序2-基本架构讲解(一)JSON配置与详解

window

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

属性 类型 默认值 描述 最低版本
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如 #000000  
navigationBarTextStyle string white 导航栏标题颜色,仅支持 black / white  
navigationBarTitleText string   导航栏标题文字内容  
navigationStyle string default 导航栏样式,仅支持以下值:
default 默认样式
custom 自定义导航栏,只保留右上角胶囊按钮。参见注2。
微信客户端 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 是否开启全局的下拉刷新。
详见 Page.onPullDownRefresh
 
onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离,单位为px。
详见 Page.onReachBottom
 
pageOrientation string portrait 屏幕旋转设置,支持 auto / portrait / landscape 
详见 响应显示区域变化
2.4.0 (auto) / 2.5.0 (landscape)

以及

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"
}