amis

amis简介

amis提供前端开发功能。该软件可以帮助用户快速设计前端页面，为用户设计UI提供更便捷的设计流程，优化代码编辑次数，用更少的代码设计UI页面。软件可以通过json配置快速生成相关页面内容，通过预设配置即可完成简单的前端页面开发。您可以快速配置页面内容，而无需使用复杂的引导和各种前端用户界面库。通过将该软件部署到您的开发程序中，您可以使用“开”来配置页面数据。该软件还提供了许多组件配置方案，支持添加、删除和修改页面、表单、CRUD、自定义组件、表格和动作动作按钮。可以使用amis快速配置ON设计UI！

amis软件功能

1.什么是amis

amis是一个低代码的frONt-end框架，使用on configuration生成页面，可以减少页面开发的工作量，大大提高效率。

2.用ON写页面有什么好处？

为了以最简单的方式生成大部分页面，amis的solutiON基于ON进行配置，其独特的优势在于:

不需要了解前端:在百度内部，大部分amis用户之前都没有写过前端页面，也不可能了解JavaScpt，但是可以做出专业复杂的后端接口，这是其他所有前端UI库都做不到的。

没有受到前端技术更新的影响:百度最老的amis页面是四年多前创建的，至今仍在使用，而当年的Angular/Vue/React版本现在已经过时，当年流行的grave也被Webpack取代。如果这些页面不是amis，目前的成本会很高；

享受amis的持续升级:amis一直在提升细节的交互体验，比如表单第一行的冻结，下拉框大数据下无堵塞等。以前的开配置根本不需要修改；

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

amis软件特色

提供完整的接口solutiON:其他UI框架必须使用JavaScpt来组装业务逻辑，amis可以完成完整功能的开发，包括数据采集、表单提交和验证等。，只需打开配置，创建的页面无需二次开发即可直接上线；

内置100+ UI组件:包括富文本编辑器、条件组合等。，这是其他UI框架没有提供的，可以满足各种页面组件的显示需求，也可以通过自定义组件进行扩展，用于特殊的显示形式；

支持容器无限嵌套:组合可满足多种布局需求；

经过长时间的实战测试:amis在百度得到了广泛的应用，五年多的时间创造了3.8万个页面，从内容审核到机器管理，从数据分析到模型训练，amis满足了各种页面需求，最复杂的页面在配置上有1万多个。

amis教程

操作原理

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

以表单页面为例，如果用React组件开发，它通常是这样的。

将上述配置模式更改为amis开，即:

那么，amis是如何变成组件的呢？根据节点类型直接对应组件？这将重复名称。例如，表单中显示的文本类型与表单中的文本完全不同，一个负责显示，另一个负责输入。因此，要说一个节点要呈现什么组件，还需要携带上下文。

如何承载语境？amis使用节点的路径作为上下文。从上面的例子来看，有三个节点，路径分别是。

页面节点

页面/正文/表单节点

页面/正文/表单/控件/0/文本文本框节点。

根据路径，注册节点对应的组件很容易。

页面组件的示例代码

表单组件的示例代码

文本组件的示例代码

然后渲染过程是根据节点路径匹配组件池中的组件测试。如果命中，当前节点将被转移到相应的组件进行渲染，节点中的其他pps将成为目标组件。需要注意的是，如果是容器组件，比如上面例子中的页面组件，那么从pps获取的主体就是一个子节点。由于节点类型不是用户固定确定的，不能直接渲染，所以交给属发出的渲染方法完成渲染。{ render(& # 8216；身体& # 8217；，body)}，他的工作是取子节点到组件池的路径找到对应的渲染器，交给对应的组件完成渲染。

迷你图

简单趋势图，仅供简单展示，请使用图表完成详细展示。

amis基本使用

类型，只需设置值，该值为数组格式。

当前示例是一个静态值。通常，您需要将名称配置为与当前环境数据相关联。

点击行为

您可以配置& # 8221；点击操作& # 8221；:{}，指定图表节点的点击行为，支持amis的行为。

数据配置

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

模板字符串

我的名字是ck

提示:默认情况下amis解析模板字符串时，遇到$字符时会尝试解析变量并替换模板变量。如果你想输出纯文本& # 8221；$ { xxx } & # 8221或者& # 8221；$ xxx & # 8221，则需要添加转义字符& # 8221；”，即& # 8221； $ { xxx } & # 8221

支持链值。

你可以用。链接价值观。

自定义api请求正文数据格式

在表单提交界面，amis请求者的默认数据格式可能不符合您的预期。别担心，您可以使用数据映射自定义所需的数据格式:

请看下面的场景:

输入姓名:ck、电子邮件地址:ck@gmail.com时，表单获取当前数据字段，提交到后端界面的数据格式应为:

不幸的是，您的后端接口只支持以下输入数据结构，无法修改:

此时，除了直接将您的姓名表单项和电子邮件表单项的名称属更改为对应的字段外，还可以配置api的数据属，并使用数据映射轻松实现数据格式的自定义:

您可以检查网络面板，发送到后端接口的数据主体应该已经成功修改为:

amis注意事项

amis什么不适合做？

ON有优点，但缺点很明显。在以下情况下不适合amis:

大规模定制UI: On配置使得amis更适合拥有大量常用UI组件的页面。但对于面向普通客户(toC)的页面，往往追求个性化的视觉效果。在这种情况下，不宜使用amis。其实大部分前端UI组件库都不适合，只能定制开发。

极其复杂或特殊的互动:

一些复杂的前端功能，比如可视化编辑器，有大量定制的拖放作品，无法使用amis，依赖于原生DOM。

但是对于一些固定交互的领域，比如图连接，amis后面会有专门的组件实现。