应用配置
小程序根目录下的 app.json
文件用来对传音小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。文件内容为一个 JSON 对象,有以下属性:
配置项
属性 | 类型 | 是否必填 | 描述 | 最低版本| |
---|---|---|---|---|
pages | Object | 是 | 设置页面路径。 | 1.0.0 |
window | Object | 否 | 全局的默认窗口表现 | 1.0.0 |
tabBar | Object | 否 | 底部 tab 栏的表现 | 1.0.0 |
handleTabBarLoad | String | 经度 | 可由开发者自行配置,支持动态加载 TabBar 样式,默认可不填或为 static。 - static:默认值。在 appConfig.json 中配置 tabBar 的信息,在页面首次渲染完成即加载完成。 -manual:由开发者通过调用 dlt.loadTabBar() 动态触发渲染 TabBar。 | 4.0.0 |
pages
用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json, .js, .dlt, .css 四个文件进行处理。 数组的第一项代表小程序的初始页面(首页)。 小程序中新增/减少页面,都需要对 pages 数组进行修改。 如开发目录为:
├── app.js
├── app.json
├── app.css
├── pages
│ │── index
│ │ ├── index.dlt
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.css
│ └── logs
│ ├── logs.dlt
│ └── logs.js
└── utils
则需要在 app.json 中写
{
"pages": ["pages/index/index", "pages/logs/logs"]
}
window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
属性 | 类型 | 是否必填 | 默认值 | 描述 | 最低版本 |
---|---|---|---|---|---|
enablePullDownRefresh | Boolean | 否 | false | 是否允许下拉刷新 | 1.0.0 |
enablePullUpRefresh | Boolean | 否 | false | 是否允许上拉刷新 | 1.0.0 |
enableTransparentStatusBar | Boolean | 否 | false | 是否开启透明 TitleBar 沉浸式状态栏 | 1.0.0 |
enableNavigationBarLoading | Boolean | 否 | true | 是否开否 TitleBar 加载进度条 | 1.0.0 |
navigationBarTitleText | String | 否 | 页面默认标题 | 1.0.0 | |
navigationStyle | String | 是 | 导航栏样式,支持的值参见下文 | ||
navigationBarBackgroundColor | HexColor | 是 | 导航栏及状态栏背景颜色,如 #FFFFFF | 1.0.0 | |
navigationBarTextStyle | String | 是 | 导航栏及状态栏文字颜色,仅支持 black /white | 1.0.0 | |
navigationBarIconStyle | String | 是 | 导航栏 icon 颜色类型,仅支持black /white | 1.0.0 | |
navigationBarHomeAction | String | 否 | home | 导航栏 Home 按钮动作,仅支持 home /back /all ,含义说明参见下文。 | |
refreshHeaderStyle | String | 否 | 刷新头样式 default: 默认样式 custom:自定义刷新头。 自定义刷新头必须满足传入 refreshHeaderCustomLoadingGif、refreshHeaderCustomSuccessGif、refreshHeaderCustomLoading、refreshHeaderCustomSuccess 四个属性且满足要求后才可成功,否则将使用默认刷新头。 | 1.0.0 | |
refreshHeaderCustomTextEnable | Boolean | 否 | 刷新文案是否展示。仅在自定义刷新头开启情况下有效。 | 1.0.0 | |
refreshHeaderCustomLoadingGif | String | 否 | 自定义刷新头加载动画,必须为 gif 图,且会循环播放。仅支持小程序包内图片。仅在自定义刷新头开启情况下有效。 | 1.0.0 | |
refreshHeaderCustomSuccessGif | String | 否 | 自定义刷新头成功动画,必须为 gif 图,且单次播放。仅支持小程序包内图片。仅在自定义刷新头开启情况下有效。 | 1.0.0 | |
refreshHeaderCustomLoading | String | 否 | 自定义刷新加载静态占位图。仅支持小程序包内图片。仅在自定义刷新头开启情况下有效。 | 1.0.0 | |
refreshHeaderCustomSuccess | String | 否 | 自定义刷新头成功静态占位图。仅支持小程序包内图片。仅在自定义刷新头开启情况下有效。 | 1.0.0 | |
refreshHeaderTranslationContent | Boolean | 否 | true | 内容视图拖动效果是否开启。内容视图开启容器层透明状态栏且内容视图禁止拖动的情况下,Header 刷新起始显示以状态栏高度为偏移量开始显示。 | 1.0.0 |
refreshHeaderAccentColor | HexColor | 否 | 刷新头文字颜色,开启刷新组件有效,如 #000000 | 1.0.0 | |
refreshHeaderBackgroundColor | HexColor | 否 | 刷新头背景颜色,开启刷新组件有效,如 #000000 | 1.0.0 | |
refreshHeaderDelayed | Number | 否 | 超时停止下拉刷新时间,默认不开启,大于 0 生效,单位 ms | 1.0.0 | |
refreshFooterAccentColor | HexColor | 否 | 刷新脚文字颜色,开启刷新组件有效,如 #000000 | 1.0.0 | |
refreshFooterBackgroundColor | HexColor | 否 | 刷新脚背景颜色,开启刷新组件有效,如 #000000 | 1.0.0 | |
refreshFooterDelayed | Number | 否 | 超时停止上拉刷新时间,默认不开启,大于 0 生效,单位 ms | 1.0.0 | |
contentBackgroundColor | HexColor | 否 | 主页背景颜色,如 #000000 | 1.0.0 | |
enablePageLoading | Boolean | 否 | false | 页面跳转 Loading。 | 1.0.0 |
enableTabBarAdjustPan | Boolean | 否 | false | 含 TabBar 页面,有输入标签,支持 TabBar 不被键盘顶起 | 4.1.0 |
darkModeNavigationBarBackgroundColor | HexColor | 否 | 暗黑模式下导航栏及状态栏背景颜色,如 #00000000 | 6.0.0 | |
darkModeNavigationBarTextStyle | String | 否 | 暗黑模式下导航栏及状态栏文字颜色,仅支持 black / white | 6.0.0 | |
darkModeNavigationBarIconStyle | String | 否 | 暗黑模式下导航栏 icon 颜色类型,仅支持 black / white | 6.0.0 | |
darkModeContentBackgroundColor | HexColor | 否 | 暗黑模式下主页背景颜色,如 #000000 | 6.0.0 |
- 注 1:HexColor(十六进制颜色值),如 "#ff00ff"
navigationBarHomeAction 支持值说明
支持的值 | 描述 | 最低版本 |
---|---|---|
home | 小房子按钮,点击时返回主页 | 1.0.0 |
back | 向左返回箭头,点击时仅返回一级 | 1.0.0 |
all | 显示返回与小房子胶囊体 | 1.0.0 |
navigationStyle 支持值说明
支持的值 | 描述 | 最低版本 |
---|---|---|
default | 默认样式 | 1.0.0 |
hide | 隐藏导航栏只保留胶囊体(该模式下 navigationBarTextStyle 、navigationBarIconStyle 不生效,包括对应 api 调用也不生效) | 3.0.0 |
custom | 自定义导航栏(仅有该状态下,enableTransparentStatusBar , navigationBarBackgroundColor , navigationBarTextStyle , navigationBarIconStyle 、navigationBarHomeAction ,才可生效,包括对应 api 调用) | 1.0.0 |
tabBar
属性 | 类型 | 是否必填 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|---|
color | HexColor | 是 | tab 上的文字默认颜色,仅支持十六进制颜色 | 1.0.0 | |
selectedColor | HexColor | 是 | tab 上的文字默认颜色,仅支持十六进制颜色 | 1.0.0 | |
backgroundColor | HexColor | 是 | tab 的背景色,仅支持十六进制颜色 | 1.0.0 | |
borderStyle | String | 否 | black | tabbar 上边框的颜色, 仅支持 black / white | 1.0.0 |
list | Array | 是 | tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab | 1.0.0 | |
position | String | 否 | bottom | tabBar 的位置,仅支持 bottom ,暂时不支持 top | 1.0.0 |
custom | Boolean | 否 | false | 自定义 tabBar ,暂时不支持自定义 | 1.0.0 |
list 属性说明 其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:
属性 | 类型 | 是否必填 | 说明 |
---|---|---|---|
pagePath | String | 是 | 页面路径,必须在 pages 中先定义 |
text | String | 是 | tab 上按钮文字 |
iconPath | String | 否 | 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,支持网络图片。当 position 为 top 时,不显示 icon。 |
selectedIconPath | String | 否 | 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,支持网络图片。当 position 为 top 时,不显示 icon。 |
配置示例
{
"pages": ["pages/components/components", "pages/api/api", "pages/case/case"],
"window": {
"navigationBarTitleText": "MiniApp Official Demo",
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "white",
"navigationStyle": "default",
"enablePullDownRefresh": false,
"enablePullUpRefresh": false,
"enableAddScreen": false,
"enableNavigationBarLoading": false,
"darkModeNavigationBarBackgroundColor": "#000000",
"darkModeNavigationBarTextStyle": "white",
"darkModeNavigationBarIconStyle": "white",
"darkModeContentBackgroundColor": "#000000"
},
"tabBar": {
"list": [
{
"pagePath": "pages/components/components",
"text": "Components",
"iconPath": "images/component_normal.png",
"selectedIconPath": "images/component_selected.png"
},
{
"pagePath": "pages/api/api",
"text": "API",
"iconPath": "images/api_normal.png",
"selectedIconPath": "images/api_selected.png"
},
{
"pagePath": "pages/case/case",
"text": "Our Product",
"iconPath": "images/smtui_normal.png",
"selectedIconPath": "images/smtui_selected.png"
}
],
"backgroundColor": "#ffffff",
"borderStyle": "white",
"color": "#92969e",
"selectedColor": "#191f2b",
"position": "bottom",
"custom": false
}
}