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

什么是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 那样外链代码就能使用。

  1. 下载 SDK

    • 从 GitHub 下载:文件是 sdk.tar.gz
    • 使用 npm 下载:在 node_modules\amis\sdk 目录里就能找到。
  2. 创建 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 有一定了解的开发者。

  1. 安装 Amis

    bash 复制代码
    npm install amis
  2. 创建 React 组件

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

    javascript 复制代码
    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;
  3. 在主应用中引入

    在你的主应用文件(例如 App.js)中引入并使用 AmisPage 组件:

    javascript 复制代码
    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 来获取或提交数据。例如:

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
            }
        }
    ]
}

在这个示例中,NameEmail 字段都是必填的,并且 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定义了按钮的文本,actionTypedialog则定义了按钮点击后的行为和弹出的对话框。

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 的工作原理可以分为以下几个关键步骤:

  1. JSON 配置解析:Amis 首先解析开发者提供的 JSON 配置文件。这个配置文件定义了页面的结构、组件、数据源、交互行为等。

  2. 组件渲染:根据 JSON 配置,Amis 动态生成相应的 React 组件树。每个组件都有其特定的功能和样式,这些都在配置中定义。

  3. 数据绑定:Amis 支持数据域和数据链的概念,可以在组件之间共享数据。数据绑定使得组件能够根据数据的变化自动更新。

  4. 事件处理:Amis 通过配置中的事件和动作来处理用户交互。例如,点击按钮时可以触发某个 API 请求或更新某个组件的状态。

  5. 样式和布局:Amis 提供了丰富的样式和布局选项,可以通过配置来调整组件的外观和页面布局。

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

5.2 自定义组件-SDK

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

  1. 安装 Amis SDK

    bash 复制代码
    npm install @ams-team/amis-sdk
  2. 创建自定义组件

    javascript 复制代码
    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);
  3. 在 JSON 配置中使用自定义组件

    json 复制代码
    {
      "type": "my-custom-component",
      "props": {
        // 组件属性
      }
    }

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

5.3 自定义组件-React

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

  1. 创建 React 组件

    javascript 复制代码
    import React from 'react';
    
    class MyReactComponent extends React.Component {
      render() {
        return <div>My React Component</div>;
      }
    }
    
    export default MyReactComponent;
  2. 注册组件

    javascript 复制代码
    import { registerRenderer } from '@ams-team/amis-sdk';
    import MyReactComponent from './MyReactComponent';
    
    registerRenderer('my-react-component', MyReactComponent);
  3. 在 JSON 配置中使用

    json 复制代码
    {
      "type": "my-react-component",
      "props": {
        // 组件属性
      }
    }

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

5.4 将 Amis 当成 UI 库用

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

  1. 安装 Amis

    bash 复制代码
    npm install amis
  2. 引入 Amis 组件

    javascript 复制代码
    import { Button } from 'amis';
    
    function MyApp() {
      return <Button>Click Me</Button>;
    }
  3. 使用 Amis 样式

    javascript 复制代码
    import 'amis/lib/themes/default.css';

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

5.5 扩展现有组件

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

  1. 继承现有组件:创建一个新的组件,继承自现有的 Amis 组件。

    javascript 复制代码
    import { Button } from 'amis';
    
    class ExtendedButton extends Button {
      render() {
        return <Button {...this.props} className="extended-button" />;
      }
    }
  2. 注册扩展组件

    javascript 复制代码
    import { registerRenderer } from '@ams-team/amis-sdk';
    
    registerRenderer('extended-button', ExtendedButton);
  3. 在 JSON 配置中使用扩展组件

    json 复制代码
    {
      "type": "extended-button",
      "props": {
        // 组件属性
      }
    }

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

5.6 移动端定制

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

  1. 配置响应式布局:在 JSON 配置文件中,配置响应式布局,使页面能够根据设备屏幕大小自动调整布局。

    json 复制代码
    {
      "type": "page",
      "responsive": true,
      "body": {
        // 页面内容
      }
    }
  2. 优化交互:针对移动设备的交互特点,优化组件的交互方式。

    json 复制代码
    {
      "type": "button",
      "mobile": {
        "actionType": "toast",
        "toast": "Clicked on mobile"
      }
    }
  3. 测试和调试:在移动设备上测试和调试页面,确保其在移动设备上的表现符合预期。

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

5.7 多语言

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

  1. 配置语言包:创建不同语言的语言包,包含各个语言的文本内容。

    json 复制代码
    {
      "locale": "en",
      "messages": {
        "welcome": "Welcome to Amis"
      }
    }
  2. 切换语言:在页面中提供语言切换的功能,根据用户选择的语言加载相应的语言包。

    json 复制代码
    {
      "type": "button",
      "label": "${messages.welcome}",
      "actionType": "changeLocale",
      "locale": "zh"
    }
  3. 动态更新:在语言切换时,动态更新页面中的文本内容。

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

5.8 可视化编辑器

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

  1. 打开编辑器:启动 Amis 的可视化编辑器。

    bash 复制代码
    npm run amis-editor
  2. 拖拽组件:在编辑器中拖拽组件,构建页面的布局。

  3. 配置属性:为每个组件配置属性,设置其行为和样式。

  4. 预览和发布:在编辑器中预览页面,确认无误后发布页面。

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

实践经验分享

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可以加快资源的加载速度。
相关推荐
GJCTYU16 分钟前
阿里云多端低代码开发平台魔笔使用测评
低代码·阿里云·云原生·容器·serverless·云计算
PleaSure乐事12 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
getaxiosluo12 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v12 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
易云码12 小时前
信息安全建设方案,网络安全等保测评方案,等保技术解决方案,等保总体实施方案(Word原件)
数据库·物联网·安全·web安全·低代码
Oo_Amy_oO19 小时前
【极限编程(XP)】
低代码·极限编程
September_ning20 小时前
React.lazy() 懒加载
前端·react.js·前端框架
晴天飛 雪20 小时前
React 守卫路由
前端框架·reactjs
web行路人20 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
逆天的蝈蝈1 天前
开源与商业的碰撞TPFLOW与Gadmin低代码的商业合作
低代码·开源