大厂在用的低代码工具！只需配置json即可快速生成前端界面的-智慧文博士

💂 个人网站:IT知识小屋
🤟 版权:本文由【IT学习日记】原创、在CSDN首发、需要转载请联系博主
💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

文章目录

- - 简介
  - 技术栈
  - 实现原理
  - 快速上手
  - 开源地址&使用手册
  - 写在最后

简介

amis是由百度开源的一款前端低代码渲染框架，无需懂前端，仅通过配置JSON即可生成各式各样的后台页面，大大降低前端开发门槛和提升了开发效率，且不会受前端技术栈变更的影响，特别适用于构建中后台系统与数据驱动的可视化界面。用户无需深入掌握React、Vue、Webpack等技术，只需专注业务即可快速搭建高质量界面。

主要特点如下：

基于JSON驱动：通过JSON Schema一键生成表单、列表、图表等组件，无需编码即可实现页面渲染
组件库丰富：内置表单、表格、按钮、图表、容器、拖拽等 100+ 常用组件，可满足复杂业务场景
可视化编辑：支持在线Schema编辑器，可实时预览页面效果，便于快速修改与测试
性能稳定：经过百度内部多年实战检验，已支撑数万页面稳定运行
低技术门槛：对前端门外汉友好，非前端背景人员亦可快速上手创建页面
灵活扩展：支持自定义组件混用，在低代码基础上集成自定义业务组件

技术栈

语言框架：TypeScript + React 渲染方式：JSON → Component Schema 渲染 状态管理：MobX + mobx‑state‑tree 脚手架：npm / Lerna / Vite 样式：SCSS 编译工具：Vite 许可证：Apache‑2.0

实现原理

amis的渲染过程是将 json 转成对应的 React 组件。先通过 json 的 type 找到对应的 Component，然后把其他属性作为 props 传递过去完成渲染。

如：一个表单页面来说，如果用 React 组件开发一般长这样：

<Page title="页面标题" subTitle="副标题"> <Form title="用户登录"> <InputText name="username" label="用户名" /> </Form> </Page>

替换成amis实现则仅是：只需要把 json 节点，根据 type 信息自动转成 React Component 即可

{ "type": "page", "title": "页面标题", "subTitle": "副标题", "body": { "type": "form", "title": "用户登录", "body": [ { "type": "input-text", "name": "username", "label": "用户名" } ] } }

快速上手

1、下载依赖SDK，方式有如下2中：

方式1、在开源社区获取最新发行版，解压放入项目即可
方式2、使用 npm i amis 来下载，在 node_modules\amis\sdk 目录里就能找到

2、在html中引入，基于json开发,如下面的一个增删改查界面

{ "title": "浏览器内核对 CSS 的支持情况", "remark": "嘿，不保证数据准确性", "type": "page", "body": { "type": "crud", "draggable": true, "syncLocation": false, "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample", "keepItemSelectionOnPageChange": true, "autoGenerateFilter": true, "bulkActions": [ { "type": "button", "label": "批量删除", "actionType": "ajax", "api": "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/${ids|raw}", "confirmText": "确定要批量删除?" }, { "type": "button", "label": "批量修改", "actionType": "dialog", "dialog": { "title": "批量编辑", "name": "sample-bulk-edit", "body": { "type": "form", "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/bulkUpdate2", "body": [ { "type": "hidden", "name": "ids" }, { "type": "input-text", "name": "engine", "label": "Engine" } ] } } } ], "quickSaveApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/bulkUpdate", "quickSaveItemApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/$id", "headerToolbar": [ "bulkActions", { "type": "button", "label": "重置测试数据", "actionType": "ajax", "size": "sm", "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/reset" }, "export-excel", { "type": "tpl", "tpl": "一共有 ${count} 行数据。", "className": "v-middle" }, { "type": "columns-toggler", "align": "right", "draggable": true }, { "type": "drag-toggler", "align": "right" } ], "footerToolbar": [ "statistics", "switch-per-page", "pagination" ], "columns": [ { "name": "id", "label": "ID", "width": 20, "sortable": true, "type": "text", "searchable": { "type": "input-text", "name": "id", "label": "主键", "placeholder": "输入id" } }, { "name": "browser", "label": "Browser", "searchable": { "type": "select", "name": "browser", "label": "浏览器", "placeholder": "选择浏览器", "options": [ { "label": "Internet Explorer ", "value": "ie" }, { "label": "AOL browser", "value": "aol" }, { "label": "Firefox", "value": "firefox" } ] } }, { "name": "platform", "label": "平台", "popOver": { "trigger": "hover", "body": { "type": "tpl", "tpl": "就是为了演示有个叫 popOver 的功能" } }, "sortable": true, "type": "text" }, { "name": "grade", "label": "CSS 等级", "type": "select", "options": [ "A", "B", "C", "D", "X" ] }, { "type": "operation", "label": "操作", "width": 100, "buttons": [ { "type": "button", "actionType": "ajax", "label": "删除", "confirmText": "您确认要删除?", "api": "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/$id" } ] } ] } }