什么是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目录里就能找到。
- 从 GitHub 下载：文件是
-
创建 HTML 文件
新建一个
hello.html文件，内容如下：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
bashnpm install amis -
创建 React 组件
在你的 React 项目中创建一个组件，例如
AmisPage.js，内容如下：javascriptimport 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组件：javascriptimport 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 来获取或提交数据。例如：
json
{
"type": "form",
"api": "/saveForm",
"controls": [
{ label: "Name", type: "text", name: "name" },
{ label: "Email", type: "email", name: "email" }
]
}在这个示例中，表单提交时会调用 /saveForm API。
2.2.2 如何自定义样式？
Amis 允许你通过 className 属性来添加自定义样式。例如：
json
{
"type": "form",
"className": "custom-form",
"controls": [
{ label: "Name", type: "text", name: "name" }
]
}然后在你的 CSS 文件中定义 custom-form 样式：
css
.custom-form {
background-color: #f0f0f0;
padding: 20px;
}2.2.3 如何处理表单验证？
Amis 内置了表单验证功能。你可以在 JSON 配置中为表单字段添加验证规则。例如：
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 字段必须是一个有效的邮箱地址。
json
{
"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配置来定义页面的结构和行为。每个组件都有其特定的配置项，通过这些配置项可以控制组件的显示和功能。
例如，一个简单的按钮组件可以这样配置：
json
{
"type": "button",
"label": "点击我",
"actionType": "dialog",
"dialog": {
"title": "提示",
"body": "你点击了按钮！"
}
}在这个例子中，type指定了组件的类型为按钮，label定义了按钮的文本，actionType和dialog则定义了按钮点击后的行为和弹出的对话框。
4.2 数据域与数据链
数据域（Data Scope）和数据链（Data Chain）是Amis中处理数据的核心概念。数据域定义了组件可以访问的数据范围，而数据链则描述了数据如何在组件之间传递。
例如，一个表单组件可以绑定到一个数据域：
json
{
"type": "form",
"api": "/api/saveForm",
"body": [
{
"type": "input-text",
"name": "username",
"label": "用户名"
},
{
"type": "input-password",
"name": "password",
"label": "密码"
}
]
}在这个例子中，name属性定义了数据域中的字段名，表单提交时会将这些字段的数据发送到指定的API。
4.3 模板
模板（Template）是Amis中用于动态生成内容的一种机制。通过模板，可以根据数据动态渲染组件的内容。
例如，一个列表组件可以使用模板来显示每个项目的标题和描述：
json
{
"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返回的数据格式如下：
json
{
"data": {
"userList": [
{
"name": "张三",
"age": 25
},
{
"name": "李四",
"age": 30
}
]
}
}可以通过数据映射将其转换为列表组件需要的数据格式：
json
{
"type": "list",
"source": "${data.userList}",
"item": {
"type": "tpl",
"tpl": "<div><h3>${name}</h3><p>年龄：${age}</p></div>"
}
}4.5 表达式
表达式（Expression）是Amis中用于动态计算值的一种机制。通过表达式，可以根据数据动态计算组件的属性值。
例如，一个按钮组件可以根据条件动态显示不同的文本：
json
{
"type": "button",
"label": "${isAdmin ? '管理员' : '普通用户'}"
}在这个例子中，label属性的值会根据isAdmin的值动态计算。
4.6 联动
联动（Linkage）是Amis中用于实现组件之间交互的一种机制。通过联动，可以根据一个组件的状态动态改变另一个组件的属性。
例如，一个下拉框组件可以根据选择的项目动态改变表单的提交地址：
json
{
"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中用于定义组件交互行为的一种机制。通过行为，可以定义组件的点击、提交、刷新等操作。
例如，一个按钮组件可以定义点击后刷新一个表格组件：
json
{
"type": "button",
"label": "刷新表格",
"actionType": "reload",
"target": "myTable"
}在这个例子中，actionType定义了按钮点击后的行为为刷新，target指定了要刷新的目标组件。
4.8 样式
样式（Style）是Amis中用于定义组件外观的一种机制。通过样式，可以自定义组件的颜色、大小、布局等。
例如，一个按钮组件可以定义自定义样式：
json
{
"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：
bashnpm install @ams-team/amis-sdk -
创建自定义组件：
javascriptimport 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 配置中使用自定义组件：
json{ "type": "my-custom-component", "props": { // 组件属性 } }
通过这种方式，开发者可以创建符合自己需求的组件，并将其集成到 Amis 页面中。
5.3 自定义组件-React
除了使用 SDK，开发者还可以直接使用 React 来创建自定义组件。以下是一个简单的示例：
-
创建 React 组件：
javascriptimport React from 'react'; class MyReactComponent extends React.Component { render() { return <div>My React Component</div>; } } export default MyReactComponent; -
注册组件：
javascriptimport { registerRenderer } from '@ams-team/amis-sdk'; import MyReactComponent from './MyReactComponent'; registerRenderer('my-react-component', MyReactComponent); -
在 JSON 配置中使用：
json{ "type": "my-react-component", "props": { // 组件属性 } }
这种方式更加灵活，适合需要复杂逻辑和交互的自定义组件。
5.4 将 Amis 当成 UI 库用
Amis 不仅可以作为低代码框架使用，还可以作为普通的 UI 库来使用。以下是如何将 Amis 当成 UI 库的步骤：
-
安装 Amis：
bashnpm install amis -
引入 Amis 组件：
javascriptimport { Button } from 'amis'; function MyApp() { return <Button>Click Me</Button>; } -
使用 Amis 样式：
javascriptimport 'amis/lib/themes/default.css';
通过这种方式，开发者可以在任何 React 项目中使用 Amis 的组件，快速构建用户界面。
5.5 扩展现有组件
Amis 允许开发者扩展现有的组件，以满足特定的需求。以下是扩展现有组件的基本步骤：
-
继承现有组件：创建一个新的组件，继承自现有的 Amis 组件。
javascriptimport { Button } from 'amis'; class ExtendedButton extends Button { render() { return <Button {...this.props} className="extended-button" />; } } -
注册扩展组件：
javascriptimport { registerRenderer } from '@ams-team/amis-sdk'; registerRenderer('extended-button', ExtendedButton); -
在 JSON 配置中使用扩展组件：
json{ "type": "extended-button", "props": { // 组件属性 } }
通过这种方式，开发者可以在不修改原有代码的情况下，增加新的功能或修改现有功能。
5.6 移动端定制
Amis 提供了移动端定制的功能，允许开发者为移动设备优化页面。通过移动端定制，开发者可以创建适配移动设备的页面，提供更好的用户体验。以下是移动端定制的基本步骤：
-
配置响应式布局：在 JSON 配置文件中，配置响应式布局，使页面能够根据设备屏幕大小自动调整布局。
json{ "type": "page", "responsive": true, "body": { // 页面内容 } } -
优化交互：针对移动设备的交互特点，优化组件的交互方式。
json{ "type": "button", "mobile": { "actionType": "toast", "toast": "Clicked on mobile" } } -
测试和调试：在移动设备上测试和调试页面，确保其在移动设备上的表现符合预期。
通过移动端定制，Amis 能够为移动设备提供优化的页面体验。
5.7 多语言
Amis 支持多语言功能，允许开发者创建多语言的页面。通过多语言支持，开发者可以为不同的语言环境提供相应的页面内容。以下是实现多语言的基本步骤：
-
配置语言包：创建不同语言的语言包，包含各个语言的文本内容。
json{ "locale": "en", "messages": { "welcome": "Welcome to Amis" } } -
切换语言：在页面中提供语言切换的功能，根据用户选择的语言加载相应的语言包。
json{ "type": "button", "label": "${messages.welcome}", "actionType": "changeLocale", "locale": "zh" } -
动态更新：在语言切换时，动态更新页面中的文本内容。
通过多语言支持，Amis 能够为全球用户提供本地化的页面体验。
5.8 可视化编辑器
Amis 提供了可视化编辑器，允许开发者通过拖拽的方式创建和编辑页面。可视化编辑器极大地简化了页面开发的过程，使非专业开发者也能快速创建复杂的页面。以下是使用可视化编辑器的基本步骤：
-
打开编辑器：启动 Amis 的可视化编辑器。
bashnpm 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可以加快资源的加载速度。