良心产品—百度开源前端框架Amis

2024-09-06科技

最近发现自己在低代码的道路上越走越远了，各种低代码平台层出不穷，学习成本也越来越高，可怜我的头发在日渐稀少......[流泪]

话说回来，低代码一直用一直香！！！

什么是 amis？

amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。通过 JSON 配置就能生成各种后台页面，极大减少开发成本，甚至可以不需要了解前端。

先简单看一下

一个最简单的 amis 配置看起来是这样的：

{ "type": "page", "body": "Hello World!"}#这是一段 JSON，它的含义是：#type 是 amis 节点中最重要的字段，它告诉 amis 当前节点需要渲染的是Page组件。#而 body 字段会作为 Page 组件的属性，Page 组件根据这个值来渲染页面内容。

Page是 amis 页面配置中必须也是唯一的顶级节点

2. 数据域与数据链

#添加初始化接口{ "type": "page", "initApi": "/amis/api/mock2/page/initData", "body": "date is ${date}"}#这个 api 接口返回的数据结构如下：{ "status": 0, "msg": "", "data": { "title": "Test Page Component", "date": "2017-10-13" }}# 渲染后结果： date is 2017-10-13

简单列举了两个例子，是不是很简单，so easy

好吧，快速开始

Amis 有两种使用方法：

JS SDK，可以用在任意页面中

React，可以用在 React 项目中

SDK 版本适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，可以像 Vue/jQuery 那样外链代码就能使用。

SDK:

下载方式：

github 的 releases，文件是 sdk.tar.gz。
使用 npm i amis 来下载，在 node_modules\amis\sdk 目录里就能找到。

切换主题：

jssdk 版本默认使用 sdk.css 即云舍主题，如果你想使用仿 Antd，请将 css 引用改成 antd.css。同时 js 渲染地方第四个参数传入 theme 属性。如：

Vue:

可以基于 SDK 版本封装成 component 供 vue 使用，具体请参考示例：https://github.com/aisuda/vue2-amis-demo

React:

初始项目请参考 https://github.com/aisuda/amis-react-starter。

如果在已有项目中，React 版本需要是 >=16.8.6，mobx 需要 ^4.5.0。

amis 1.6.5 及以上版本支持 React 17。

安装：

npm i amis

组件介绍

1.Page 页面

{ "type": "page", "body": { "type": "form", "api": "/amis/api/mock2/form/saveForm", "body": [ { "type": "input-text", "name": "name", "label": "姓名：" } ] }}

2.Container 容器

{ "type": "page", "body": { "type": "container", "body": "这里是容器内容区" }}

3.Collapse 折叠器

{ "type": "page", "body": { "type": "collapse-group", "activeKey": [ "1" ], "body": [ { "type": "collapse", "key": "1", "header": "标题1", "body": "这里是内容1" }, { "type": "collapse", "key": "2", "header": "标题2", "body": "这里是内容2" }, { "type": "collapse", "key": "3", "header": "标题3", "body": "这里是内容3" } ] }}

4.Flex 布局

{ "type": "page", "body": { "type": "flex", "items": [ { " style": { "backgroundColor": "#1A5CFF", "width": 100, "height": 50, "margin": 5 }, "type": "tpl", "tpl": "" } ] }}

5.Form 表单

{ "type": "page", "body": { "type": "form", "body": [ { "type": "input-text", "label": "文本框", "name": "text" }, { "type": "input-password", "label": "<a href='./password'>密码</a>", "name": "password" } ] }}

6.CRUD 增删改查

CRUD，即增删改查组件，主要用来展现数据列表，并支持各类【增】【删】【改】【查】等操作。

注意 CRUD 所需的数据必须放 items 中，因此如果只是想显示表格类型的数据没有分页，请使用 Table。

程序员的CRUD

7.demo 示例

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

用 JSON 写页面有什么好处

为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 JSON 来配置，它的独特好处是：

不需要懂前端 ：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 JavaScript，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的；

不受前端技术更新的影响 ：百度内部最老的 amis 页面是 6 年多前创建的，至今还在使用，而当年的 Angular/Vue/React 版本现在都废弃了，当年流行的 Gulp 也被 Webpack 取代了，如果这些页面不是用 amis，现在的维护成本会很高；

享受 amis 的不断升级 ：amis 一直在提升细节交互体验，比如表格首行冻结、下拉框大数据下不卡顿等，之前的 JSON 配置完全不需要修改；

可以完全使用可视化页面编辑器来制作页面：一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。

其他亮点

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

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

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

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

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

amis 不适合做什么？

使用 JSON 有优点但也有明显缺点，在以下场合并不适合 amis：

大量定制 UI ：JSON 配置使得 amis 更适合做有大量常见 UI 组件的页面，但对于面向普通客户（toC）的页面，往往追求个性化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。

极为复杂或特殊的交互 ：有些复杂的前端功能，比如可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 DOM 实现的功能无法使用 amis。但对于某些交互固定的领域，比如图连线，amis 后续会有专门的组件来实现。

总结

amis确实可以说是一个良心产品，对于一些简单的功能，只要有api就能实现完整的系统，组件丰富，样式也很好看，对于前端不是很擅长的人员来说非常的友好，对于高手也能提升效率！