amis 官方最新版 v1.1.1

软件介绍

amis提供前端开发功能，通过这款软件可以帮助用户快速设计前端页面，为用户设计UI提供更方便的设计流程，优化代码编辑数量，使用更少的代码设计UI页面，软件通过json配置就可以快速生成相关的页面内容，预设配置就可以完成简单的前端页面开发，不需要使用复杂的Bootstrap 及各种前端 UI 库就可以快速配置页面内容，将本软件部署到你的开发程序上就可以使用ON配置页面数据，软件也提供很多组件配置方案，支持Page页面、Form表单、CRUD增删改查、Custom自定义组件、Table表格、Action行为按钮，使用amis就可以快速配置ON设计UI!

amis软件功能

1、什么是 amis

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

2、用 ON 写页面有什么好处

为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 ON 来配置，它的独特好处是：

不需要懂前端：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 JavaScpt，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的;

不受前端技术更新的影响：百度内部最老的 amis 页面是 4 年多前创建的，至今还在使用，而当年的 Angular/Vue/React 版本现在都废弃了，当年流行的 Gulp 也被 Webpack 取代了，如果这些页面不是用 amis，现在的成本会很高;

享受 amis 的不断升级：amis 一直在提升细节交互体验，比如表格首行冻结、下拉框大数据下不卡顿等，之前的 ON 配置完全不需要修改;

可以完全使用可视化页面编辑器来制作页面：一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。

amis软件特色

提供完整的界面解决方案：其它 UI 框架必须使用 JavaScpt 来组装业务逻辑，而 amis 只需 ON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能，做出来的页面不需要经过二次开发就能直接上线;

内置 100+ 种 UI 组件：包括其它 UI 框架都不会提供的富文本编辑器、条件组合等，能满足各种页面组件展现的需求，而且对于特殊的展现形式还可以通过 自定义组件 来扩充;

容器支持无限级嵌套：可以通过组合来满足各种布局需求;

经历了长时间的实战考验：amis 在百度内部得到了广泛使用，在 5 年多的时间里创建了 3.8 万页面，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求，最复杂的页面有超过 1 万行 ON 配置。

amis教程

工作原理

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

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

把以上配置方式换成 amis ON, 则是：

那么，amis 是如何将 ON 转成组件的呢?直接根据节点的 type 去跟组件一一对应?这样会重名，比如在表格里面展示的类型 text 跟表单里面的 text 是完全不一样的，一个负责展示，一个却负责输入。所以说一个节点要被什么组件渲染，还需要携带上下文(context)。

如何携带上下文(context)?amis 中是用节点的路径(path)来作为上下文。从上面的例子来看，一共有三个节点，path 分别是。

page 页面节点

page/body/form 表单节点

page/body/form/contls/0/text 文本框节点。

根据 path 的就能很容易注册组件跟节点对应了。

Page 组件的示例代码

Form 组件的示例代码

Text 组件的示例代码

那么渲染过程就是根据节点 path ，跟组件池中的组件 test (检测) 做匹配，如果命中，则把当前节点转给对应组件渲染，节点中其他属将作为目标组件的 pps。需要注意的是，如果是容器组件，比如以上例子中的 page 组件，从 pps 中拿到的 body 是一个子节点，由于节点类型是不固定，由使用者决定，所以不能直接完成渲染，所以交给属中下发的 render 方法去完成渲染，{render('body', body)}，他的工作就是拿子节点的 path 去组件池里面找到对应的渲染器，交给对应组件去完成渲染。

Sparkline 走势图

简单走势图，只做简单的展示，详细展示请采用 Chart 来完成。

amis基本使用

配置类型，设置值即可，值为数组格式。

当前例子为静态值，通常你会需要配置成 name 与当前环境数据关联。

点击行为

可以通过配置"clickAction": {}，来指定图表节点的点击行为，支持 amis 的 行为。

数据映

数据映支持用户通过${xxx}或$xxx获取当前数据链中某个变量的值，实现灵活的数据配置功能，主要用于模板字符串、 自定义 api 请求数据体格式等场景。

模板字符串

my name is ck

tip： 默认 amis 在解析模板字符串时，遇到$字符会尝试去解析该变量并替换改模板变量，如果你想输出纯文本"${xxx}"或"$xxx"，那么需要在$前加转义字符"\"，即"\${xxx}"

支持链式取值

可以使用.进行链式取值

自定义 api 请求体数据格式

在表单提交接口时，amis 默认的请求体数据格式可能不符合你的预期，不用担心，你可以使用数据映定制想要的数据格式：

查看下面这种场景：

当输入姓名：ck 和邮箱：ck@gmail.com 后，form 获取当前的数据域，提交后端接口的数据格式应该是这样的：

遗憾的是，你的后端接口只支持的如下的输入数据结构，且无法修改：

这时，除了直接更改你的 姓名表单项 和 邮箱表单项 的name属为相应的字段以外，你可以配置api的data属，使用数据映轻松实现数据格式的自定义：

你可以查看网络面板，发送给后端接口的数据体应该已经成功修改为：

amis注意事项

amis 不适合做什么?

使用 ON 有优点但也有明显缺点，在以下场合并不适合 amis：

大量定制 UI：ON 配置使得 amis 更适合做有大量常见 UI 组件的页面，但对于面向普通客户(toC)的页面，往往追求个化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。

极为复杂或特殊的交互：

有些复杂的前端功能，比如 可视化编辑器，其中有大量定制的拖拽作，这种需要依赖原生 DOM 实现的功能无法使用 amis。

但对于某些交互固定的领域，比如图连线，amis 后续会有专门的组件来实现。