--- title: SchemaNode description: type: 0 group: 🔧 类型 menuName: SchemaNode 配置节点 icon: order: 19 --- SchemaNode 是指每一个 amis 配置节点的类型,支持`模板`、`Schema(配置)`以及`SchemaArray(配置数组)`三种类型 ## 模板 ```json { "type": "page", "data": { "text": "World" }, "body": "Hello ${text}!" // 输出 Hello World! } ``` 上例中的`body`属性所配置的属性值`"Hello ${text}!"`就是一个模板 更多使用说明见 [模板文档](./template) ## Schema 配置 `Schema`,即**组件的JSON配置** **它至少需要一个`type`字段,用以标识当前`Schema`的类型。** ```json { "type": "page", "data": { "text": "World" }, "body": { "type":"tpl", "tpl": "Hello ${text}!" // 输出 Hello World! } } ``` `type`, `data`, `body`这三个字段组成的`JSON`对象,便是一个`Schema`,它由`type`字段作为标识,指明当前 `Schema` 是 `Page`组件节点 而通过查看 [Page组件属性表](./page#属性表) 可知,`body`属性类型是`SchemaNode`,即可以在`body`中,嵌套配置其他组件。我们在这里,用`type`和`tpl` JSON 对象,配置了 `Tpl` 组件,渲染了一段模板字符串。 > amis 可以通过该方法,在`Schema`中嵌套配置其他`SchemaNode`,从而搭建非常复杂的页面应用。 ### 配置显隐 所有的`Schema`类型都可以通过配置`visible`或`hidden`,`visibleOn`或`hiddenOn`来控制组件的显隐,下面是两种方式 ##### 静态配置 通过配置`"hidden": true`或者`"visible": false`来隐藏组件 ```schema:height="300" scope="body" [ { "type": "form", "controls": [ { "type": "text", "label": "姓名", "name": "name" } ] }, { "type": "form", "hidden": true, "controls": [ { "type": "text", "label": "姓名", "name": "name" } ] } ] ``` 下面那个表单被隐藏了。 ##### 通过条件配置显隐 你也通过 [表达式](../expression) 配置`hiddenOn`,来实现在某个条件下禁用当前组件. ```schema:height="400" scope="body" { "type": "form", "controls": [ { "type": "number", "label": "数量", "name": "number", "value": 0, "description": "调整数量大小查看效果吧!" }, { "type": "text", "label": "文本", "name": "text", "hiddenOn": "data.number > 1", "description": "当数量大于1的时候,该文本框会隐藏" } ] } ``` 为了方便说明,我们在form中演示了条件显隐,实际上,只要当前数据域中数据有变化,都可以实现组件显隐 > `visible`和`hidden`,`visibleOn`和`hiddenOn`除了判断逻辑相反以外,没有任何区别 ## SchemaArray 配置数组 明白了何为`Schema`之后,你就会很轻松理解`SchemaArray`,它其实就是支持通过数组配置`Schema`,从而在某一节点层级下,配置多个组件 ```json { "type": "page", "data": { "name": "amis" "age": 1 }, "body": [ { "type":"tpl", "tpl": "my name is ${name}" // 输出 Hello World! }, { "type":"tpl", "tpl": "I am ${age} years old!" // 输出 Hello World! } ] } ``` 非常容易看出来,我们给`body`属性,配置了数组结构的`Schema`,从而实现在`body`下,渲染两个`tpl`,来输入两段文字的效果