全局配置

app.json是一个用来对头条小程序进行全局配置的文件,用来配置页面的路径,窗口样式表现等。

app.json的配置选项如下:

  1. {
  2. "pages": [
  3. "pages/index/index",
  4. "pages/logs/index"
  5. ],
  6. "window": {
  7. "navigationBarTitleText": "Demo"
  8. },
  9. "tabBar": {
  10. "list": [{
  11. "pagePath": "pages/index/index",
  12. "text": "首页"
  13. }, {
  14. "pagePath": "pages/logs/logs",
  15. "text": "日志"
  16. }]
  17. }
  18. }

app.json 配置项说明

属性类型必填描述
pagesString Array配置页面路径
windowObject配置默认页面的窗口表现
tabBarObject配置底部 tab 的表现
debugBoolean配置是否开启 debug 模式

pages

这个字段用于配置小程序用到的所有页面路径,配置每项是 路径 + 文件名 这个结构。配置项的第一个页面路径就是小程序启动展示的第一个页面

需要注意:保证单个页面的.json, .js, .ttml, .ttss资源都放在每个页面路径的首层

如开发目录如下:

  1. |____app.ttss
  2. |____app.json
  3. |____project.config.json
  4. |____pages
  5. | |____index
  6. | | |____index.js
  7. | | |____index.json
  8. | | |____index.ttml
  9. | | |____index.ttss
  10. |____app.js

那么app.json应该这样配置:

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

window

这个字段用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如"#000000"
navigationBarTextStyleStringwhite导航栏标题颜色,仅支持 black/white
navigationBarTitleTextString导航栏标题文字内容
navigationStyleStringdefault导航栏样式,仅支持 default/custom。custom 模式可自定义导航栏,只保留右上角胶囊状的按钮
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark/light
backgroundColorTopString#ffffff顶部窗口的背景色,仅 iOS 支持
backgroundColorBottomString#ffffff底部窗口的背景色,仅 iOS 支持
enablePullDownRefreshBooleanfalse是否开启下拉刷新,详见页面相关事件处理函数
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位为px

tabBar

如果你的小程序包含多个tab(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。比如设置tab展示标题和tab颜色等。

属性类型必填默认值描述
colorHexColortab 上的文字默认颜色
selectedColorHexColortab 上的文字选中时的颜色
backgroundColorHexColortab 的背景色
borderStyleStringblacktabbar上边框的颜色, 仅支持 black/white
listArraytab 的列表,详见 list 属性说明,最少2个、最多5个 tab
positionStringbottom可选值 bottom、top

其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:

属性类型必填描述
pagePathString页面路径,必须在 pages 中先定义
textStringtab 上按钮文字
iconPathString图片路径,icon 大小限制为40kb,建议尺寸为 81px 81px,当 postion 为 top 时,此参数无效,不支持网络图片
selectedIconPathString选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px 81px ,当 postion 为 top 时,此参数无效

page.json

头条小程序的每一个页面的窗口表现也可以通过页面目录下的.json文件进行配置,这个页面的独立配置会比 app.json 要简单;

如果 app.json 的 window 字段里面配置了某个页面的窗口样式,同时该页面也在自己的 .json文件中做了对应字段的配置的话,框架会优先采用页面里面的 .json 相应配置项。

具体的配置字段如下:

属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如"#000000"
navigationBarTextStyleStringwhite导航栏标题颜色,仅支持 black/white
navigationBarTitleTextString导航栏标题文字内容
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark/light
enablePullDownRefreshBooleanfalse是否开启下拉刷新,详见页面相关事件处理函数
disableScrollBooleanfalse设置为 true 则页面整体不能上下滚动;只在 page.json 中有效,无法在 app.json 中设置该项
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位为px

例子:

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

原文: https://developer.toutiao.com/docs/framework/globalSetting.html