配置与组件

最简单的 amis 配置

一个最简单的 amis 配置看起来是这样的：

  1. {
  2.   "type": "page",
  3.   "body": "Hello World!"
  4. }

请观察上面的代码，这是一段 JSON，它的含义是：

  1. type 是 amis 节点中最重要的字段，它告诉 amis 当前节点需要渲染的是Page组件。
  2. 而 body 字段会作为 Page 组件的属性，Page 组件根据这个值来渲染页面内容。

这段配置的效果如下所示：

  1. {
  2.   "type": "page",
  3.   "body": "Hello World!"
  4. }

上面这个配置是可以实时修改预览的，尝试改一下 Hello World! 的值。

不过这个实时预览功能对于某些属性不生效，如果发现不符合预期，需要复制 JSON，打开另一个页面后粘贴。

组件

上面提到，type字段会告诉 amis 当前节点渲染的组件为Page，组件节点的配置永远都是由 type字段 （用于标识当前是哪个组件）和 属性 构成的。

  1. {
  2.   "type": "xxx",
  3.   ...其它属性
  4. }

组件树

这次我们看一个稍微复杂一点的配置：

  1. {
  2.   "type": "page",
  3.   "body": {
  4.     "type": "tpl",
  5.     "tpl": "Hello World!"
  6.   }
  7. }

该配置渲染页面如下：

  1. {
  2.   "type": "page",
  3.   "body": {
  4.     "type": "tpl",
  5.     "tpl": "Hello World!"
  6.   }
  7. }

最终效果和前面的示例一样，但这次 Page 组件的 body 属性值配置了一个对象，通过type指明body内容区内会渲染一个叫Tpl的组件，它是一个模板渲染组件。

在 body 中除了配置对象，还可以是数组，比如下面的例子:

```schema: scope=”body” [ { “type”: “tpl”, “tpl”: “Hello World!” }, { “type”: “divider” }, { “type”: “form”, “body”: [ { “type”: “input-text”, “name”: “name”, “label”: “姓名” } ] } ]

  2. 可以看到通过数组的形式，增加了 `divider` 和 `form` 组件。
  4. 除了 `Page` 之外，还有很多**容器型**的组件都有 `body` 属性，通过这种树形结构，amis 就能实现复杂页面制作。
  6. > **注意：**
  7. >
  8. > `Page`是 amis 页面配置中 **必须也是唯一的顶级节点**
  10. ### 通过树形来实现布局
  12. 下面这个页面就是通过树形组合出来的，大体结构是这样：

Page ├── Toolbar │ └─ Form 顶部表单项 ├── Grid // 用于水平布局 │ ├─ Panel │ │ └─ Tabs │ │ └─ Chart │ └─ Panel │ └─ Chart └── CRUD

  2. ```schema
  3. {
  4.   "type": "page",
  5.   "toolbar": [{
  6.     "type": "form",
  7.     "panelClassName": "mb-0",
  8.     "title": "",
  9.     "body": [{
  10.       "type": "select",
  11.       "label": "区域",
  12.       "name": "businessLineId",
  13.       "selectFirst": true,
  14.       "mode": "inline",
  15.       "options": ["北京", "上海"],
  16.       "checkAll": false
  17.     }, {
  18.       "label": "时间范围",
  19.       "type": "input-date-range",
  20.       "name": "dateRange",
  21.       "inline": true,
  22.       "value": "-1month,+0month",
  23.       "inputFormat": "YYYY-MM-DD",
  24.       "format": "YYYY-MM-DD",
  25.       "closeOnSelect": true,
  26.       "clearable": false
  27.     }],
  28.     "actions": [],
  29.     "mode": "inline",
  30.     "target": "mainPage",
  31.     "submitOnChange": true,
  32.     "submitOnInit": true
  33.   }],
  34.   "body": [{
  35.     "type": "grid",
  36.     "columns": [
  37.       {
  38.         "type": "panel",
  39.         "className": "h-full",
  40.         "body": {
  41.           "type": "tabs",
  42.           "tabs": [{
  43.             "title": "消费趋势",
  44.             "tab": [{
  45.               "type": "chart",
  46.               "config": {
  47.                 "title": {
  48.                   "text": "消费趋势"
  49.                 },
  50.                 "tooltip": {},
  51.                 "xAxis": {
  52.                   "type": "category",
  53.                   "boundaryGap": false,
  54.                   "data": ["一月", "二月", "三月", "四月", "五月", "六月"]
  55.                 },
  56.                 "yAxis": {},
  57.                 "series": [{
  58.                   "name": "销量",
  59.                   "type": "line",
  60.                   "areaStyle": {
  61.                     "color": {
  62.                       "type": "linear",
  63.                       "x": 0,
  64.                       "y": 0,
  65.                       "x2": 0,
  66.                       "y2": 1,
  67.                       "colorStops": [{
  68.                         "offset": 0,
  69.                         "color": "rgba(84, 112, 197, 1)"
  70.                       }, {
  71.                         "offset": 1,
  72.                         "color": "rgba(84, 112, 197, 0)"
  73.                       }],
  74.                       "global": false
  75.                     }
  76.                   },
  77.                   "data": [5, 20, 36, 10, 10, 20]
  78.                 }]
  79.               }
  80.             }]
  81.           }, {
  82.             "title": "账户余额",
  83.             "tab": "0"
  84.           }]
  85.         }
  86.       }, {
  87.       "type": "panel",
  88.       "className": "h-full",
  89.       "body": [{
  90.         "type": "chart",
  91.         "config": {
  92.           "title": {
  93.             "text": "使用资源占比"
  94.           },
  95.           "series": [{
  96.             "type": "pie",
  97.             "data": [{
  98.               "name": "BOS",
  99.               "value": 70
  100.             }, {
  101.               "name": "CDN",
  102.               "value": 68
  103.             }, {
  104.               "name": "BCC",
  105.               "value": 48
  106.             }, {
  107.               "name": "DCC",
  108.               "value": 40
  109.             }, {
  110.               "name": "RDS",
  111.               "value": 32
  112.             }]
  113.           }]
  114.         }
  115.       }]
  116.     }]
  117.   }, {
  118.     "type": "crud",
  119.     "className": "m-t-sm",
  120.     "api": "/api/mock2/sample",
  121.     "columns": [{
  122.       "name": "id",
  123.       "label": "ID"
  124.     }, {
  125.       "name": "engine",
  126.       "label": "Rendering engine"
  127.     }, {
  128.       "name": "browser",
  129.       "label": "Browser"
  130.     }, {
  131.       "name": "platform",
  132.       "label": "Platform(s)"
  133.     }, {
  134.       "name": "version",
  135.       "label": "Engine version"
  136.     }, {
  137.       "name": "grade",
  138.       "label": "CSS grade"
  139.     }]
  140.   }]
  141. }

amis 后续将会实现新的布局模式，将更容易实现复杂布局效果