低代码前端框架Amis全面教程

Amis是一个基于JSON配置的前端低代码框架，由百度开源。它允许开发者通过简单的JSON配置文件来生成复杂的后台管理页面，从而大大减少了前端开发的工作量。Amis的核心理念是通过配置而非编码来实现页面的构建，这使得即使是不熟悉前端技术的开发者也能快速上手。JSON配置文件：定义页面的结构、样式和行为。组件库：提供了一系列可复用的UI组件，如表单、表格、图表等。渲染引擎：负责解析JSON配置并生成

我就是全世界

4550人浏览 · 2024-07-18 14:45:27

我就是全世界 · 2024-07-18 14:45:27 发布

什么是Amis？

1.1 Amis的基本概念

Amis是一个基于JSON配置的前端低代码框架，由百度开源。它允许开发者通过简单的JSON配置文件来生成复杂的后台管理页面，从而大大减少了前端开发的工作量。Amis的核心理念是通过配置而非编码来实现页面的构建，这使得即使是不熟悉前端技术的开发者也能快速上手。

Amis的主要组成部分包括：

JSON配置文件：定义页面的结构、样式和行为。
组件库：提供了一系列可复用的UI组件，如表单、表格、图表等。
渲染引擎：负责解析JSON配置并生成对应的HTML和JavaScript代码。

通过这些组件和工具，Amis能够帮助开发者快速构建出功能丰富、界面美观的后台管理系统。

1.2 Amis的特点

Amis具有以下几个显著特点：

低代码：通过JSON配置即可生成页面，无需编写大量前端代码，降低了开发门槛。
高效：能够快速构建和迭代页面，提高了开发效率。
可扩展：支持自定义组件和扩展，满足不同项目的需求。
广泛应用：Amis在百度内部得到了广泛应用，在4年多的时间里创建了3w多页面，从内容审核到机器管理，从数据分析到模型训练，Amis满足了各种各样的页面需求。
易于维护：由于页面是通过JSON配置来定义的，因此代码的可读性和可维护性都非常高。

通过这些特点，Amis不仅提升了开发效率，还降低了开发和维护的成本，使得更多的开发者能够参与到前端页面的开发中来。

快速开始

2.1 快速开始

Amis 是一个基于 JSON 配置的前端低代码框架，让开发者通过简单的配置就能快速生成各种后台页面。以下是快速开始使用 Amis 的步骤：

2.1.1 SDK 版本

SDK 版本适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，可以像 Vue/jQuery 那样外链代码就能使用。

下载 SDK
- 从 GitHub 下载：文件是 sdk.tar.gz。
- 使用 npm 下载：在 node_modules\amis\sdk 目录里就能找到。

创建 HTML 文件
新建一个 hello.html 文件，内容如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>amis demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <link rel="stylesheet" href="sdk.css"/>
    <link rel="stylesheet" href="helper.css"/>
    <style>
        html, body, .app-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="root" class="app-wrapper"></div>
    <script src="sdk.js"></script>
    <script type="text/javascript">
        (function() {
            let amis = amisRequire('amis/embed');
            let amisJSON = {
                type: 'page',
                title: '表单页面',
                body: {
                    type: 'form',
                    mode: 'horizontal',
                    api: '/saveForm',
                    controls: [
                        { label: 'Name', type: 'text', name: 'name' },
                        { label: 'Email', type: 'email', name: 'email' }
                    ]
                }
            };
            let amisScoped = amis.embed('#root', amisJSON);
        })();
    </script>
</body>
</html>

2.1.2 npm 版本

npm 版本适合对前端或 React 有一定了解的开发者。

安装 Amis
```
npm install amis
```

创建 React 组件
在你的 React 项目中创建一个组件，例如 AmisPage.js，内容如下：

import React from 'react';
import { render as renderAmis } from 'amis';

const amisJSON = {
    type: 'page',
    title: '表单页面',
    body: {
        type: 'form',
        mode: 'horizontal',
        api: '/saveForm',
        controls: [
            { label: 'Name', type: 'text', name: 'name' },
            { label: 'Email', type: 'email', name: 'email' }
        ]
    }
};

const AmisPage = () => {
    return (
        <div id="root">
            {renderAmis(amisJSON, {}, {})}
        </div>
    );
};

export default AmisPage;

在主应用中引入
在你的主应用文件（例如 App.js）中引入并使用 AmisPage 组件：

import React from 'react';
import ReactDOM from 'react-dom';
import AmisPage from './AmisPage';

const App = () => {
    return (
        <div>
            <AmisPage />
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));

2.2 常见问题

在使用 Amis 的过程中，可能会遇到一些常见问题。以下是一些常见问题的解答：

2.2.1 如何处理数据交互？

Amis 提供了丰富的数据交互功能。你可以在 JSON 配置中定义 API，并在组件中使用这些 API 来获取或提交数据。例如：

{
    "type": "form",
    "api": "/saveForm",
    "controls": [
        { label: "Name", type: "text", name: "name" },
        { label: "Email", type: "email", name: "email" }
    ]
}

在这个示例中，表单提交时会调用 /saveForm API。

2.2.2 如何自定义样式？

Amis 允许你通过 className 属性来添加自定义样式。例如：

{
    "type": "form",
    "className": "custom-form",
    "controls": [
        { label: "Name", type: "text", name: "name" }
    ]
}

然后在你的 CSS 文件中定义 custom-form 样式：

.custom-form {
    background-color: #f0f0f0;
    padding: 20px;
}

2.2.3 如何处理表单验证？

Amis 内置了表单验证功能。你可以在 JSON 配置中为表单字段添加验证规则。例如：

{
    "type": "form",
    "controls": [
        {
            label: "Name",
            type: "text",
            name: "name",
            required: true
        },
        {
            label: "Email",
            type: "email",
            name: "email",
            required: true,
            validations: {
                isEmail: true
            }
        }
    ]
}

在这个示例中，Name 和 Email 字段都是必填的，并且 Email 字段必须是一个有效的邮箱地址。

{
  "h1": "如何使用Amis？",
  "h2": [
    {
      "title": "3.1 安装Amis",
      "content": "在使用Amis之前，首先需要将其安装到你的项目中。Amis可以通过npm或yarn进行安装。以下是具体的安装步骤：\n\n### 使用npm安装\n```bash\nnpm install amis\n```\n\n### 使用yarn安装\n```bash\nyarn add amis\n```\n\n安装完成后，你就可以在你的项目中引入Amis并开始使用了。"
    },
    {
      "title": "3.2 创建JSON配置文件",
      "content": "Amis的核心是通过JSON配置来生成页面。你需要创建一个JSON文件，并在其中定义页面的结构和行为。以下是一个简单的JSON配置示例：\n\n```json\n{\n  \"type\": \"page\",\n  \"body\": {\n    \"type\": \"form\",\n    \"api\": \"/saveForm\",\n    \"body\": [\n      {\n        \"type\": \"input-text\",\n        \"name\": \"name\",\n        \"label\": \"姓名\"\n      },\n      {\n        \"type\": \"input-password\",\n        \"name\": \"password\",\n        \"label\": \"密码\"\n      }\n    ]\n  }\n}\n```\n\n在这个示例中，我们定义了一个包含表单的页面，表单中有两个字段：姓名和密码。"
    },
    {
      "title": "3.3 引入Amis",
      "content": "在你的项目中引入Amis，可以通过以下方式：\n\n```javascript\nimport { render as amisRender } from 'amis';\nimport 'amis/lib/themes/default.css';\nimport 'amis/lib/helper.css';\nimport 'amis/sdk/iconfont.css';\n```\n\n确保你已经引入了Amis的CSS文件，以便页面能够正确渲染。"
    },
    {
      "title": "3.4 渲染页面",
      "content": "在引入Amis之后，你可以使用amisRender函数来渲染页面。以下是一个简单的示例：\n\n```javascript\nconst amisJSON = {\n  \"type\": \"page\",\n  \"body\": {\n    \"type\": \"form\",\n    \"api\": \"/saveForm\",\n    \"body\": [\n      {\n        \"type\": \"input-text\",\n        \"name\": \"name\",\n        \"label\": \"姓名\"\n      },\n      {\n        \"type\": \"input-password\",\n        \"name\": \"password\",\n        \"label\": \"密码\"\n      }\n    ]\n  }\n};\n\nconst app = document.getElementById('app');\napp.innerHTML = amisRender(amisJSON);\n```\n\n在这个示例中，我们将之前定义的JSON配置传递给amisRender函数，并将渲染结果插入到id为'app'的DOM元素中。"
    },
    {
      "title": "3.5 数据交互",
      "content": "Amis支持与后端API进行数据交互。你可以在JSON配置中定义API，并在表单提交或其他操作时自动调用这些API。以下是一个示例：\n\n```json\n{\n  \"type\": \"page\",\n  \"body\": {\n    \"type\": \"form\",\n    \"api\": \"/saveForm\",\n    \"body\": [\n      {\n        \"type\": \"input-text\",\n        \"name\": \"name\",\n        \"label\": \"姓名\"\n      },\n      {\n        \"type\": \"input-password\",\n        \"name\": \"password\",\n        \"label\": \"密码\"\n      }\n    ]\n  }\n}\n```\n\n在这个示例中，表单提交时会自动调用`/saveForm`这个API，并将表单数据发送给后端。"
    }
  ]
}

概念

4.1 配置与组件

在Amis中，配置与组件是构建页面的基础。Amis使用JSON配置来定义页面的结构和行为。每个组件都有其特定的配置项，通过这些配置项可以控制组件的显示和功能。

例如，一个简单的按钮组件可以这样配置：

{
  "type": "button",
  "label": "点击我",
  "actionType": "dialog",
  "dialog": {
    "title": "提示",
    "body": "你点击了按钮！"
  }
}

在这个例子中，type指定了组件的类型为按钮，label定义了按钮的文本，actionType和dialog则定义了按钮点击后的行为和弹出的对话框。

4.2 数据域与数据链

数据域（Data Scope）和数据链（Data Chain）是Amis中处理数据的核心概念。数据域定义了组件可以访问的数据范围，而数据链则描述了数据如何在组件之间传递。

例如，一个表单组件可以绑定到一个数据域：

{
  "type": "form",
  "api": "/api/saveForm",
  "body": [
    {
      "type": "input-text",
      "name": "username",
      "label": "用户名"
    },
    {
      "type": "input-password",
      "name": "password",
      "label": "密码"
    }
  ]
}

在这个例子中，name属性定义了数据域中的字段名，表单提交时会将这些字段的数据发送到指定的API。

4.3 模板

模板（Template）是Amis中用于动态生成内容的一种机制。通过模板，可以根据数据动态渲染组件的内容。

例如，一个列表组件可以使用模板来显示每个项目的标题和描述：

{
  "type": "list",
  "source": "${items}",
  "item": {
    "type": "tpl",
    "tpl": "<div><h3>${title}</h3><p>${description}</p></div>"
  }
}

在这个例子中，source指定了数据源，tpl定义了每个项目的模板，模板中的${title}和${description}会根据数据动态替换。

4.4 数据映射

数据映射（Data Mapping）是Amis中用于将数据从一个格式转换为另一个格式的一种机制。通过数据映射，可以方便地将后端返回的数据转换为前端组件需要的格式。

例如，一个API返回的数据格式如下：

{
  "data": {
    "userList": [
      {
        "name": "张三",
        "age": 25
      },
      {
        "name": "李四",
        "age": 30
      }
    ]
  }
}

可以通过数据映射将其转换为列表组件需要的数据格式：

{
  "type": "list",
  "source": "${data.userList}",
  "item": {
    "type": "tpl",
    "tpl": "<div><h3>${name}</h3><p>年龄：${age}</p></div>"
  }
}

4.5 表达式

表达式（Expression）是Amis中用于动态计算值的一种机制。通过表达式，可以根据数据动态计算组件的属性值。

例如，一个按钮组件可以根据条件动态显示不同的文本：

{
  "type": "button",
  "label": "${isAdmin ? '管理员' : '普通用户'}"
}

在这个例子中，label属性的值会根据isAdmin的值动态计算。

4.6 联动

联动（Linkage）是Amis中用于实现组件之间交互的一种机制。通过联动，可以根据一个组件的状态动态改变另一个组件的属性。

例如，一个下拉框组件可以根据选择的项目动态改变表单的提交地址：

{
  "type": "form",
  "api": "${selectedOption.api}",
  "body": [
    {
      "type": "select",
      "name": "selectedOption",
      "label": "选择选项",
      "options": [
        {
          "label": "选项1",
          "value": "option1",
          "api": "/api/option1"
        },
        {
          "label": "选项2",
          "value": "option2",
          "api": "/api/option2"
        }
      ]
    }
  ]
}

在这个例子中，api属性的值会根据selectedOption的值动态改变。

4.7 行为

行为（Action）是Amis中用于定义组件交互行为的一种机制。通过行为，可以定义组件的点击、提交、刷新等操作。

例如，一个按钮组件可以定义点击后刷新一个表格组件：

{
  "type": "button",
  "label": "刷新表格",
  "actionType": "reload",
  "target": "myTable"
}

在这个例子中，actionType定义了按钮点击后的行为为刷新，target指定了要刷新的目标组件。

4.8 样式

样式（Style）是Amis中用于定义组件外观的一种机制。通过样式，可以自定义组件的颜色、大小、布局等。

例如，一个按钮组件可以定义自定义样式：

{
  "type": "button",
  "label": "自定义样式按钮",
  "className": "custom-button"
}

在这个例子中，className定义了按钮的自定义样式类。

4.9 类型SchemaNode

类型SchemaNode是Amis中用于定义组件结构和属性的

高级

5.1 工作原理

Amis 是一个低代码前端框架，它通过 JSON 配置来生成页面，从而减少页面开发工作量，极大提升效率。Amis 的工作原理可以分为以下几个关键步骤：

JSON 配置解析：Amis 首先解析开发者提供的 JSON 配置文件。这个配置文件定义了页面的结构、组件、数据源、交互行为等。
组件渲染：根据 JSON 配置，Amis 动态生成相应的 React 组件树。每个组件都有其特定的功能和样式，这些都在配置中定义。
数据绑定：Amis 支持数据域和数据链的概念，可以在组件之间共享数据。数据绑定使得组件能够根据数据的变化自动更新。
事件处理：Amis 通过配置中的事件和动作来处理用户交互。例如，点击按钮时可以触发某个 API 请求或更新某个组件的状态。
样式和布局：Amis 提供了丰富的样式和布局选项，可以通过配置来调整组件的外观和页面布局。

通过这些步骤，Amis 能够快速生成复杂的页面，并且保持高度的灵活性和可维护性。

5.2 自定义组件-SDK

Amis 提供了自定义组件的 SDK，允许开发者扩展和创建新的组件。以下是自定义组件的基本步骤：

安装 Amis SDK：
```
npm install @ams-team/amis-sdk
```

创建自定义组件：

import React from 'react';
import { registerRenderer } from '@ams-team/amis-sdk';

class MyCustomComponent extends React.Component {
  render() {
    return <div>My Custom Component</div>;
  }
}

registerRenderer('my-custom-component', MyCustomComponent);

在 JSON 配置中使用自定义组件：

{
  "type": "my-custom-component",
  "props": {
    // 组件属性
  }
}

通过这种方式，开发者可以创建符合自己需求的组件，并将其集成到 Amis 页面中。

5.3 自定义组件-React

除了使用 SDK，开发者还可以直接使用 React 来创建自定义组件。以下是一个简单的示例：

创建 React 组件：

import React from 'react';

class MyReactComponent extends React.Component {
  render() {
    return <div>My React Component</div>;
  }
}

export default MyReactComponent;

注册组件：

import { registerRenderer } from '@ams-team/amis-sdk';
import MyReactComponent from './MyReactComponent';

registerRenderer('my-react-component', MyReactComponent);

在 JSON 配置中使用：

{
  "type": "my-react-component",
  "props": {
    // 组件属性
  }
}

这种方式更加灵活，适合需要复杂逻辑和交互的自定义组件。

5.4 将 Amis 当成 UI 库用

Amis 不仅可以作为低代码框架使用，还可以作为普通的 UI 库来使用。以下是如何将 Amis 当成 UI 库的步骤：

安装 Amis：
```
npm install amis
```

引入 Amis 组件：

import { Button } from 'amis';

function MyApp() {
  return <Button>Click Me</Button>;
}

使用 Amis 样式：
```
import 'amis/lib/themes/default.css';
```

通过这种方式，开发者可以在任何 React 项目中使用 Amis 的组件，快速构建用户界面。

5.5 扩展现有组件

Amis 允许开发者扩展现有的组件，以满足特定的需求。以下是扩展现有组件的基本步骤：

继承现有组件：创建一个新的组件，继承自现有的 Amis 组件。

import { Button } from 'amis';

class ExtendedButton extends Button {
  render() {
    return <Button {...this.props} className="extended-button" />;
  }
}

注册扩展组件：

import { registerRenderer } from '@ams-team/amis-sdk';

registerRenderer('extended-button', ExtendedButton);

在 JSON 配置中使用扩展组件：

{
  "type": "extended-button",
  "props": {
    // 组件属性
  }
}

通过这种方式，开发者可以在不修改原有代码的情况下，增加新的功能或修改现有功能。

5.6 移动端定制

Amis 提供了移动端定制的功能，允许开发者为移动设备优化页面。通过移动端定制，开发者可以创建适配移动设备的页面，提供更好的用户体验。以下是移动端定制的基本步骤：

配置响应式布局：在 JSON 配置文件中，配置响应式布局，使页面能够根据设备屏幕大小自动调整布局。
```
{
  "type": "page",
  "responsive": true,
  "body": {
    // 页面内容
  }
}
```

优化交互：针对移动设备的交互特点，优化组件的交互方式。

{
  "type": "button",
  "mobile": {
    "actionType": "toast",
    "toast": "Clicked on mobile"
  }
}

测试和调试：在移动设备上测试和调试页面，确保其在移动设备上的表现符合预期。

通过移动端定制，Amis 能够为移动设备提供优化的页面体验。

5.7 多语言

Amis 支持多语言功能，允许开发者创建多语言的页面。通过多语言支持，开发者可以为不同的语言环境提供相应的页面内容。以下是实现多语言的基本步骤：

配置语言包：创建不同语言的语言包，包含各个语言的文本内容。

{
  "locale": "en",
  "messages": {
    "welcome": "Welcome to Amis"
  }
}

切换语言：在页面中提供语言切换的功能，根据用户选择的语言加载相应的语言包。

{
  "type": "button",
  "label": "${messages.welcome}",
  "actionType": "changeLocale",
  "locale": "zh"
}

动态更新：在语言切换时，动态更新页面中的文本内容。

通过多语言支持，Amis 能够为全球用户提供本地化的页面体验。

5.8 可视化编辑器

Amis 提供了可视化编辑器，允许开发者通过拖拽的方式创建和编辑页面。可视化编辑器极大地简化了页面开发的过程，使非专业开发者也能快速创建复杂的页面。以下是使用可视化编辑器的基本步骤：

打开编辑器：启动 Amis 的可视化编辑器。
```
npm run amis-editor
```
拖拽组件：在编辑器中拖拽组件，构建页面的布局。
配置属性：为每个组件配置属性，设置其行为和样式。
预览和发布：在编辑器中预览页面，确认无误后发布页面。

通过可视化编辑器，开发者可以直观地创建和编辑页面，提高开发效率。

实践经验分享

6.1 学习资料

在使用Amis进行开发时，获取高质量的学习资料是非常重要的。以下是一些推荐的学习资源：

官方文档：Amis的官方文档是最权威的学习资料，包含了从基础到高级的所有内容。建议开发者首先阅读官方文档，以便对Amis有一个全面的了解。
GitHub仓库：Amis的GitHub仓库中包含了大量的示例代码和项目案例，可以通过这些案例学习如何实际应用Amis。
社区论坛：加入Amis的社区论坛，可以与其他开发者交流经验，解决遇到的问题。
在线教程：网络上有很多关于Amis的在线教程和视频课程，这些教程通常由经验丰富的开发者制作，可以帮助新手快速入门。

6.2 组件复用

在实际开发中，组件的复用可以大大提高开发效率。以下是一些组件复用的技巧：

创建可复用组件：在开发过程中，可以将常用的功能封装成独立的组件，这样在不同的项目中可以直接引用这些组件，避免重复开发。
使用组件库：Amis提供了丰富的内置组件，同时也有很多第三方组件库可以使用。合理利用这些组件库可以减少开发工作量。
组件参数化：在设计组件时，尽量使组件参数化，这样可以通过不同的参数配置来满足不同的需求，提高组件的灵活性。

6.3 数据处理

数据处理是前端开发中的重要环节。以下是一些数据处理的技巧：

数据映射：Amis支持数据映射功能，可以将后端返回的数据映射到前端组件中，使数据展示更加灵活。
数据缓存：对于频繁请求的数据，可以使用缓存机制减少请求次数，提高页面加载速度。
数据校验：在表单提交等场景中，对数据进行校验是非常必要的。Amis提供了丰富的数据校验功能，可以方便地进行数据校验。

6.4 调试技巧

调试是开发过程中不可避免的环节。以下是一些调试技巧：

使用浏览器开发者工具：浏览器自带的开发者工具是调试的利器，可以查看页面元素、网络请求、控制台输出等。
日志输出：在关键代码处添加日志输出，可以帮助快速定位问题。
模拟数据：在开发阶段，可以使用模拟数据进行调试，避免依赖后端接口。

6.5 性能优化

性能优化是提升用户体验的关键。以下是一些性能优化的技巧：

懒加载：对于页面中不立即需要的内容，可以使用懒加载技术，减少初始加载时间。
代码分割：将代码分割成多个小块，按需加载，可以减少单次加载的文件大小。
减少HTTP请求：合并CSS和JavaScript文件，减少页面加载时的HTTP请求次数。
使用CDN：对于第三方资源，使用CDN可以加快资源的加载速度。

松山湖开发者村综合服务平台

助力广东及东莞地区开发者，代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展，成为松山湖开发者首选的工作与学习平台

更多推荐

数据小白必看：七大排序算法超详细讲解（上）

松山湖开发者村综合服务平台

【贪心算法】贪心算法六

松山湖开发者村综合服务平台

发布/部署WebApi服务器(IIS+.NET8+ASP.NETCore)

松山湖开发者村综合服务平台

所有评论(0)

查看更多评论

我就是全世界

@qq_40999403

已为社区贡献2条内容