低代码框架amis的使用
文章目录
- 前言
- 一、简介
- 二、amis 的其它亮点
- 三、amis 不适合做什么?
- 四、amis 使用方法
- 五、amis 使用过程中的坑
前言
提示:为什么要用amis?
在经历了十几年的发展后,前端开发变得越来越复杂,门槛也越来越高,要使用当下流行的 UI 组件库,你必须懂 npm、webpack、react/vue,必须熟悉 ES6 语法,最好还了解状态管理,比如 Redux,如果没接触过函数式编程,光入门都很费劲,而入门之后会发现它还有巨大的 生态,相关的库有 2347 个,很多功能相似,挑选成本高。
然而前端技术的发展不会停滞,等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 Webpack 了……
这些都是官方的说明了。。。我为什么要用这个呢?
因为公司需要,公司需要生成报表实现配置什么组件,我就生成什么,当然主要还是查询以及报表
一、简介
amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。
有时候其实只想做个普通的增删改查界面,用于信息管理,类似下面这种:
这个界面虽然用 Bootstrap 及各种前端 UI 库也能做出个大概,但仔细观察会发现它有大量细节功能,比如:
可以对数据做筛选
有按钮可以刷新数据
编辑单行数据
批量修改和删除
查询某列
按某列排序
隐藏某列
开启整页内容拖拽排序
表格有分页(页数还能同步到地址栏,不过这个例子中关了)
有数据汇总
支持导出 Excel
「渲染引擎」那列的表头有提示文字
鼠标移动到「平台」那列的内容时还有放大镜符号,可以展开查看更多
如果往下拖动还有首行冻结来方便查看表头(因为文档页面的限制,这个功能在这里看不出来)
全部实现这些需要大量的代码。
二、amis 的其它亮点
1. 提供完整的界面解决方案:其它 UI 框架必须使用 JavaScript 来组装业务逻辑,而 amis 只需 JSON 配置就能完成完整功能开发,包括数据获取、表单提交及验证等功能,做出来的页面不需要经过二次开发就能直接上线;
2. 大量内置组件(100+),一站式解决:其它 UI 框架大部分都只有最通用的组件,如果遇到一些稍微不常用的组件就得自己找第三方,而这些第三方组件往往在展现和交互上不一致,整合起来效果不好,而 amis 则内置大量组件,包括了富文本编辑器、代码编辑器、diff、条件组合、实时日志等业务组件,绝大部分中后台页面开发只需要了解 amis 就足够了;
3. 支持扩展:除了低代码模式,还可以通过 自定义组件 来扩充组件,实际上 amis 可以当成普通 UI 库来使用,实现 90% 低代码,10% 代码开发的混合模式,既提升了效率,又不失灵活性;
4. 容器支持无限级嵌套:可以通过嵌套来满足各种布局及展现需求;
5. 经历了长时间的实战考验:amis 在百度内部得到了广泛使用,在 5 年多的时间里创建了 3.8 万页面,从内容审核到机器管理,从数据分析到模型训练,amis 满足了各种各样的页面需求,最复杂的页面有超过 1 万行 JSON 配置。
三、amis 不适合做什么?
使用 JSON 有优点但也有明显缺点,在以下场合并不适合 amis:
大量定制 UI:JSON 配置使得 amis 更适合做有大量常见 UI 组件的页面,但对于面向普通客户(toC)的页面,往往追求个性化的视觉效果,这种情况下用 amis 就不合适,实际上绝大部分前端 UI 组件库也都不适合,只能定制开发。
极为复杂或特殊的交互:
有些复杂的前端功能,比如 可视化编辑器,其中有大量定制的拖拽操作,这种需要依赖原生 DOM 实现的功能无法使用 amis。
但对于某些交互固定的领域,比如图连线,amis 后续会有专门的组件来实现。
四、amis 使用方法
JS SDK,可以用在任意页面中
React,可以用在 React 项目中
SDK 版本适合对前端或 React 不了解的开发者,它不依赖 npm 及 webpack,可以像 Vue/jQuery 那样外链代码就能使用。
下载方式:
github 的 releases,文件是 sdk.tar.gz。
使用 npm i amis 来下载,在 node_modules\amis\sdk 目录里就能找到。
新建一个 hello.html 文件,内容如下:
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><title>amis demo</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1"/><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><link rel="stylesheet" href="sdk.css" /><link rel="stylesheet" href="helper.css" /><link rel="stylesheet" href="iconfont.css" /><!-- 这是默认主题所需的,如果是其他主题则不需要 --><!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11,如果要支持 IE11 请引用这个 css,并把前面那个删了 --><!-- <link rel="stylesheet" href="sdk-ie11.css" /> --><!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果,所以可能有细节功能用不了,如果发现请报 issue --><style>html,body,.app-wrapper {position: relative;width: 100%;height: 100%;margin: 0;padding: 0;}</style></head><body><div id="root" class="app-wrapper"></div><script src="sdk.js"></script><script type="text/javascript">(function () {let amis = amisRequire('amis/embed');// 通过替换下面这个配置来生成不同页面let amisJSON = {type: 'page',title: '表单页面',body: {type: 'form',mode: 'horizontal',api: '/saveForm',body: [{label: 'Name',type: 'input-text',name: 'name'},{label: 'Email',type: 'input-email',name: 'email'}]}};let amisScoped = amis.embed('#root', amisJSON);})();</script></body>
</html>
这里我使用的Vue,因为这个框架是基于react组件去渲染的,所以安装依赖就可以了!!
Vue中引用React组件:
npm i -S vuera
npm install --save react react-dom
下面的代码就不给了,有封装接口
五、amis 使用过程中的坑
1.配置初始化接口api
1.1Service 功能型容器
amis 中部分组件,作为展示组件,自身没有使用接口初始化数据域的能力,例如:Table、Cards、List等,他们需要使用某些配置项,例如source,通过数据映射功能,在当前的 数据链 中获取数据,并进行数据展示。
而Service组件就是专门为该类组件而生,它的功能是::配置初始化接口,进行数据域的初始化,然后在Service内容器中配置子组件,这些子组件通过数据链的方法,获取Service所拉取到的数据
但是你会发现用api,source的时候组件无法渲染,需要用v-if 一开始做判断然后nextTick再次渲染才能展示,这个和组件封装的关系,这也是自己试了好久才发现的
1.2
一般写项目不要用里面自带的接口返回状态,一般和后端沟通好规范一套出来,重新去映射里面的状态返回
"api":{"method":"post","url":"/customer","data":{"pageNum":"${page}","pageSize":"${perPage}","type":"${type}","orderBy":"${orderBy}","orderDir":"${orderDir}","keywords":"${keywords}","startTime":"${startTime|JSON}","startTime2":"${startTime2}","startTime3":"${startTime3}"},"adaptor":"(payload, response)=>{return {...response,status: response.retcode===00?0:response.retcode}}"},
2.日期时间选择器
默认的日期返回value 今天 竟然是"-1days,+0days",和给的官方文档不一样,反正有很多类似的坑在里面
3.json函数返回
这就不得不提有一个问题,返回的参数里面有adaptor函数,后端返回只能解析成字符串返回,前端做eval处理
4.数据映射
级联下拉的使用
{"className":"searchLabel","name":"tree","type":"tree-select","label":"树懒加载","labelField":"org","valueField":"orgId","source":{"method":"post","url":"/tree","data":{"patientId":"0000"},"adaptor":"(payload, response)=>{return {...response,status: response.retcode===00?0:response.retcode}}"},"deferApi":{"method":"post","url":"/tree","data":{"patientId":"${orgId}"},"adaptor":"(payload, response)=>{return {...response,status: response.retcode===00?0:response.retcode}}"}}
里面的坑还有很多,有时候找原因需要凭自身经验去自己去发现,还是要多实践
低代码框架amis的使用相关推荐
- 全网详细介绍百度低代码框架amis及实例讲解
文章目录 1. 文章引言 2. amis官网 3. amis介绍 3.1 amis的简述 3.2 amis的初衷 3.3 amis的其他亮点 3.4 amis不适之处 4. amis使用 4.1 am ...
- amis 视频教程 入门+实战 百度出的前端低代码框架
Amis 前端低代码框架 百度出品 基础简介(1)_哔哩哔哩_bilibili这是第1个视频建立了一个Amis交流QQ群 感兴趣的可以加下QQ群号:717791727Amis 官方文档https:// ...
- 开源推荐 | 携程 Foxpage 前端低代码框架
作者简介 Jason Wang,携程研发经理,目前主要负责低代码类产品的设计和研发,关注低代码行业的发展及相关解决方案在企业内部的落地. 大厂技术 高级前端 Node进阶 点击上方 程序员成长指北 ...
- 开源 | 携程 Foxpage 前端低代码框架
作者简介 Jason Wang,携程研发经理,目前主要负责低代码类产品的设计和研发,关注低代码行业的发展及相关解决方案在企业内部的落地. 一.背景 随着低代码开发方式被越来越多的人接受和认可,低代码得 ...
- 前端低代码工具amis使用文档
amis使用文档 本文档旨在帮助开发人员快速入门amis低代码开发平台. 简介 amis 是一个百度出品的低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率. 安装 ...
- Hasor【付诸实践 01】低代码框架 DataQL 聚合查询引擎 SQL执行器报错 Query dialect missing 原因分析及解决(针对GreenPlum数据库)
1.报错说明 在本地搭建了两个平台,hasor核心依赖的版本是一致的, 连接的都是GreenPlum数据库 ,且执行的是相同的DataQL语句: <!--hasor核心依赖[是老平台接入,由于兼 ...
- 从实现原理谈谈低代码
点击上方"芋道源码",选择"设为星标" 管她前浪,还是后浪? 能浪的浪,才是好浪! 每天 10:33 更新文章,每天掉亿点点头发... 源码精品专栏 原创 | ...
- 百家争鸣的低代码平台
大家好,我是前端点线面,毕业于华中科技大学,非科班出身的一枚新时代农民工,现在是百度前端研发工程师,著有<前端百题斩>.数十篇学习思维导图(go.React.Redux.Vue.Vuex. ...
- 12个低代码开源项目(转载)
转载地址:https://mp.weixin.qq.com/s/2pTDHCQPtnta3I1njPN3iw 1.Appsmith Appsmith 是一款开源低代码框架,主要用于构建管理面板.内部工 ...
最新文章
- 使用深度学习TensorFlow框架进行图片识别
- 第七次发博不知道用什么标题好
- python递归和循环的区别_递归与伪递归区别,Python 实现递归与尾递归
- estimator 模型保存与使用
- Spring Cloud Zuul路由网关(学习总结)
- comsol3.5 软件下载
- centos7加入Windows域
- JavaScript——监听事件:点击鼠标,视频静音(原神官网)
- 关于达芬奇调色台的那些事儿
- 挖掘用户反馈中的宝藏——NLP文本标签化解密
- H5-农阳历日期互转并对应
- ZCMU-1919 kirito's 星爆气流斩(多重背包+二进制优化)
- 灵机一栋团队小黄衫展示
- Why-How-What黄金圈法则 的理解和运用
- MVP Open Day- 微软社区大课堂招募学生啦
- 获取顺序栈的栈顶元素
- 传奇服务器端如何修改称号,图文解说传奇人物称号设置详细步骤
- 注意力机制的分类 | Soft Attention和Hard Attention
- 共轭梯度法 (CG) 解线性方程组
- 蓝桥杯VIP试题 之 基础练习 Sine之舞 - JAVA
热门文章
- 【干货】机房电源管理系统智能PDU(远程电源控制单元)
- 367、POE交换机中1236和4578到底哪个供电?以及供电距离的选择
- 电脑技能整理-----(2)电脑常用十大技巧
- Buu-crypto-classic0
- Python-Django毕业设计基于的汉服服装租赁系统(程序+Lw)
- 影豹R·ABT联名版亮相上海车展,专为年轻人打造的个性化改装之选
- String详解(intern、StringBuffer、StringBuilder)
- 怎样把wmv转换为mp4?
- sqlsugar使用
- 向窗口输出文字--TextOut和DrawText函数