amis：百度开源的低代码前端框架——简单引入示例。使用原生HTML避免打包部署。
归星驰
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编辑器的地址，使用方法，在下一篇文章。
类似资料：