支付宝小程序框架 app.json 全局配置
2020-09-18 10:15 更新
app.json
用于对小程序进行全局配置,设置页面文件的路径、窗口表现、多 tab 等。
以下是一个基本配置示例:
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"defaultTitle": "Demo"
}
}
完整配置项如下:
属性 | 类型 | 是否必填 | 描述 |
---|---|---|---|
pages | Array | 是 | 设置页面路径 |
window | Object | 否 | 设置默认页面的窗口表现 |
tabBar | Object | 否 | 设置底部 tabbar 的表现 |
pages
app.json
中的 pages
为数组属性,数组中每一项都是字符串,用于指定小程序的页面。在小程序中新增或删除页面,都需要对 pages
数组进行修改。
pages
数组的每一项代表对应页面的路径信息,其中,第一项代表小程序的首页。
页面路径不需要写任何后缀,框架会自动去加载同名的 .json
、.js
、.axml
、.acss
文件。举例来说,如果开发目录为:
├── pages
│ ├──index
│ │ ├── index.json
│ │ ├── index.js
│ │ ├── index.axml
│ │ └── index.acss
│ ├──logs
│ │ ├── logs.json
│ │ ├── logs.js
│ │ └── logs.axml
├── app.json
├── app.js
└── app.acss
app.json
中应当如下配置:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
window
window
用于设置小程序的状态栏、导航条、标题、窗口背景色等。
示例代码:
{
"window":{
"defaultTitle": "支付宝接口功能演示"
}
}
属性 | 类型 | 是否必填 | 描述 | 最低版本 |
---|---|---|---|---|
defaultTitle | String | 否 | 页面默认标题。 | - |
pullRefresh | Boolean | 否 | 是否允许下拉刷新,默认 true 。说明:下拉刷新生效的前提是 allowsBounceVertical 值为 YES。window 全局配置后全局生效,但是如果单个页面配置了该参数,以页面的配置为准。 |
- |
allowsBounceVertical | String | 否 | 是否允许向下拉拽。默认 YES , 支持 YES / NO |
- |
transparentTitle | String | 否 | 导航栏透明设置。默认 none ,支持 always 一直透明 / auto 滑动自适应 / none 不透明。 |
- |
titlePenetrate | String | 否 | 是否允许导航栏点击穿透。默认 NO ,支持 YES / NO 。 |
- |
showTitleLoading | String | 否 | 是否进入时显示导航栏的 loading。默认 NO ,支持 YES / NO 。 |
- |
titleImage | String | 否 | 导航栏图片地址。 | - |
titleBarColor | HexColor | 否 | 导航栏背景色。例:白色 "#FFFFFF"。 | - |
backgroundColor | HexColor | 否 | 页面的背景色。例:白色 "#FFFFFF"。 | - |
backgroundImageColor | HexColor | 否 | 下拉露出显示背景图的底色。例:白色 "#FFFFFF"。 | - |
backgroundImageUrl | String | 否 | 下拉露出显示背景图的链接。 | - |
gestureBack | String | 否 | 仅支持 iOS,是否支持手势返回。默认 YES ,支持 YES / NO 。 |
- |
enableScrollBar | String | 否 | 仅支持 Android,是否显示 WebView 滚动条。默认 YES ,支持 YES / NO 。 |
- |
onReachBottomDistance | Number | 否 | 页面上拉触底时触发时距离页面底部的距离,单位为 px ,详情请参见 页面事件处理函数。 |
1.19.0 ,目前iOS 在page.json 下设置无效,只能全局设置。 |
responsive | Boolean | 否 | rpx 单位是否宽度自适应 ,默认true,当设置为 false 时,2 rpx 将恒等于 1 px,不再根据屏幕宽度进行自适应,注意,此时 750 rpx 将不再等于100% 宽度。 |
1.23.0 |
tabBar
如果开发的小程序是一个多 tab 应用(客户端窗口的底部栏可以切换页面),那么可以通过 tabBar
配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
tabBar 配置项有以下:
属性 | 类型 | 是否必填 | 描述 |
---|---|---|---|
textColor | HexColor | 否 | 文字颜色 |
selectedColor | HexColor | 否 | 选中文字颜色 |
backgroundColor | HexColor | 否 | 背景色 |
items | Array | 是 | 每个 tab 配置 |
每个 item 配置:
属性 | 类型 | 是否必填 | 描述 |
---|---|---|---|
pagePath | String | 是 | 设置页面路径 |
name | String | 是 | 名称 |
icon | String | 否 | 平常图标路径(非选中状态) |
activeIcon | String | 否 | 高亮图标路径(选中状态) |
icon 图标推荐大小为 60×60 px 大小,系统会对传入的非推荐尺寸的图片进行非等比拉伸或缩放。
示例代码:
{
"tabBar": {
"textColor": "#dddddd",
"selectedColor": "#49a9ee",
"backgroundColor": "#ffffff",
"items": [
{
"pagePath": "pages/index/index",
"name": "首页"
},
{
"pagePath": "pages/logs/logs",
"name": "日志"
}
]
}
}
代码中,开发者可以通过 my.setTabBarItem 动态设置 tabBar
中指定 item
的内容。
以上内容是否对您有帮助:
更多建议: