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

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

什么是 amis？

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

先简单看一下

1. 一个最简单的 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:

下载方式：

1. github 的 releases，文件是 sdk.tar.gz。
2. 使用 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。

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就能实现完整的系统，组件丰富，样式也很好看，对于前端不是很擅长的人员来说非常的友好，对于高手也能提升效率！