官方仓库：baidu/amis: 前端低代码框架，通过 JSON 配置就能生成各种页面。 (github.com)

官方文档：中文文档

官方可视化编辑器：可视化编辑器

B站教学视频：Amis 前端低代码框架 百度出品 基础简介（1）_哔哩哔哩_bilibili

这玩意需要会json，不了解的先学一下语法

低代码平台amis学习 三：发送网络请求并回显响应内容 - 我是冰霜 - 博客园 (cnblogs.com)




概念

接下来我要用我的话来说一下这个东西，可能有些说的不太准确，主要是自用，细节还是看文档

背景：

  • 低代码是什么？

    低代码（Low-Code）是一种软件开发方法，旨在通过最小化手动编码的需求，使开发人员能够更快速地构建和部署应用程序。低代码平台提供了一套可视化的工具和组件，使开发人员可以通过拖放、配置和设置属性来创建应用程序，从而从头开始编写大量的代码。低代码平台的主要目标是降低开发应用程序所需的技术复杂度，从而加快开发周期并减少这种方法适用于那些需要快速响应业务需求、构建原型、开发内部工具或简化业务流程的项目。
    可以想象自己正在建造一座房子。传统的方法是从头开始打造每一个部分，包括墙壁、窗户、门等等。这需要大量的时间和精力。但使用低代码开发，就像是使用预制的模块化部件来建造房子，这些部件可以通过简单的组合和调整来快速构建应用程序，就像拼积木一样。

  • amis是什么？

    amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。
    百度研发的


组件

在 amis 中其实就是最小的元素单元，type字段会告诉 amis 当前节点渲染的组件为Page，组件节点的配置永远都是由 type字段 （用于标识当前是哪个组件）和 属性 构成的。

1
2
3
4
{
  "type": "xxx",
  ...其它属性
}




属性

上面提到了属性，我觉得可以将其分为通用属性，和专用属性

通用属性：就是大家都有

专用属性：就是某个组件特有的

下面罗列一下通用属性：

属性 含义 是否完全通用
type type字段会告诉 amis 当前节点渲染的组件是什么 完全
body 组件要渲染的内容，内容可以是一个组件，或者是组件数组当然因此可以实现组件嵌套 完全
data 数据域 部分
initApi 初始化接口 部分




数据域

初始化接口：

就是将接口传过来的数据，动态的放到body里面

eg:

1
2
3
4
5
{
  "type": "page",
  "initApi": "/amis/api/mock2/page/initData",
  "body": "date is ${date}"
}

这个 api 接口返回的数据结构如下：

1
2
3
4
5
6
7
8
{
  "status": 0,
  "msg": "",
  "data": {
    "title": "Test Page Component",
    "date": "2017-10-13"
  }
}

数据域：看文档

注意就是 不是所有组件都具备数据域data，以下是支持的组件

  • App
  • Page
  • Cards
  • Chart
  • CRUD
  • CRUD2
  • Dialog
  • Drawer
  • List
  • Page
  • PaginationWrapper
  • Service
  • Wizard
  • Combo
  • InputArray
  • Table
  • Table2




模版

为了可以更加灵活渲染文本、数据结构，amis 借鉴其他模板引擎，实现了一套模板渲染功能。

就是怎么去用 数据域 中的内容




组件




常见问题

  1. 使用SDK方式时，注意路径问题

    eg：使用 npm i amis 来下载，在 node_modules\amis\sdk 目录里就能找到

{

“type”: “input-text”,

“label”: “文本”,

“name”: “response1”,

“id”: “u:54463ab30250”,

“valuse”: “${response}”

}