一个低代码前端框架，使用JSON配置来生成页面，可以减少开发工作量，提升效率_首页可配置化布局json

一、项目简介

amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。

二、开源协议

使用 Apache-2.0 开源许可协议。

三、功能介绍

这是个前端低代码框架，通过 JSON 配置就能生成各种后台页面，极大减少开发成本，甚至可以不需要了解前端。

1. 提供完整的界面解决方案：其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 amis 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能，做出来的页面不需要经过二次开发就能直接上线；

2. 大量内置组件（120+），一站式解决：其它 UI 框架大部分都只有最通用的组件，如果遇到一些稍微不常用的组件就得自己找第三方，而这些第三方组件往往在展现和交互上不一致，整合起来效果不好，而 amis 则内置大量组件，包括了富文本编辑器、代码编辑器、diff、条件组合、实时日志等业务组件，绝大部分中后台页面开发只需要了解 amis 就足够了；

3. 支持扩展：除了低代码模式，还可以通过 自定义组件 来扩充组件，实际上 amis 可以当成普通 UI 库来使用，实现 90% 低代码，10% 代码开发的混合模式，既提升了效率，又不失灵活性；

4. 容器支持无限级嵌套：可以通过嵌套来满足各种布局及展现需求；

5. 经历了长时间的实战考验：amis 在百度内部得到了广泛使用，在 6 年多的时间里创建了 5 万页面，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求，最复杂的页面有超过 1 万行 JSON 配置。

四、演示展示

演示地址：

https://aisuda.bce.baidu.com/amis/examples/index

这个界面虽然用 Bootstrap 及各种前端 UI 库也能做出个大概，但仔细观察会发现它有大量细节功能，比如：

• 可以对数据做筛选

• 有按钮可以刷新数据

• 编辑单行数据

• 批量修改和删除

• 按某列排序

• 可以隐藏某些列

• 可以调整列顺序

• 自动生成顶部查询区域

• 可调整列宽度

• 开启整页内容拖拽排序

• 表格有分页（页数还能同步到地址栏，不过这个例子中关了）

• 有数据汇总

• 支持导出 Excel

• 「渲染引擎」那列的表头有提示文字

• 鼠标移动到「平台」那列的内容时还有放大镜符号，可以展开查看更多

• 如果往下拖动还有首行冻结来方便查看表头（因为文档页面的限制，这个功能在这里看不出来）

全部实现这些需要大量的代码。

但可以看到，用 amis 只需要 157 行 JSON 配置（其中 47 行只有一个括号），你不需要了解 React/Vue、Webpack，甚至不需要很了解 JavaScript，即便没学过 amis 也能猜到大部分配置的作用，只需要简单配置就能完成所有页面开发。

amis 可视化编辑器：

五、技术选型

amis 的渲染过程是将 json 转成对应的 React 组件。先通过 json 的 type 找到对应的 Component，然后把其他属性作为 props 传递过去完成渲染。

六、源码地址

开源地址：

关注并回复【amis】获取项目源码。