全局配置
小程序根目录下的 app.json 文件用来对 bilibili 小程序进行全局配置。文件内容为一个 JSON 对象,有以下属性:
配置项
| 属性 | 类型 | 必填 | 描述 | 最低版本 |
|---|---|---|---|---|
| pages | string[] | 是 | 页面路径列表 | |
| window | Object | 否 | 全局的默认窗口表现 | |
| tabBar | Object | 否 | 底部 tab 栏的表现 | |
| networkTimeout | Object | 否 | 网络超时时间 | |
| darkmode | boolean | 否 | 小程序支持 DarkMode | 3.8.0 |
| darkConfig | object | 否 | darkMode 的配置 | 3.8.0 |
pages
用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json, .js, .blml, .blss 四个文件进行处理。
小程序中新增/减少页面,都需要对 pages 数组进行修改。
如开发目录为:
├── app.js
├── app.json
├── app.blss
├── pages
│ │── index
│ │ ├── index.blml
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.blss
│ └── logs
│ ├── logs.blml
│ └── logs.js
└── utils
则需要在 app.json 中写
{
"pages": ["pages/index/index", "pages/logs/logs"]
}
window
全局设置小程序的状态栏、导航条、标题、窗口背景色等。
| 属性 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| navigationStyle | string | default | 导航栏样式,仅支持以下值:default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮。参见注 2。 | |
| enableScrollEvent | boolean | false | 是否触发页面滚动相关的事件,如onPageScroll和onReachBottom | |
| navigationBarBackgroundColor | string | #fb7299 | 导航栏背景颜色 | |
| navigationBarTextStyle | string | white | 导航栏标题和状态栏文字颜色,仅支持 black / white | |
| navigationBarTitleText | string | 导航栏标题文字内容 | ||
| backgroundColor | string | #ffffff | 窗口的背景色 | |
| enablePullDownRefresh | boolean | false | 是否全局开启下拉刷新。 | |
| onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为 px。 | |
| disableScroll | boolean | false | 设置为 true 则 webview 整体不能上下滚动,不考虑前端实现的滚动 |
注:以上属性也可配置在 pages 的每个对象里,只对配置的 page 页面生效,并会覆盖 window 下的对应的属性配置
tabBar
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
开发者注意:
tabBar 承载的页面,一定有 NavigationBar,且 page 中声明的设定除 hasNavigationBar 之外均有效,如果 page 中未声明 NavigationBar 的设定,则继承 window 中的声明。
tabBar 只支持 2-5 个 Tab,不足 2 个 Tab,则不生成 tabBar(相当于没有配置 tabBar),超过 5 个,取 tabBar 的 list 前 5 个 Tab 展示。
需通过 bl.switchTab 才能跳转到 TabBar 中承载的页面,bl.navigateTo 不起作用。
| 属性 | 类型 | 必填 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| color | string | 否 | #000000 | tab 上的文字默认颜色 | |
| selectedColor | string | 否 | #fb7299 | tab 上的文字选中时的颜色 | |
| backgroundColor | string | 否 | #ffffff | tabBar 的背景色 | |
| borderStyle | string | 否 | black | tabbar 边框的颜色,如果为空则无边框。如果 position 是 bottom,边框在上,position 是 top,边框在下,需要支持 HexColor 和 black/white 两个特殊颜色配置。边框是 1 物理像素的细线。 | |
| list | array | 是 | tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab,默认选中第一个 tab | ||
| position | string | 否 | bottom | tabBar 的位置,仅支持 bottom/top。如果当前页面有 navigationBar,position 为 top 时,tabBar 在 navigationBar 下方 |
其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:
| 属性 | 类型 | 必填 | 说明 | 版本 |
|---|---|---|---|---|
| pagePath | string | 是 | 页面路径,必须在 pages 中先定义 | |
| text | string | 是 | tab 上按钮文字,超出显示范围截断 | |
| iconPath | string | 否 | 图片路径,图片需放在根目录的 static 目录下,写法为'/static/path',icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 postion 为 top 时,不显示 icon。 | |
| selectedIconPath | string | 否 | 选中时的图片路径,图片需放在根目录的 static 目录下,写法为'/static/path',icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 postion 为 top 时,不显示 icon。 |
networkTimeout
各类网络请求的超时时间,单位均为毫秒。
| 属性 | 类型 | 必填 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|---|
| request | number | 否 | 60000 | bl.request 的超时时间,单位毫秒。 | |
| uploadFile | number | 否 | 60000 | bl.uploadFile 的超时时间,单位毫秒。 | |
| downloadFile | number | 否 | 60000 | bl.downloadFile 的超时时间,单位毫秒。 |
darkmode
开发者工具 1.03.2004271 及以上版本支持,基础库 2.11.0 及以上版本支持
bilibiliiOS 客户端 7.0.12 版本、Android 客户端 7.0.13 版本正式支持 DarkMode,可通过配置"darkmode": true表示当前小程序可适配 DarkMode,所有基础组件均会根据系统主题展示不同的默认样式,navigation bar 和 tab bar 也会根据开发者的配置自动切换。
配置后,请根据DarkMode 适配指南自行完成基础样式以外的适配工作。
{
"darkmode": true
}
darkConfig(3.8.0 起支持)
夜间模式的详细配置。
| 属性 | 类型 | 必填 | 说明 | 版本 |
|---|---|---|---|---|
| pages | array | 否 | 夜间主题下页面路径列表以及页面级别配置信息 | 3.8.0 |
| window | object | 否 | 夜间主题下全局的默认窗口表现 | 3.8.0 |
| tabBar | object | 否 | 夜间主题下 TabBar 的设置 | 3.8.0 |
Tips
- 如果 声明了
"darkmode":true,bl.getSystemInfo或bl.getSystemInfoSync的返回结果中会包含theme属性,值为light或dark。 - 如果 未声明
"darkmode":true,则无法获取到theme属性。 - 如果配置了
pages,pages的可配置属性包括:path,navigationBarBackgroundColor,navigationBarTextStyle,backgroundColor,backgroundColorTop,backgroundColorBottom。其中path为必填。 - 如果配置了
window,window的可配置属性包括:navigationBarBackgroundColor,navigationBarTextStyle,backgroundColor,backgroundColorTop,backgroundColorBottom。 - 如果配置了
tabBar,tabBar的可配置属性包括:color,selectedColor,backgroundColor,borderStyle,list。如果配置了list, 则list的pagePath为必填。