app.json
用于对应用进行全局配置,设置页面文件的路径、窗口表现、网络超时时间、多 tab 等。
以下是一个基本配置示例:
{ "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "defaultTitle": "Demo" } }
完整配置项如下:
属性 | 类型 | 是否必填 | 描述 |
pages | Array | 是 | 设置页面路径。 |
window | Object | 否 | 设置默认页面的窗口表现。 |
tabBar | Object | 否 | 设置底部 tabbar 的表现。 |
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" ] }
属性 | 类型 | 是否必填 | 描述 |
defaultTitle | String | 否 | 页面title标题,需在非首页使用。必须在navigationBarForceEnable设置开启才能展示。使用了tabbar的非首个tab不需要开navigationBarForceEnable也能展示。 |
pullRefresh | Boolean | 否 | 是否允许下拉刷新。默认NO, 备注:下拉刷新生效的前提是allowsBounceVertical 值为 YES。 |
allowsBounceVertical | String | 否 | 是否允许向下拉拽。默认 |
transparentTitle | String | 否 | 导航栏透明设置。默认 none ,支持 always 一直透明 / auto 滑动自适应 / none 不透明。 |
navigationBarBackgroundBg | String | 否 | 导航栏背景图片地址。 |
navigationBarTextStyle | String | 否 | 导航栏标题颜色,仅支持black/white。 |
titleImage | String | 否 | 导航栏图片地址。 |
titleBarColor | HexColor | 否 | 导航栏背景色。 |
showNavigationBarLogo |
Boolean |
否 |
是否显示首页导航栏上的AppLogo ,默认不显示。 |
navigationBarForceEnable | Boolean |
否 |
默认false,若开启,则设置的二级页头部标题可展示。 |
下面是一个例子:
{ "window":{ "defaultTitle": "接口功能演示" } }
如果你的应用是一个多 tab 应用(客户端窗口的底部栏可以切换页面),那么可以通过 tabBar
配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
注意:
1)通过页面跳转(my.navigateTo
)或者页面重定向(my.redirectTo
)所到达的页面,即使它是定义在 tabBar 配置中的页面,也不会显示底部的 tab 栏。
2)tabBar
的第一个页面必须是首页。
tabBar 配置项有以下:
属性 | 类型 | 是否必填 | 描述 |
textColor | HexColor | 是 | 文字颜色 |
selectedColor | HexColor | 是 | 选中文字颜色 |
backgroundColor | HexColor | 是 | 背景色 |
items | Array | 是 | 每个 tab 配置 |
每个 item 配置:
属性 | 类型 | 是否必填 | 描述 |
pagePath | String | 是 | 设置页面路径 |
name | String | 是 | 名称 |
icon | String | 否 | 平常图标路径 |
activeIcon | String | 否 | 高亮图标路径 |
icon 图标推荐大小为 60×60 px 大小,系统会对传入的非推荐尺寸的图片进行非等比拉伸或缩放。
tabBar 示例如下:
{ "tabBar": { "textColor": "#dddddd", "selectedColor": "#49a9ee", "backgroundColor": "#ffffff", "items": [ { "pagePath": "pages/index/index", "name": "首页" }, { "pagePath": "pages/logs/logs", "name": "日志" } ] } }
注意: 只对pc千牛生效,最低支持版本:7.17.10N。
新增tabBarEx属性配置,其他不变,如果开发的小程序是一个多 tab 应用(客户端窗口的底部栏可以切换页面),那么可以通过 tabBarEx
配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
tabBarEx 配置项有以下:
属性 | 类型 | 是否必填 | 描述 |
items | Array | 是 | 每个 tab 配置 |
每个 item 配置:
属性 | 类型 | 是否必填 | 描述 |
pagePath | String | 是 | 设置页面路径 |
name | String | 是 | 名称 |
items | Array | 是 | 每个 tab 配置 |
id |
String | 否 | 页面别名,方便使用api切换 |
tip:items最多支持三级;若有items存在,则该节点为空节点,无具体页面。
示例代码:
{ "tabBarEx": { "items": [ { "items": [ { "pagePath": "pages/index/index", "name": "二级导航", "id": "index" }, { "pagePath": "pages/send/send", "name": "二级导航", "id": "send" } ], "name": "一级导航" }, { "items": [ { "items":[ { "pagePath": "pages/index/index", "name": "三级导航" } ], "name": "二级导航" } ], "name": "一级导航" }, { "pagePath": "pages/logs/logs", "name": "一级导航" } ] } }