全局配置

2020-02-11 17:06 更新

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

app.json的配置选项如下:

{
  "pages": ["pages/index/index", "pages/logs/index"],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}


配置项说明


属性 类型 必填 描述 最低版本
pages String Array 配置页面路径
window Object 配置默认页面的窗口表现
tabBar Object 配置底部 tab 的表现
navigateToMiniProgramAppIdList Array 需要跳转的小程序列表,相关 api 见tt.navigateToMiniProgram 1.15.0
permission Object 配置部分授权弹窗的副标题


pages

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

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

如开发目录如下:

|____app.ttss
|____app.json
|____project.config.json
|____pages
|       |____index
|       |        |____index.js
|       |        |____index.json
|       |        |____index.ttml
|       |        |____index.ttss
|____app.js

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

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


window

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

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如"#000000"
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white,同时影响:标题颜色、右胶囊颜色、左返回箭头颜色
navigationBarTitleText String 导航栏标题文字内容
navigationStyle String default 导航栏样式,仅支持 default/custom。custom 模式可自定义导航栏,只保留右上角胶囊状的按钮,可以通过navigationBarTextStyle设置胶囊按钮的颜色
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark/light
backgroundColorTop String #ffffff 顶部窗口的背景色,仅 iOS 支持
backgroundColorBottom String #ffffff 底部窗口的背景色,仅 iOS 支持
enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面相关事件处理函数
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为 px
transparentTitle String N/A 仅在 navigationStyle 为 default 时该字段生效,用来控制导航栏透明设置。默认 none,支持 always 一直透明 / auto 滑动自适应 / none 不透明


tabBar

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

属性 类型 必填 默认值 描述
color HexColor tab 上的文字默认颜色
selectedColor HexColor tab 上的文字选中时的颜色
backgroundColor HexColor tab 的背景色
borderStyle String black tabbar 上边框的颜色, 仅支持 black/white
list Array tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab

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

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


navigateToMiniProgramAppIdList

当小程序需要使用tt.navigateToMiniProgram接口跳转到其他小程序时,需要先在配置文件中声明需要跳转的小程序appId列表,最多允许填写 10 个。


page.json


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

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

具体的配置字段如下:

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如"#000000"
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
navigationStyle String default 导航栏样式,仅支持 default/custom。custom 模式可自定义导航栏,只保留右上角胶囊状的按钮
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark/light
enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面相关事件处理函数
disableScroll Boolean false 设置为 true 则页面整体不能上下滚动;只在 page.json 中有效,无法在 app.json 中设置该项
disableSwipeBack Boolean false 禁止页面右滑手势返回
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为 px
usingComponents Object 自定义组件配置

例子:

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


permission

部分授权弹窗的副标题支持开发者自定义,每次提审后会审核该文案,如不通过,直接打回;

不可自定义副标题的权限是:个人信息、手机号。

副标题如下图所示:

图片名称

如果开发者没有填写某个 scope, 就使用该 scope 的默认文案,各 scope 的默认文案如下:

scope 默认文案
scope.userLocation 用于提供个性化服务及体验
scope.address 一键访问“今日头条/抖音/皮皮虾”收货地址,便捷管理
scope.record 用于采集声音
scope.album 用于选取图片视频,或保存图片视频到你的相册
scope.camera 用于拍摄图片、录制视频


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

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号