# 组件配置
app.json 是文档小组件的配置文件。
- 您可以通过配置`contributes`来实现附属视图的显示。
- 您可以通过配置`environments`来实现不同环境的配置
## 附属视图配置

- 通过字段`contributes`来配置组件类型和附属视图，相关配置说明如下：

字段名 | 类型 | 说明 | 示例
---|---|---|---
addPanel | object | **【组件类型】正文小组件**
∟ view | string | 小组件渲染页面入口（通常指的是html的入口） | index.html
∟ initialHeight | number | 小组件容器的初始高度 | 200
∟ useHostLoading | boolean | 是否使用文档的 Loading 动画，配合`notifyAppReady` 使用 | true
∟ useInteraction | boolean | 是否使用 Interaction 存储数据 | true
∟ align | string | 默认对齐方式，如果小组件需要宽度超过文档正文宽度，需要设置为默认居中对齐；更改对齐方式暂时不提供api，只提供默认的对齐方式设置。 | - left: 左对齐<br>- center: 居中对齐<br>- right: 右对齐
∟ resizeType | string | resize类型，只能传示例中的字段移动端不支持resize，传任何字段这里都是'none' | - free: 自由resize，能随意缩放应用<br>- proportional：比例resize，只能对角按比例缩放<br>- horizontal ：水平resize，只能在水平方向缩放<br>- vertical：垂直resize，只能在垂直方向缩放<br>- none：不能缩放
topbar | object | **【组件类型】悬浮小组件**
∟ view | string | 小组件渲染页面入口（通常指的是html的入口） | topbar.html
∟ minify | boolean | 开启小组件最小化按钮 | true
∟ initialHeight | number | 小组件容器的初始高度 | 200
∟ initialWidth | number | 小组件容器的初始宽度 | 800
∟ backgroundColor | object | 配置小组件背景颜色，需要同时配置浅色和深色，支持十六进制颜色码 | - light: 浅色模式下小组件容器的背景<br>- dark: 深色模式下小组件容器的背景
∟ useHostLoading | boolean | 是否使用文档的 Loading 动画，配合`notifyAppReady` 使用 | true
fullscreen | object | **【附属视图】全屏视图**，应用调用 [Service.Fullscreen.enterFullscreen](https://open.feishu.cn/document/uAjLw4CM/uYjL24iN/docs-add-on/05-api-doc/basic-data-reference---base/Service.Fullscreen.enterFullscreen) 唤起
∟ view | string | 视图渲染页面入口（通常指的是html的入口） | fullscreen.html
floatCard | object | **【附属视图】悬浮卡片视图**，应用调用 [Service.FloatCard.enterFloatCard](https://open.feishu.cn/document/uAjLw4CM/uYjL24iN/docs-add-on/05-api-doc/basic-data-reference---base/Service.FloatCard.enterFloatCard) 唤起
∟ view | string | 视图渲染页面入口（通常指的是html的入口） | floatCard.html
∟ initialHeight | number | 小组件容器的初始高度 | 200
popup | string | **【附属视图】弹窗视图**，应用调用 [View.Action.showPopup](https://open.feishu.cn/document/uAjLw4CM/uYjL24iN/docs-add-on/05-api-doc/basic-data-reference---base/View.Action.showPopup)唤起
∟ view | string | 视图渲染页面入口（通常指的是html的入口） | popup.html
∟ initialHeight | number | 小组件容器的初始高度 | 200
modal | string | **【附属视图】模态框视图** ，应用调用 [View.Action.openModal](https://open.feishu.cn/document/uAjLw4CM/uYjL24iN/docs-add-on/05-api-doc/basic-data-reference---base/View.Action.openModal) 唤起
∟ view | string | 视图渲染页面入口（通常指的是html的入口） | modal.html
∟ initialHeight | number | 小组件容器的初始高度 | 200

## 多应用配置
开发过程中，一套项目工程有同时发布到`测试`和`正式`环境的需要，而不同的环境对应着不同应用的 AppID 和 BlockTypeID。使用`environments`可以同时配置各个环境的应用配置信息。目前只支持这两个环境：`feishu`（飞书正式环境） 和 `feishu-boe`（飞书测试环境）。
| Key         | 类型     | 说明     | 参考值                           |
| ----------- | ------ | ------ | ----------------------------- |
| appID       | string | 应用 ID  | cli_a268846eae22****          |
| blockTypeID | string | 小组件 ID | blk_62e238730f1a001c9167**** |
**示例代码**
```json
{
  "manifestVersion": 1,
  "appID": "cli_a33d20ce6eb8****",
  "appType": "docs-addon",
  "blockTypeID": "blk_63b79cd3cf80000150d6****",
  "projectName": "Docsaddon-Demo",
  "contributes": {
    "addPanel": {
      "initialHeight": 46,
      "view":"index.html",
    }
  },
  "environments": {
    "feishu-boe": {
      "appID": "cli_a250c5077538****",
      "blockTypeID": "blk_62f5f715130000138d90****"
    }
  }
}
```