我正在参加「码上掘金挑战赛」详情请看：[码上掘金挑战赛来了！]

在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂 npm、webpack、react/vue，必须熟悉 ES6 语法，相关的库有 2347 个，很多功能相似，挑选成本高。

然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 Webpack 了……

这些都是官方的说明了。。。为什么要用这个呢？
因为需要，需要生成报表实现配置什么组件，我就生成什么，当然主要还是查询以及报表

01

简介

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

有时候其实只想做个普通的增删改查界面，用于信息管理，类似下面这种：

这个界面虽然用 Bootstrap 及各种前端 UI 库也能做出个大概，但仔细观察会发现它有大量细节功能，比如：

02 amis 的其它亮点

1.提供完整的界面解决方案：amis 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能，做出来的页面不需要经过二次开发就能直接上线；

2. 大量内置组件（100+），amis 则内置大量组件，包括了富文本编辑器、代码编辑器、diff、条件组合、实时日志等业务组件，绝大部分中后台页面开发只需要了解 amis 就足够了；

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

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

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

JS SDK，可以用在任意页面中

React，可以用在 React 项目中
SDK 版本适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，可以像 Vue/jQuery 那样外链代码就能使用。

下载方式：

github 的 releases，文件是 sdk.tar.gz。
使用 npm i amis 来下载，在 node_modules\amis\sdk 目录里就能找到。
新建一个 hello.html 文件，内容如下：代码块地址：code.juejin.cn/pen/7141281…

这里我使用的Vue,因为这个框架是基于react组件去渲染的，所以安装依赖就可以了！！
Vue中引用React组件：
npm i -S vuera
npm install --save react react-dom

1.配置初始化接口api 1.1Service 功能型容器 amis 中部分组件，作为展示组件，自身没有使用接口初始化数据域的能力，例如：Table、Cards、List等，他们需要使用某些配置项，例如source，通过数据映射功能，在当前的数据链中获取数据，并进行数据展示。

而Service组件就是专门为该类组件而生，它的功能是：：配置初始化接口，进行数据域的初始化，然后在Service内容器中配置子组件，这些子组件通过数据链的方法，获取Service所拉取到的数据

但是你会发现用api,source的时候组件无法渲染，需要用v-if 一开始做判断然后nextTick再次渲染才能展示，这个和组件封装的关系，这也是自己试了好久才发现的

1.2 一般写项目不要用里面自带的接口返回状态，一般和后端沟通好规范一套出来，重新去映射里面的状态返回

2.日期时间选择器默认的日期返回value 今天竟然是"-1days,+0days",和给的官方文档不一样，反正有很多类似的坑在里面

3.json函数返回这就不得不提有一个问题，返回的参数里面有adaptor函数，后端返回只能解析成字符串返回，前端做eval处理

4.数据映射级联下拉的使用

里面的坑还有很多，有时候找原因需要凭自身经验去自己去发现，还是要多实践

喜欢就关注，点赞，你的支持，是我努力的动力！！