SchemaNode

SchemaNode 是指每一个 amis 配置节点的类型，支持模板、Schema（配置）以及SchemaArray（配置数组）三种类型

模板

  1. {
  2.   "type": "page",
  3.   "data": {
  4.     "text": "World"
  5.   },
  6.   "body": "Hello ${text}!" // 输出 Hello World!
  7. }

上例中的body属性所配置的属性值"Hello ${text}!"就是一个模板

更多使用说明见 模板文档

Schema 配置

Schema，即组件的 JSON 配置

它至少需要一个type字段，用以标识当前Schema的类型。

  1. {
  2.   "type": "page",
  3.   "data": {
  4.     "text": "World"
  5.   },
  6.   "body": {
  7.     "type": "tpl",
  8.     "tpl": "Hello ${text}!" // 输出 Hello World!
  9.   }
  10. }

type, data, body这三个字段组成的JSON对象，便是一个Schema，它由type字段作为标识，指明当前 Schema 是 Page组件节点

而通过查看 Page 组件属性表 可知，body属性类型是SchemaNode，即可以在body中，嵌套配置其他组件。我们在这里，用type和tpl JSON 对象，配置了 Tpl 组件，渲染了一段模板字符串。

amis 可以通过该方法，在Schema中嵌套配置其他SchemaNode，从而搭建非常复杂的页面应用。

配置显隐

所有的Schema类型都可以通过配置visible或hidden，visibleOn或hiddenOn来控制组件的显隐，下面是两种方式

静态配置

通过配置"hidden": true或者"visible": false来隐藏组件

```schema: scope=”body” [ { “type”: “form”, “body”: [ { “type”: “input-text”, “label”: “姓名”, “name”: “name” } ] }, { “type”: “form”, “hidden”: true, “body”: [ { “type”: “input-text”, “label”: “姓名”, “name”: “name” } ] } ]

  2. 下面那个表单被隐藏了。
  4. ##### 通过条件配置显隐
  6. 你也通过 [表达式](../concepts/expression) 配置`hiddenOn`，来实现在某个条件下禁用当前组件.
  8. ```schema: scope="body"
  9. {
  10.   "type": "form",
  11.   "body": [
  12.     {
  13.       "type": "input-number",
  14.       "label": "数量",
  15.       "name": "number",
  16.       "value": 0,
  17.       "description": "调整数量大小查看效果吧！"
  18.     },
  19.     {
  20.       "type": "input-text",
  21.       "label": "文本",
  22.       "name": "text",
  23.       "hiddenOn": "this.number > 1",
  24.       "description": "当数量大于1的时候，该文本框会隐藏"
  25.     }
  26.   ]
  27. }

为了方便说明，我们在 form 中演示了条件显隐，实际上，只要当前数据域中数据有变化，都可以实现组件显隐

visible和hidden，visibleOn和hiddenOn除了判断逻辑相反以外，没有任何区别

SchemaArray 配置数组

明白了何为Schema之后，你就会很轻松理解SchemaArray，它其实就是支持通过数组配置Schema，从而在某一节点层级下，配置多个组件

  1. {
  2.   "type": "page",
  3.   "data": {
  4.       "name": "amis"
  5.       "age": 1
  6.   },
  7.   "body": [
  8.       {
  9.         "type":"tpl",
  10.         "tpl": "my name is ${name}" // 输出 my name is amis
  11.       },
  12.       {
  13.         "type":"tpl",
  14.         "tpl": "I am ${age} years old" // 输出 I am 1 years old
  15.       }
  16.   ]
  17. }

非常容易看出来，我们给body属性，配置了数组结构的Schema，从而实现在body下，渲染两个tpl，来输入两段文字的效果