返回
amis V1.1.2 绿色版

amis

立即下载

小编提示:PC版不适合移动端,如下载有问题点击反馈!

软件介绍

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

官方教程:

工作准则

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

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

amis

将上述配置方法替换为amis JSON,则为:

amis

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

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

页面页面节点

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

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

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

页面组件的示例代码

amis

表单组件的示例代码

amis

文本组件的示例代码

amis

然后渲染过程就是匹配compone

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

迷你图

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

基本用途

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

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

amis

amis

点击行为

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

amis

amis

amis

数据映射

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

模板字符串

我叫里克

amis

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

amis

支持链价值

可以使用。对于连锁价值

amis

amis

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

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

查看下场景:

amis

amis

输入名称:rick和电子邮件:rick@gmail.com后,表单将获取当前数据字段,并且提交至后端接口的数据格式应如下所示:

amis

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

amis

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

amis

amis

amis


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

amis

预防措施

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配置。

精品推荐
猜你喜欢
用户评论