全局配置

app.json 文件用来对小程序进行全局配置,页面路径、窗口表现、设置网络超时时间、设置 tabbar 等;如果页面内存在的json文件,配置同样的选项,则会覆盖全局的配置(页面内的json 文件只能配置部分选项,具体可参看页面内的配置);

以下是示例配置文件 app.json

  1. {
  2. "pages": [
  3. "pages/index/index",
  4. "pages/my/my"
  5. ],
  6. "window": {
  7. "navigationBarTitleText": "京东小程序 Demo"
  8. },
  9. "tabBar": {
  10. "list": [{
  11. "pagePath": "pages/index/index",
  12. "text": "首页"
  13. }, {
  14. "pagePath": "pages/my/my",
  15. "text": "个人中心"
  16. }]
  17. },
  18. "networkTimeout": {
  19. "request": 10000,
  20. },
  21. "debug": true
  22. }

app.json 配置项列表

属性类型必填描述
pagesString Array页面路径列表
windowObject全局的窗口表现
tabBarObjecttab 栏的表现
networkTimeoutObject网络超时时间
debugBoolean是否开启 debug 模式,默认关闭

pages

用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径+文件名 信息,pages 数组的第一项代表小程序的首页,增加或减少页面,都需要对 pages 数组进行手动增加或减少,值得注意的是,pages 数组中的项目不能重复。

如开发目录为:

  1. ├── app.js
  2. ├── app.json
  3. ├── app.jxss
  4. ├── pages
  5. │── index
  6. ├── index.jxml
  7. ├── index.js
  8. ├── index.json
  9. └── index.jxss
  10. └── my
  11. ├── my.jxml
  12. └── my.js

则需要在 app.json 中写

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

window

用于设置小程序全局的状态栏、标题、窗口表现等。

属性类型默认值描述
navigationBarBackgroundColorHexColor(十六进制颜色值)#000000导航栏背景颜色,如 #000000
navigationBarTextStyleStringwhite导航栏标题颜色,目前仅支持 black / white
navigationBarTitleTextString导航栏标题文字内容,字数不宜过多
navigationStyleStringdefault导航栏样式,仅支持以下值:1. default(默认样式), 2. custom(自定义导航栏,只保留右上角按钮)
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark / light
backgroundColorTopString#ffffff顶部窗口的背景色,仅 iOS 支持
backgroundColorBottomString#ffffff底部窗口的背景色,仅 iOS 支持

值得注意的是:

  1. navigationStyle 只在 app.json 中生效,请勿在页面的json中配置
  2. navigationStyle: custom<web-view> 组件无效
示例如下:

  1. {
  2. "window":{
  3. "navigationBarBackgroundColor": "#ffffff",
  4. "navigationBarTextStyle": "black",
  5. "navigationBarTitleText": "京东接口功能演示",
  6. "backgroundColor": "#eeeeee",
  7. "backgroundTextStyle": "light"
  8. }
  9. }

配置 - 图1

tabBar

tabBar 用来配置小程序底部或者顶部的 tab 导航栏的样式以及跳转的页面等;详细配置项如下:

属性类型必填默认值描述
colorHexColortab 上的文字默认颜色
selectedColorHexColortab 上的文字选中时的颜色
backgroundColorHexColortab 的背景色
borderStyleStringblacktabbar上边框的颜色, 仅支持 black、white
listArraytab 的列表,详见list 属性说明,支持2-5个tab选项
positionStringbottomtabBar的位置,仅支持两个值: bottom、top

其中 list 是数组类型,只能配置最少2个、最多5个 tab。tab 按数组的顺序排序,每个项都是一个独立的对象,其可配置值如下:

属性类型必填说明
pagePathString页面路径,必须在 pages 数组中先定义
textStringtab 上按钮文字
iconPathString图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。当 postion 为 top 时,不显示 icon。
selectedIconPathString选中时的图片路径,要求同 iconPath

tabBar 各字段示例

配置 - 图2

networkTimeout

网络请求的超时时间,单位均为毫秒。

属性类型必填默认值说明
requestNumber60000jd.request 的超时时间

debug

布尔类型,当配置为true时,扫码后,小程序中会增加一个信息查看按钮,可以查看 Page 的注册,页面路由,事件触发,console 等信息,可以帮助开发者快速定位问题。

页面配置

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。

页面的配置只能设置 app.json 中部分 window 配置项的内容,页面中配置项会覆盖 app.jsonwindow 中相同的配置项,可配置的选项如下:

属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000
navigationBarTextStyleStringwhite导航栏标题颜色,仅支持 black、white
navigationBarTitleTextString导航栏标题文字内容
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark、light
disableScrollBooleanfalse设置为 true 则页面整体不能上下滚动;仅在页面配置中有效,

示例 my.json 如下:

  1. {
  2. "navigationBarBackgroundColor": "#ffffff",
  3. "navigationBarTextStyle": "black",
  4. "navigationBarTitleText": "个人中心",
  5. "backgroundColor": "#eeeeee",
  6. "backgroundTextStyle": "light"
  7. }