codecamp

支付宝小程序框架 app.json 全局配置

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.acss 全局样式
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }