amis：百度开源的低代码前端框架——简单引入示例。使用原生HTML避免打包部署。

最新推荐文章于 2025-03-17 23:35:30 发布

置顶麋麋鹿

最新推荐文章于 2025-03-17 23:35:30 发布

阅读量1.4w

点赞数 6

分类专栏： amis 文章标签： json html5 jquery vue.js 前端

本文链接：https://blog.youkuaiyun.com/Alan0728/article/details/119213559

版权

amis 专栏收录该内容

2 篇文章

订阅专栏

本文档介绍了如何利用百度开源的低代码前端框架amis，实现用户无需前端工程师即可自由更改页面内容、样式和布局的需求。通过引入amis库，与后台交互数据，用户可以通过编辑JSON并保存到数据库来更新页面。虽然涉及到的打包部署问题较为复杂，但通过简单的HTML页面和接口调用，可以实现项目的快速开发和灵活维护。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

amis官方文档：https://baidu.gitee.io/amis/zh-CN/docs/index

首先我们要了解到什么是amis，什么是低代码前端框架。

低代码平台是适用于前端力量薄弱的团队，实现用极少部分的代码去实现需求的一套前端框架

用少量的代码节约开发时间

通过了解后，国内的低代码前端框架很多需要money， amis是百度下的开源框架。

近期遇到一个需求：1.使用低代码开发项目。

2.要求写完的项目更具有自由行，用户可以随意的更改内容，样式和布局等等。

3.要求用户改的时候不用通过前端工程师，直接不懂技术的人也可以更改。

我们可以了解到，需求是一个很简单的需求，开发完成后用户可以随意更改并且不通过前端编写代码，但是难处理的是如果使用框架的情况下（本人比较喜欢Vue和一些开源框架）需要涉及到的是打包部署，这一部分操作如果真的要处理也是有办法处理的只不过有些麻烦。通过挠掉了几根头发的代价想到了一个办法：

通过HTML，引入amis，与后台沟通两条接口，一条保存数据，一条获取数据，上代码更直观。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>amis百度低代码</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <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="https://houtai.baidu.com/v2/csssdk" />
    <style>
        html,
        body,
        .amiss {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="amisId" class="amiss"></div>
    <script src="https://houtai.baidu.com/v2/jssdk"></script>
    <script type="text/javascript">
        (function () {
            let amis = amisRequire('amis/embed')
            $.ajax({
                type: 'GET',
                // 只写了一个简单的原生ajax 实际情况需要注意headers 和 type 
                // 下面两个URL是 ：一个获取数据 格式为字符串 JSON.parse转JSON 另一个URL为提交保存新的JSON
                // 思路是 首先获取接口中的数据 data 转成JSON串 渲染到页面 如果需要更改页面上面的配置的话 需要写一个提交页面 去把百度amis上面的例子的JSON复制过去 提交保存到数据库
                // HTML文件可以直接上传到服务器 你通过服务器地址 比如 http://xxx:xx/xx/xx/demo.html  你使用框架的时候只需要把框架搭好路由配置好 iframe引入就可以 
                // 如果后台比较给力的情况下 不需要你单独写HTML 直接后台通过你给的格式生成 到时候只需要返给你一个http链接就可以
                // url:'',
                url: '',
                success: function (result) {
                    console.log(result.data)
                    let amisData = amis.embed('#amisId', JSON.parse(result.data));
                }
            })
        })()
    </script>
</body>
</html>

整体的思路是：amis的代码展示为JSON格式，我们需要把渲染的JSON存到数据库，每次更改的时候需要用户去amis编辑器去编辑完成生成JSON，重新提交保存一下新的JSON，页面正常渲染。

amis编辑器的地址，使用方法，在下一篇文章。