介紹

amis 是一個(gè)低代碼前端框架，它使用 JSON 配置來生成頁面，可以節(jié)省頁面開發(fā)工作量，極大提升開發(fā)前端頁面的效率。通過 JSON 配置就能生成各種后臺(tái)頁面，極大減少開發(fā)成本，甚至可以不需要了解前端。目前在百度廣泛用于內(nèi)部平臺(tái)的前端開發(fā)，已有 100 部門使用，創(chuàng)建了 3w 頁面。

Github和Gitee

https://github.com/baidu/amis

https://gitee.com/baidu/amis

相關(guān)工具及平臺(tái)

• 通過 amis 搭建自己的后臺(tái)系統(tǒng)：

https://github.com/fex-team/amis-admin

• 可視化編輯器：

https://github.com/fex-team/amis-editor

組件介紹

關(guān)于概念部分，amis提供了詳細(xì)的文檔，我們來看一看它的組件，以下是簡單介紹以及截圖：

• Page 頁面

Page 組件是 amis 頁面 JSON 配置中，唯一的 頂級(jí)容器組件，是整個(gè)頁面配置的入口組件。

• Form 表單

表單是 amis 中核心組件之一，主要作用是提交或者展示表單數(shù)據(jù)。

表單內(nèi)部具備非常多的常用的功能組件

• FormItem 普通表單項(xiàng)

表單項(xiàng) 是組成一個(gè)表單的基本單位，它具有的一些特性會(huì)幫助我們更好地實(shí)現(xiàn)表單操作。

• Options 選擇器表單項(xiàng)

選擇器表單項(xiàng) 是指那些（例如下拉選擇框）具有選擇器特性的表單項(xiàng)

它派生自 表單項(xiàng)，擁有表單項(xiàng)所有的特性。

• Array 數(shù)組輸入框

普通表單項(xiàng)，其實(shí)就是 Combo 的一個(gè) flat 用法。

• Button 按鈕

form中除了支持 行為按鈕以外，還支持一些特定的按鈕。

• Checkbox 勾選框

• City 城市選擇器

城市選擇器，可用于讓用戶輸入城市。

• 顏色選擇器

• Date 日期、時(shí)間、范圍

• DiffEditor 對(duì)比編輯器

• File 文件上傳

用來負(fù)責(zé)文件上傳，文件上傳成功后會(huì)返回文件地址，這個(gè)文件地址會(huì)作為這個(gè)表單項(xiàng)的值，整個(gè)表單提交的時(shí)候，其實(shí)提交的是文件地址，文件上傳已經(jīng)在這個(gè)控件中完成了。

• Formula 公式

可以設(shè)置公式，將公式結(jié)果設(shè)置到指定表單項(xiàng)上

• Transfer 穿梭器

• Tree 樹形

CRUD 增刪改查

CRUD，即增刪改查組件，主要用來展現(xiàn)數(shù)據(jù)列表，并支持各類【增】【刪】【改】【查】等操作。最基本的用法是配置 數(shù)據(jù)源接口(api) 以及 展示列(columns)

。。。amis的組件過于豐富，本文不再詳細(xì)介紹，以上只是部分組件的截圖

可視化編輯器

后臺(tái)管理界面

總結(jié)

amis確實(shí)可以說是一個(gè)良心產(chǎn)品，特別是對(duì)于一些簡單的功能，基本上只要有api就能完全實(shí)現(xiàn)一個(gè)完整的系統(tǒng)，組件豐富，樣式也很好看，對(duì)于前端不是很擅長的人員來說非常的友好，對(duì)于高手也能提升效率！本文只是簡單的概述，詳細(xì)的可以參考文檔和代碼！