百度低代码amis使用介绍

AMIS 是百度开源的一个低代码前端框架,它通过简单的 JSON 配置即可生成各种后台页面,大大提高了开发效率。以下是关于 AMIS 的使用步骤、组件、原理、案例以及优缺点分析:

使用步骤

  1. 了解基本概念和组件:首先需要了解 AMIS 的核心理念和基本组件,如布局、表格、表单、弹框等。
  2. 安装 AMIS:可以通过 npm 或 yarn 安装,或者直接在 HTML 文件中引入。
  3. 使用 AMIS 组件:在项目中使用 AMIS 提供的各种组件,如表单组件创建登录表单,或弹框组件显示消息框。
  4. 配置 AMIS:通过 JSON 配置生成页面和功能,包括设置组件属性和样式。
  5. 调试和优化:使用调试工具查找问题并进行优化。
  6. 实践项目:实际项目中应用 AMIS,如创建博客网站或在线商店。

核心组件

  • 布局组件:包括容器、栅格、表头、内容、尾部等,用于构建页面整体结构和布局。
  • 功能组件:如按钮、表单、弹窗、消息提示等,实现页面各种功能。
  • 数据输入与展示组件:包括输入框、下拉框、单选框、表格等,用于数据输入和展示。
  • 反馈组件:如加载状态、错误提示等,用于页面加载或操作时给予用户反馈。

原理

AMIS 基于Web前端,通过可视化的方式帮助开发者快速构建页面和应用程序。它提供了丰富的组件和工具,使得开发者可以更加专注于业务逻辑的实现,而不需要过多关注技术细节。AMIS 通过 JSON 配置来生成页面和功能,简化了开发过程。

案例

例如,使用 AMIS 的表单组件和弹窗组件构建用户登录页面。在 AMIS 设计器中选择表单组件,设置表单的标题和输入框数量,添加字段和验证规则。选择弹窗组件,设置弹窗的标题和内容,将表单组件作为弹窗的触发器。在弹窗中添加输入框和按钮,设置按钮的点击事件。在页面中添加按钮,触发弹窗显示,输入用户名和密码后,验证表单数据的正确性并处理登录逻辑。

优缺点分析

  • 优点:AMIS 提供了丰富的组件和工具,简化了开发过程,提高了开发效率。它降低了开发门槛,使得开发者可以更加专注于业务逻辑的实现。
  • 缺点:虽然 AMIS 大大简化了开发流程,但对于一些复杂或特定需求,可能需要更多的自定义开发。此外,对于习惯于传统前端开发的开发者来说,可能需要一定时间来适应低代码的开发方式。
    综上所述,AMIS 是一个功能强大且易于使用的低代码前端框架,特别适合需要快速开发后台管理系统的场景。通过了解其使用步骤、核心组件、原理以及案例,开发者可以更好地利用 AMIS 来提高开发效率。
  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以节省页面开发工作量,极大提升开发前端页面的效率。 目前在百度广泛用于内部平台的前端开发,已有 100+ 部门使用,创建了 3w+ 页面。 特点: 1、不需要懂前端:在百度内部,大部分 amis 用户之前从来没写过前端页面,也不会 JavaScript,却能做出专业且复杂的后台界面,这是所有其他前端 UI 库都无法做到的; 2、不受前端技术更新的影响:百度内部最老的 amis 页面是 4 年多前创建的,至今还在使用,而当年的 Angular/Vue/React 版本现在都废弃了,当年流行的 Gulp 也被 Webpack 取代了,如果这些页面不是用 amis,现在的维护成本会很高; 3、享受 amis 的不断升级:amis 一直在提升细节交互体验,比如表格首行冻结、下拉框大数据下不卡顿等,之前的 JSON 配置完全不需要修改; 4、可以完全使用可视化页面编辑器 来制作页面:一般前端可视化编辑器只能用来做静态原型,而 amis 可视化编辑器做出的页面是可以直接上线的。 5、提供完整的界面解决方案:其它 UI 框架必须使用 JavaScript 来组装业务逻辑,而 amis 只需 JSON 配置就能完成完整功能开发,包括数据获取、表单提交及验证等功能,做出来的页面不需要经过二次开发就能直接上线; 6、内置 100+ 种 UI 组件:包括其它 UI 框架都不会提供的富文本编辑器、条件组合等,能满足各种页面组件展现的需求,而且对于特殊的展现形式还可以通过 自定义组件 来扩充; 7、容器支持无限级嵌套:可以通过组合来满足各种布局需求; 8、经历了长时间的实战考验:amis百度内部得到了广泛使用,在 4 年多的时间里创建了 3 万+ 页面,从内容审核到机器管理,从数据分析到模型训练,amis 满足了各种各样的页面需求,最复杂的页面有超过 1 万行 JSON 配置。   amis前端低代码框架 更新日志: v1.1.7 Feature Wrapper 组件 style 支持动态获取 数据映射支持 cookie 获取 内置 filter 新增 map 方法 Rating 组件支持清空 Tabs 的 activeKey 支持变量 Excel 导出支持自定义文件名 数据映射的 key 可以支持 . 或者 [] 来指定路径 Tree-Selector 支持懒加载 升级 ECharts 到 5.1.1 升级 Monaco-Editor 到 0.24.0 Enhancement 升级 mst 到 3 的最新版本 开发使用 concurrently 避免新开一个窗口 data-link 优化 Wizard 组件新增 startStep 配置项 按钮 tooltip 整理,支持 disabledTip Each 组件空状态时文字居左,同时将空数组状态也认为是空状态 去掉 Tab line 模式下顶部的 padding Uuid 有值时不设置,没值自动设置 TextArea 组件最小行数限制 & 静态展示超出等 Form 远端校验显示报错时,可以再次提交 Nav 的 mapTree 需要 depthFirst Checkboxes 分组样式优化 DateTime-Range下拉增加 popoverClassName 属性,可以自定义弹框的 className; 父级有缩放比时弹框宽度计算问题修复; Date 快捷键支持上月底 autoFill 支持多选 CRUD 的 toolbar 默认不再将最后一个组件放右边 接口兼容多种 json 返回格式 CRUD filterable 判断是否选中不要那么严格 Button-Group disabled 统一使用透明度的方式来实现,不然无法区分选中状态是哪个 调整日期按钮位置顺序 和 Dialog 统一 Bugfix 修复 Audio should not call load method at first render 修复 文档多余描述 修复 CRUD filter Combo模式不能清空查询条件 修复 初始状态 autoFill 不同步的问题 修复 文档样例错误 修复 Audio 组件 src 属性不符合预期的行为 修复 表单联合校验问题 修复 PopOver 宽度计算问题 修复 图片表单项 disabled 影响放大功能的问题 修复 Transfer selectTitle resultTitle 不生效的问题 修复 Tree 组件问题 修复 Fiule 组件错误提示样式问题 修复 Select 组件自定义菜单模式下无法全选问题 修复 Number 最大最小值校验问题 修复 sdk 中 dialog 里的编辑器弹窗被遮挡问题 修复

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值