配置

优质
小牛编辑
119浏览
2023-12-01

全局配置

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

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

{
  "pages": [
    "pages/index/index",
    "pages/my/my"
  ],
  "window": {
    "navigationBarTitleText": "京东小程序 Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/my/my",
      "text": "个人中心"
    }]
  },
  "debug": true
}

app.json 配置项列表

属性类型必填描述
pagesString Array页面路径列表
windowObject全局的窗口表现
tabBarObjecttab 栏的表现
debugBoolean是否开启 debug 模式,默认关闭
pageAliasObject页面page别名
quickMenuObject胶囊按钮内菜单配置

pages

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

如开发目录为:

├── app.js
├── app.json
├── app.jxss
├── pages
│   │── index
│   │   ├── index.jxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.jxss
│   └── my
│       ├── my.jxml
│       └── my.js

则需要在 app.json 中写

{
  "pages":[
    "pages/index/index",
    "pages/my/my"
  ]
}

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 支持
enablePullDownRefreshBooleanfalse是否开启当前页面下拉刷新。详见 Page.onPullDownRefresh

值得注意的是:

  1. navigationStyle 只在 app.json 中生效,请勿在页面的json中配置

示例如下:

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "京东接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

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 各字段示例

debug

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

pageAlias

页面别名,可以为pages里面的页面,配置一个别名,用于打开小程序时,path 路径未知或者 path 路径过长的情况下,需要配合小程序唤起协议 openapp协议使用。

示例如下,app.json 配置如下:

{
  "pages": [
    "pages/index/index",
    "pages/my/my"
  ],
  "window": {
    "navigationBarTitleText": "京东小程序 Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/my/my",
      "text": "个人中心"
    }]
  },
  "debug": true,
  "pageAlias":{
    "index":"pages/index/index",
    "my":"pages/my/my"
  }
}

openapp示例如下:

openapp.jdmobile://virtual?params={"category":"jump","des":"jdmp","appId":"ao123","vapptype":"1","path":"","pageAlias":"my","param":{}}

上面示例将打开 appId 为 ao123 的 pages/my/my 页面。

注意: pageAlias里面的页面路径,必须在pages里存在;多个别名可以对应同一个页面地址,别名不可重复。 更多 openapp 协议详情,可参考 打开小程序 该功能需要京东app版本9.3.4和小程序引擎1.10.13及以上支持。

quickMenu

胶囊按钮里面的部分菜单可通过配置开关来显示隐藏,默认是 true 显示状态。 可配置的菜单有:

属性类型必填默认值说明
shareBooleantrue是否显示推送给朋友(分享)菜单
favoriteBooleantrue是否显示关注菜单
sendToDesktopBooleantrue是否显示发送到桌面菜单,仅安卓有效

下面示例中,发送给朋友、关注、发送到桌面三个菜单将都隐藏,不会展示,示例如下:

{
  "pages": [
    "pages/index/index",
    "pages/my/my"
  ],
  "window": {
    "navigationBarTitleText": "京东小程序 Demo"
  },
  "quickMenu":{
    "share":false,
    "favorite":false,
    "sendToDesktop":false
  }
}

quickMenu 里面的菜单,只有配置布尔值false的情况下,才能隐藏,并且如果有 API 可控制某些菜单隐藏,则 API 的优先级大于这里的配置,该配置是全局配置,仅支持在 app.json 中配置。

页面配置

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

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

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

示例 my.json 如下:

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "个人中心",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}