百度低代码框架amis介绍及实例讲解

不要冗余

已于 2022-08-22 08:54:08 修改

阅读量3.8w

点赞数 61

分类专栏：转向前端文章标签：前端低代码平台 AMIS

于 2022-06-01 05:30:00 首次发布

本文链接：https://blog.csdn.net/qq_42887496/article/details/125063028

版权

转向前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

引言

目前低代码概念已经无人不知，随着新冠病毒的爆发，远程办公、视频会议、直播等数字化应用迅速发展起来，也让低代码平台迎来了特别关注。那么问题来了，什么是低代码开发？低代码平台对未来的数字化、智能化生态会产生什么影响？
低代码开发是通过页面拖拉拽的形式实现在线构建应用程序，旨在简化开发过程，缩短开发周期，提高开发效率，节省开发成本。通过低代码开发平台（有的也叫无代码开发平台），零代码基础也可以快速构建应用。
微软2019年首次发布了它的低代码平台-Power Platform,今年腾讯将tmagic-editor页面可视化编辑器对外开源，阿里也发布了低代码引擎LowCodeEngine,感兴趣的朋友可以阅读相关资料了解一下。国内大部分厂商真正集中投入低代码平台发展也不过数年，这些厂商紧随着云原生和数字化浪潮不断迭代演进，相比很多前沿风口行业来说，低代码在国内的发展算得上是脚踏实地接地气了。下图是2021年谷歌中低代码概念的搜索趋势。
在这里插入图片描述
百度公司的低代码平台产品叫爱速搭，amis 是爱速搭团队开源的前端低代码框架，爱速搭应用中的页面都是基于 amis 渲染的，同时爱速搭平台自身的绝大部分页面也是基于 amis 开发，注意是大部分不是全部哦，也就是项目还是离不开专业开发的。amis 的定位是前端 UI 框架，通过JSON配置生成各种后台页面，甚至可以不需要了解前端，类似于 Element、Ant Design，可以基于它快速开发前端页面，但需要自己整合到自己内部系统中，并且实现路由功能。
因为我现在做的项目集成了百度的amis框架，所以本文仅对amis的使用做个简单介绍，并附上具体实例供大家参考。

官网api地址: https://aisuda.bce.baidu.com/amis/zh-CN/components/index

为什么用amis？官网这么说的

在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂 npm、webpack、react/vue，必须熟悉 ES6 语法，最好还了解状态管理，比如 Redux，如果没接触过函数式编程，光入门都很费劲，而入门之后会发现它还有巨大的生态，相关的库有 2347 个，很多功能相似，挑选成本高。

然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 Webpack 了……

而有时候其实只想做个普通的增删改查界面，用于信息管理，，类似下面这种：
在这里插入图片描述
这个界面虽然用 Bootstrap 及各种前端 UI 库也能做出个大概，但仔细观察会发现它有大量细节功能，比如：

可以对数据做筛选
有按钮可以刷新数据
编辑单行数据
批量修改和删除
按某列排序
可以隐藏某些列
可以调整列顺序
自动生成顶部查询区域
可调整列宽度
开启整页内容拖拽排序
表格有分页（页数还能同步到地址栏，不过这个例子中关了）
有数据汇总
支持导出 Excel
「渲染引擎」那列的表头有提示文字
鼠标移动到「平台」那列的内容时还有放大镜符号，可以展开查看更多

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

这正是建立 amis 的初衷，我们认为：对于大部分常用页面，应该使用最简单的方法来实现，甚至不需要学习前端框架和工具。

amis不适合做什么？

为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 JSON 来配置，因为大多数开发人员无论前端还是后端都会接触到JSON这个简单易用的数据格式，但使用 JSON 有优点但也有明显缺点，在以下场合并不适合 amis：

大量定制 UI：JSON 配置使得 amis 更适合做有大量常见 UI 组件的页面，但对于面向普通客户（toC）的页面，往往追求个性化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。
极为复杂或特殊的交互：
有些复杂的前端功能，比如可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 DOM 实现的功能无法使用 amis。
但对于某些交互固定的领域，比如图连线，amis 后续会有专门的组件来实现。

感觉官网说的还有些含蓄，大概意思就是一些简单的功能可以用amis进行配置开发，一些定制化程度高的需求不适合。某些大厂说的80%的项目可以用低代码平台开发也是这个意思，剩下的20%才是开发人员需要重点攻克的，实际做项目还是要结合两种方式，实现低代码开发和代码开发两条腿走路。

amis框架集成

amis 有两种使用方法：

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

SDK 版本适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，可以像 Vue/jQuery 那样外链代码就能使用。我是采用这种安装方式在前端vue项目种安装了amis组件，因篇幅有限具体安装方式大家参考官网吧，本文重点是通过实例讲解amis编辑器的用法。如果还没有具体需求，也可以跳过安装的部分，通过官网的在线编辑器进行学习。

去amis官方文档页面了解更多。

配置与组件概念

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

{
  "type": "page",
  "body": "Hello World!"
}

请观察上面的代码，这是一段 JSON，它的含义是：

type 是 amis 节点中最重要的字段，它告诉 amis 当前节点需要渲染的是Page组件。
而 body 字段会作为 Page 组件的属性，Page 组件根据这个值来渲染页面内容。

这个简单代码在amis编辑器种就会渲染出一个简单页面，可以实时预览，相信用过Echarts图表的人可能体会过这种便利性，我们只要修改七种的各个属性值就会看到页面发生神奇的变化。复杂点的页面也是通过这样一个个简单的组件搭建起来的，比如列表组件、按钮组件、表单组件及表单中的input/select/radio/switch开关等，这些组件的不能功能是通过不同的属性来控制的。

实例：通过一个CRUD组件实现增删改查列表

在这里插入图片描述
在编辑器左侧组件选项卡中选择CRUD组件拖入主界面，找不到的话可以搜一下，通过中英文名字都可以。组件拖过来之后会出现一个弹窗配置页面，接口地址是相对地址（除掉IP、端口和项目根路径），选择列表中需要实现的按钮，这里我选了查询、查看详情和编辑功能。这些配置也可以先不管，在组件初始化后都可以再修改，配置是实时保存编译的。

列表查询

列表最主要的是查询功能，一般低代码平台会选择在数据建模的基础上实现接口（建模是通过配置字段、表名等生成数据库表模型），我也是刚入门自己探索了一下，在没有建模的基础上实现的这个例子，也就是说接口都是基本的查询数据库。
在这里插入图片描述
右面有个面板可以修改当前组件的各种属性，我在“常规”选项卡中改了启动查询条件，在“接口”选项卡中改了接口查询方式为POST（代码中对应initApi属性）,从左面的代码面板中可以查看生成的JSON代码，红框中就是列表的的其中一个字段，name属性是数据库返回的字段名，label是页面显示的列名，type是数据类型，可以根据需求增加需要展示的字段列。
在这里插入图片描述
查询功能需要注意:

查询条件配的api属性接口地址跟页面初始化的接口initApi的接口是一样的，不用拼接属性参数之类的，参数自动往后端传，比如下图中的查询条件，在后端收到的参数就是keyword.
filterColumnCount属性是设置查询后默认返回前多少条

查看详情

在这里插入图片描述
组件勾选了后自带了查看详情功能，点击详情按钮会弹出一个dialog组件，默认子组件会继承父页面的数据，包括列表中没有展示的字段，所以不用加接口，在列表查询的时候尽量把字段都查出来就行。我这里没用自带的，而是配置了一个新的页面，代码如上图所示，通过在dialog组件中加入service组件实现的，url是另一个amis表单的地址（这里页面是有有个解析接口，每个页面配置后都会生成一个url地址），data属性不用传值，来自列表中某一行数据。弹窗详情页面如下图所示：
在这里插入图片描述

自定义操作按钮

在增删改查列表设计页面，查看详情按钮后面拖入一个提交按钮，点击提交按钮查看相应代码如下：

{
  "type": "button",
  "label": "提交",
  "actionType": "dialog",
  "dialog": {
    "title": "XX表单提交",
    "size": "xl",
    "body": [
      {
        "type": "service",
        "schemaApi": {
          "method": "post",
          "url": "/AmisTemplate/getTemplateByCode?AMIS_MODEL_CODE=SUBMITFORM",
          "data": {
            "id": "${ID}",
            "number": "${NUMBER}",
            "assetName": "${ASSETNAME}",
            "price": "${PRICE}",
            "model": "${MODEL}",
            "producer": "${PRODUCER}",
            "brand": "${BRAND}",
            "city": "${CITY}"
          }
        },
        "messages": {
        }
      }
    ],
    "actions": [
    ]
  }
}

解释：跟查看详情的实现方式差不多，也是在dialog弹窗组件中引入了另一个配置页面，不同的是对新页面做了数据映射，上图中右侧大写的数据是列表数据字段，左侧小写的是提交表单中用到的数据。

提交表单

下图是提交按钮对应的Json代码，点击按钮会发送一个ajax请求。

{
  "type": "button",
  "label": "提交",
  "actionType": "ajax",
  "visibleOn": "this.STATUS!=='1'",
  "api": {
    "method": "post",
    "url": "/flow/amis/startWorkFlow",
    "data": {
      "&": "$$",
      "processDefinitionKey": "flow_asset",
      "businessKey": "",
      "processName": "XX管理流程",
      "modelCode": "ASSET"
    },
    "dataType": "json"
  }
}