微信小程序配置文件详解
全局配置文件 app.json
全局配置概述
配置项
| 属性 | 类型 | 必填 | 描述 | 最低版本 |
|---|---|---|---|---|
| entryPagePath | string | 否 | 小程序默认启动首页 | |
| 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 | 否 | PC 小程序是否支持用户任意改变窗口大小（包括最大化窗口）；iPad 小程序是否支持屏幕旋转。默认关闭 | 2.3.0 |
| usingComponents | Object | 否 | 全局自定义组件配置 | 开发者工具 1.02.1810190 |
| permission | Object | 否 | 小程序接口权限相关设置 | 微信客户端 7.0.0 |
| sitemapLocation | string | 是 | 指明 sitemap.json 的位置 | |
| style | string | 否 | 指定使用升级后的weui样式 | 2.8.0 |
| useExtendedLib | Object | 否 | 指定需要引用的扩展库 | 2.2.1 |
| entranceDeclare | Object | 否 | 微信消息用小程序打开 | 微信客户端7.0.9 |
| darkmode | boolean | 否 | 小程序支持 DarkMode | 2.11.0 |
| themeLocation | string | 否 | 指明 theme.json 的位置，darkmode为true为必填 | 开发者工具 1.03.2004271 |
| lazyCodeLoading | string | 否 | 配置自定义组件代码按需注入 | 2.11.1 |
| singlePage | Object | 否 | 单页模式相关配置 | 2.12.0 |
| restartStrategy | string | homePage | 重新启动策略配置 | 2.8.0 |
大概结构如下：
{
"pages": [...],
"window": {...},
"tabBar":{...},
"..." ,
"sitemapLocation": "sitemap.json"
}
}
以下是常用的字段介绍。
pages字段
- 位置：
app.json文件中 - 作用: 用来调整页面显示的顺序，以及要显示的页面。
- 技巧: 可以用来创建新的文件夹及里面的所有文件
"pages": [
"index/index"
"dome1/dome1" 创建新的文件夹DOME1 里面会自动再创建DOME1.js .wxml .wxss .json
],
windos字段
- 位置：
app.json文件中 - 作用： 用于设置小程序的状态栏、导航条、标题、窗口背景色。
- 可在微信官方文档查阅相关内容
| 属性 | 类型 | 默认值 | 描述 | 最低版本 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色，如 #000000 | |
| navigationBarTextStyle | string | white | 导航栏标题颜色，仅支持 black / white | |
| navigationBarTitleText | string | 导航栏标题文字内容 | ||
| navigationStyle | string | default | 导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。参见注 2。 | iOS/Android 微信客户端 6.6.0，Windows 微信客户端不支持 |
| 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) |
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
tabbar字段
- 位置：
app.json文件中 - 作用：设置底部导航栏
- 属性类型必填默认值描述最低版本colorHexColor是tab 上的文字默认颜色，仅支持十六进制颜色selectedColorHexColor是tab 上的文字选中时的颜色，仅支持十六进制颜色backgroundColorHexColor是tab 的背景色，仅支持十六进制颜色borderStylestring否blacktabbar 上边框的颜色， 仅支持
black/whitelistArray是tab 的列表，详见list属性说明，最少 2 个、最多 5 个 tabpositionstring否bottomtabBar 的位置，仅支持bottom/topcustomboolean否false自定义 tabBar，见详情2.5.0 - List:
* pagePath 点击底部导航栏跳转的页面路径
* text 底部导航栏的文字
* iconPath 图标路径，为未选中时的图标路径 如图第二个
* selectedIconPath 图标路径，为选中时的图标路径 如图第一个
两个按钮的底部导航栏设置：
"tabBar":{
"list": [
{
"pagePath": "page/component/index", //对话页面的路径
"text": "对话",
"iconPath":"icon/dalog.png", //图标路径
"selectedIconPath":"路径"
},
{
"pagePath": "page/API/index", //设置页面的路径
"text": "设置",
"iconPath":"路径",
"selectedIconPath":"路径"
}
]
}
注意：list 中至少有两个项，最多支持5个。
- color 、selectedColor 、backgroundColor、borderStyle、position
以上属性和list同级
* color:tabBar上未选中字体的颜色
* selectedColor： tabBar上选中的字体的颜色
* backgroundColor：tabBar背景的颜色
* borderStyle：tabBar边框颜色
* position:规定tabBar是在页面顶部显示还是在页面底部显示，顶部显示只显示文字，图表不显示
"tabBar":{
"list":[{...}],
"color":"#0094ff", //以下颜色设置均只支持十六进制颜色
"selectedColor":"#004359",
"backgroundColor":"#320095",
"borderStyle":"#556677",
"position":"top\bottom"
}
页面配置文件 page.josn
- 作用：
①控制本页面的导航栏样式
②下拉刷新样式等
③一些其他配置
sitemap 配置
- 作用：配置小程序及其页面是否可以被微信索引
- 链接： sitemap 配置 | 微信开放文档 (qq.com)
将要发布时可以看看。
