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

amis官方文档：https://baidu.gitee.io/amis/zh-CN/docs/index首先我们要了解到什么是amis，什么是低代码前端框架。低代码平台是适用于前端力量薄弱的团队，实现用极少部分的代码去实现需求的一套前端框架用少量的代码节约开发时间通过了解后，国内的低代码前端框架很多需要money，amis是百度下的开源框架。近期遇到一个需求：1.使用低代码开发项目。2.要求写完

麋麋鹿

13325人浏览 · 2021-07-29 16:26:41

麋麋鹿 · 2021-07-29 16:26:41 发布

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编辑器的地址，使用方法，在下一篇文章。