amis V1.1.2 绿色版前端开发工具

amis是一款专业的前端开发工具。快速设计前端页面就来使用amis吧。该软件可以帮助用户快速设计前端页面，为用户设计UI，优化代码编辑次数以及使用更少的代码设计UI页面提供了更方便的设计过程。该软件可以通过json配置快速生成相关页面内容。可以通过预设配置完成简单的前端页面开发。您可以快速配置页面内容，而无需使用复杂的Bootstrap和各种前端UI库。将软件部署到您的开发程序，并使用JSON配置页面数据。软件它还提供了许多组件配置解决方案，支持页面页面，表单表单，CRUD添加，删除和更改，自定义自定义组件，表格表单和操作按钮。您可以使用amis快速配置JSON设计UI！

官方教程：

工作准则

amis的渲染过程是将json转换为相应的React组件。首先通过json的类型找到相应的Component，然后将其他属性作为道具传递以完成渲染。

以表单页面为例，如果您使用React组件进行开发，通常如下所示。

将上述配置方法替换为amis JSON，则为：

那么，amis如何将JSON转换为组件？直接根据节点的类型与组件进行一一对应？这将具有相同的名称。例如，表单中显示的文本类型与表单中的文本完全不同。一个负责显示，另一个负责输入。因此，节点需要呈现的组件需要上下文信息。

如何携带上下文信息？在amis中，节点的路径用作上下文信息。从上面的示例中，总共有三个节点，并且路径信息分别是。

页面页面节点

页面/正文/表单表单节点

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

根据路径信息，容易注册与该节点相对应的组件。

页面组件的示例代码

表单组件的示例代码

文本组件的示例代码

然后渲染过程就是匹配compone

根据节点路径信息，在组件池中进行nt测试（检测）信息。如果命中，则将当前节点转移到相应的组件进行渲染，并且该节点中的其他属性将用作目标组件的道具。应该注意的是，如果它是一个容器组件，例如上例中的page组件，则从props获得的主体是一个子节点。由于节点类型不是固定的，而是由用户确定的，因此无法直接完成渲染，因此，提交在属性中发布的Give方法，以完成渲染{render（'body'，body）}，他的工作是获取子节点的路径信息以在组件池中找到相应的渲染器，然后将其移交给相应的组件以完成渲染。

迷你图

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

基本用途

配置类型，然后设置值，该值采用数组格式。

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

点击行为

您可以通过配置支持amis行为的“ clickAction”：{}来指定图表节点的点击行为。

数据映射

数据映射允许用户通过$ {xxx}或$ xxx获取当前数据链中变量的值，以实现灵活的数据配置功能，主要用于诸如模板字符串和自定义api请求数据主体格式之类的场景。

模板字符串

我叫里克

提示：默认情况下，当amis解析模板字符串时，它将在遇到$字符时尝试解析变量并替换模板变量。如果要输出纯文本“ $ {xxx}”或“ $ xxx”，则需要在$之前加上转义字符“ \\”，即“ \\ $ {xxx}”

支持链价值

可以使用。对于连锁价值

自定义api请求主体数据格式

在表单提交界面中，默认的请求主体数据格式amis可能无法满足您的期望，请放心，您可以使用数据映射来自定义所需的数据格式：

查看下场景：

输入名称：rick和电子邮件：[email protected]后，表单将获取当前数据字段，并且提交至后端接口的数据格式应如下所示：

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

目前，除了直接将姓名表单项和电子邮件表单项的name属性更改为相应的字段外，您还可以配置api的data属性，并使用数据映射轻松地自定义数据格式：

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

预防措施

amis不适合什么？

使用JSON有优点，但也有明显的缺点。在以下情况下，它不适合amis：

大量的自定义UI：JSON配置使amis更适合具有大量常见UI组件的页面，但对于普通客户（toC）页面，它们通常追求个性化的视觉效果。在这种情况下，不适合使用amis。实际上，大多数前端UI组件库都不适合，只能进行定制和开发。

非常复杂或特殊的交互：

一些复杂的前端功能（例如视觉编辑器）具有大量自定义的拖放操作。需要依靠本机DOM的实现的这种功能不能使用amis。

但是对于某些具有固定交互作用的区域（例如图形连接），amis将具有稍后实施的特殊组件。

软件功能：

1.什么是阿米斯

Amis是一个低代码的前端框架。它使用JSON配置生成页面，可以减少页面开发的工作量并大大提高效率。

2.用JSON编写页面有什么好处

为了实现生成大多数页面的最简单方法，amis的解决方案基于JSON进行配置，其独特的优势是：

无需了解前端：在百度中，大多数amis用户以前从未编写过前端页面，并且不了解JavaScript，但是他们可以制作专业而复杂的后端界面，而其他所有前端UI图书馆做不到；

不受前端技术更新的影响：百度最早的amis页面创建于4年前，并且至今仍在使用，并且该年的Angular / Vue / React版本现在已过时，而当年流行的Gulp被替换了通过Webpack。如果不使用这些页面，那么现在的维护成本将会很高。

享受amis的不断升级：amis一直在改进细节的交互体验，例如冻结表单的第一行，并且在下拉框中不冻结大数据。先前的JSON配置根本不需要修改；

您可以完全使用可视化页面编辑器来制作页面：常规的前端可视化编辑器只能用于静态原型，而amis可视化编辑器制作的页面可以直接在线。

软件特色：

提供完整的界面解决方案：其他UI框架必须使用JavaScript来组装业务逻辑，而amis只需要JSON配置即可完成完整的功能开发，包括数据获取，表单提交和验证。第一次开发后，结果页面无需直接通过两次Go联机；

100多个内置UI组件：包括其他UI框架未提供的富文本编辑器，条件组合等，可以满足各种页面组件显示的需求，也可以通过自定义组件进行扩展以用于特殊显示形式;

该容器支持无限级别的嵌套：通过组合可以满足各种布局要求；

经过长时间的实战测试：amis已在百度内部被广泛使用。在5年多的时间里，已经创建了38,000页。从内容审查到机器管理，从数据分析到模型训练，Amis满足各种这样的页面要求，最复杂的页面具有10,000行以上的JSON配置。