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

最新推荐文章于 2025-03-06 15:40:21 发布

我就是全世界

最新推荐文章于 2025-03-06 15:40:21 发布

阅读量6.9k

点赞数 15

文章标签：低代码前端框架

本文链接：https://blog.csdn.net/qq_40999403/article/details/140522988

版权

什么是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(