企业官网建设流程全解析

amis 低代码实战：用 JSON 配置写出整个后台页面

【免费下载链接】amis前端低代码框架，通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis

接手中后台项目，你大概率会面对这样的需求单：列表、表单、详情页排着队来，字段长得都差不多，只是名字不一样。给每页手写一套 HTML 和组件代码，工期根本扛不住。这正是 amis 这个前端低代码框架要解决的场景——把页面写成一份 JSON 配置，交给渲染器，一个可用的后台页面就出来了，连前端背景不深的人也能参与维护。

先把 amis 的几件事实说清楚

• 配置即页面。页面结构就是 JSON Schema：什么位置放什么组件，全部用属性描述，不用手写标签、不用逐个查 React 组件 API。
• 组件开箱即用。仓库里packages/amis/src/renderers/下有 90+ 个渲染器，表单输入项就有 60 多个，表格、图表、布局容器这些后台高频元素都覆盖了。
• 两种接入姿势共存。它提供 JS SDK 和 React 两种形态：老项目挂个 script 就能用，React 工程里当普通组件嵌进去，不绑架你现有的技术栈。

从 0 到第一个 JSON 页面，只要两步

前提是本地装好 Node.js 和 npm，然后安装：

npm i amis

装完就能开始写页面了。下面这份配置不到 15 行：

{ "type": "page", "title": "员工登记表", "body": { "type": "form", "api": "/saveForm", "body": [ { "type": "input-text", "name": "name", "label": "姓名" }, { "type": "input-number", "name": "age", "label": "年龄" }, { "type": "button", "label": "提交", "primary": true } ] } }

它会渲染出一个带头部的表单页：两个输入框、一个主按钮，点击提交后数据 POST 到/saveForm。SDK 方式接入时，只需要把它交给嵌入函数：

let amis = amisRequire('amis/embed'); let amisScoped = amis.embed('#root', schema, { data: {} });

如果你想先"看见"效果再动手，仓库自带示例工程，跑起来后浏览器访问 127.0.0.1:8888 就能翻到各种现成页面，细节可对照 快速开始文档。

能力拆解：界面拼装、数据绑定、二次扩展

📦 界面拼装：不写标记，写树

能做什么：布局组件（flex、grid、tabs、panel）和内容组件在 JSON 里任意嵌套，一棵树就是一个完整页面，还能随时切主题。

怎么配：每个节点声明type和body，页面层级由嵌套表达。不想手写 JSON 的话，可视化编辑器支持从左侧组件面板拖组件进画布，右侧属性面板改字段，改完立即预览——下面这张图就是在编辑器里搭表单页时的状态。

适合场景：运营活动页、内部工具页这类"结构固定、字段多变"的页面，拼装成本几乎只剩写字段名。

🔗 数据绑定：不写请求，只配数据流

能做什么：组件上不出现请求代码，数据怎么来、怎么显示，全靠配置声明。

怎么配：给 CRUD 表格或表单挂一个api属性，请求、分页、回显就都接上了；展示层用${field}这样的模板表达式引用数据；更复杂的联动靠数据链和数据映射组织，规则见 数据链文档。

适合场景：典型的增删改查列表、下拉级联、"改了 A 字段 B 字段跟着变"的联动逻辑，基本都在配置层解决。

🔌 二次扩展：把你的组件插进体系

能做什么：JSON 覆盖不了的控件，可以自己写一个 React 组件注册进 amis，之后在配置里像内置组件一样按type使用。

怎么配：开发流程参考 自定义组件文档；注册完成后，编辑器左侧会出现"自定义组件"页签，拖拽、配属性、预览的体验和系统组件一致。

适合场景：企业自己的品牌控件、图表封装、第三方 SDK 包装，一次开发、全项目复用。

落地场景与边界

• 中后台 CRUD：列表 + 筛选 + 详情 + 编辑，amis 的主力战场，一个页面常常几十行配置就够。
• 运营配置页：结构固定、字段频繁增删的后台页面，运营或后端同学改改 JSON 就能上线。
• 快速原型验证：先用配置把页面立起来给业务方看，确认可行再决定哪些模块值得下沉为自研组件。

边界也要说清楚：像素级视觉定制、复杂交互动效、重型状态管理逻辑，手写 React 仍然更快；而且 amis 只解决前端，接口实现和数据权限还是后端的事。

下一步怎么走

先按 快速开始 把examples/里的示例跑起来，挑一个 CRUD 页面改成你的业务字段。跑通之后，再带着具体需求去翻docs/zh-CN/extend/下的扩展章节，从配置走向自定义。

【免费下载链接】amis前端低代码框架，通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis