引言

目前低代码概念已经无人不知  
    
    
    
，随着新冠病毒的爆发

     


     


     


  ，远程办公  
    
    
    
、视频会议

     


     


     


  、直播等数字化应用迅速发展起来 




 




 




 
，也让低代码平台迎来了特别关注  
    
    
    
。那么问题来了  

   

   

   

，什么是低代码开发？低代码平台对未来的数字化 




 




 




 
、智能化生态会产生什么影响？

低代码开发是通过页面拖拉拽的形式实现在线构建应用程序

     

     

     

 ，旨在简化开发过程  




  




  




  ，缩短开发周期  


  


  


  


，提高开发效率
     
     
     
，节省开发成本

     


     


     


  。 通过低代码开发平台（有的也叫无代码开发平台）
   




   




   




   ，零代码基础也可以快速构建应用 




 




 




 
。

微软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" } }

其中data中的参数需要注意：

当数据域里的变量值为$$时, 表示将所有接口返回的data字段值整体赋值到对应的 key 中

至此  

   

   

   

，第一个实例做完了

     

     

     

 ，目前博主也正在学习amis框架的用法  




  




  




  ，后续会继续输出更多实例  


  


  


  


，有喜欢amis的朋友可以一起交流啊！