amis/docs/concepts/schema.md

title	description	type	group	menuName	icon	order
配置与组件	配置与组件	0	💡 概念	配置与组件		9

最简单的 amis 配置

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

{
  "type": "page",
  "body": "Hello World!"
}

请观察上面的代码，这是一段普通的 JSON 格式文本，它的含义是：

1. type是每一个amis节点中，最重要的一个字段，它会告诉 amis 当前节点需要渲染的是Page组件
2. 而body字段会被看作是Page组件的属性，将该属性值所配置的内容，渲染到Page组件的内容区中

上面配置通过 amis 的处理，会渲染出一个简单的页面，并在页面中展示文字：Hello World!，就像下面这样：

{
  "type": "page",
  "body": "Hello World!"
}

后续章节中，你会经常看到例如上面这样，支持实时编辑配置预览效果的页面配置预览工具，它可以帮助你更直观的看到具体配置所展示的页面效果。

配置中，$schema 这个字段可以忽略，它是指定当前 JSON 配置是符合指定路径 https://houtai.baidu.com/v2/schemas/page.json 的 JSON SCHEMA 文件描述的。

该实时编辑器就是通过该描述文件，实现输入提示的功能。

组件

上面提到，type字段会告诉 amis 当前节点渲染的组件为Page，Page 属于 amis 内置组件之一。

组件节点的配置永远都是由 type字段 （用于标识当前是哪个组件）和 若干属性值 构成的。

{
  "type": "xxx",
  ...若干属性值
}

组件树

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

{
  "type": "page",
  "body": {
    "type": "tpl",
    "tpl": "Hello World!"
  }
}

该配置渲染页面如下：

{
  "type": "page",
  "body": {
    "type": "tpl",
    "tpl": "Hello World!"
  }
}

看起来和之前的示例没啥区别，但是发现和之前不同的地方了吗？

这次 Page 组件的 body 属性值，我们配置了一个对象，通过type指明body内容区内会渲染一个叫Tpl的组件，它是一个模板渲染组件，这里我们先只是配置一段固定文字。

它是 Page 的子节点。

再来观察下面这个配置:

[
    {
      "type": "tpl",
      "tpl": "Hello World!"
    },
    {
        "type": "divider"
    },
    {
      "type": "form",
      "controls": [
        {
          "type": "text",
          "name": "name",
          "label": "姓名"
        }
      ]
    }
]

我们通过数组的形式，在内容区配置tpl和form组件。

没错，body 属性支持数组结构，这也就意味着你可以 通过组件树的形式 渲染出足够复杂的页面。

具有body这类属性的组件一般称为容器型组件，就如名字所形容的，这类组件可以作为容器，在他们的子节点配置若干其他类型的组件，amis 中还有很多类似的组件，例如Form、Service等，后续我们会逐一进行介绍。

注意：

Page是一个特殊的容器组件，它是 amis 页面配置中 必须也是唯一的顶级节点