全部产品

app.json 全局配置

更新时间:2019-09-09 15:14:12

app.json 用于对小程序进行全局配置,设置页面文件的路径、窗口表现、网络超时时间、多 tab 等。

以下是一个基本配置示例:

  1. {
  2. "pages": [
  3. "pages/index/index",
  4. "pages/logs/index"
  5. ],
  6. "window": {
  7. "defaultTitle": "Demo"
  8. }
  9. }

完整配置项如下:

属性 类型 是否必填 描述
pages Array 设置页面路径
window Object 设置默认页面的窗口表现
tabBar Object 设置底部 tabbar 的表现

pages

app.json 中的 pages 为数组属性,数组中每一项都是字符串,用于指定小程序的页面。在小程序中新增或删除页面,都需要对 pages 数组进行修改。

pages 数组的每一项代表对应页面的路径信息,其中,第一项代表小程序的首页。

页面路径不需要写任何后缀,框架会自动去加载同名的 .json.js.axml.acss 文件。举例来说,如果开发目录为:

  1. ├── pages
  2. ├──index
  3. ├── index.json
  4. ├── index.js
  5. ├── index.axml
  6. └── index.acss
  7. ├──logs
  8. ├── logs.json
  9. ├── logs.js
  10. └── logs.axml
  11. ├── app.json
  12. ├── app.js
  13. └── app.acss

那么 app.json 就要写成:

  1. {
  2. "pages":[
  3. "pages/index/index",
  4. "pages/logs/logs"
  5. ]
  6. }

window

window 用于设置小程序的状态栏、导航条、标题、窗口背景色等。

属性 类型 是否必填 描述
defaultTitle String 页面默认标题
pullRefresh String 是否允许下拉刷新。默认 NO。
备注:下拉刷新生效的前提是 allowsBounceVertical 值为 YES
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 导航栏背景色
backgroundColor HexColor 下拉露出显示的背景颜色
backgroundImageColor HexColor 下拉露出显示的背景图底色
backgroundImageUrl String 下拉露出显示的背景图链接
gestureBack String iOS 用,是否支持手势返回。默认 NO,支持 YES / NO
enableScrollBar Boolean Android 用,是否显示 WebView 滚动条。默认 YES,支持 YES / NO

代码示例:

  1. {
  2. "window":{
  3. "defaultTitle": "客户端接口功能演示"
  4. }
  5. }

tabBar

如果您的小程序是一个多 tab 应用(客户端窗口的底部栏可以切换页面),那么可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

说明
  • 通过页面跳转(my.navigateTo)或者页面重定向(my.redirectTo)所到达的页面,即使它是定义在 tabBar 配置中的页面,也不会显示底部的 tab 栏。
  • 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 示例如下:

  1. {
  2. "tabBar": {
  3. "textColor": "#dddddd",
  4. "selectedColor": "#49a9ee",
  5. "backgroundColor": "#ffffff",
  6. "items": [
  7. {
  8. "pagePath": "pages/index/index",
  9. "name": "首页"
  10. },
  11. {
  12. "pagePath": "pages/logs/logs",
  13. "name": "日志"
  14. }
  15. ]
  16. }
  17. }