支付宝小程序框架 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 ,目前iOSpage.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 的内容。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号