良心產品—百度開源前端框架Amis

2024-09-06科技

最近發現自己在低程式碼的道路上越走越遠了，各種低程式碼平台層出不窮，學習成本也越來越高，可憐我的頭發在日漸稀少......[流淚]

話說回來，低程式碼一直用一直香！！！

什麽是 amis？

amis 是一個低程式碼前端框架，它使用 JSON 配置來生成頁面，可以減少頁面開發工作量，極大提升效率。透過 JSON 配置就能生成各種後台頁面，極大減少開發成本，甚至可以不需要了解前端。

先簡單看一下

一個最簡單的 amis 配置看起來是這樣的：

{ "type": "page", "body": "Hello World!"}#這是一段 JSON，它的含義是：#type 是 amis 節點中最重要的欄位，它告訴 amis 當前節點需要渲染的是Page元件。#而 body 欄位會作為 Page 元件的內容，Page 元件根據這個值來渲染頁面內容。

Page是 amis 頁面配置中必須也是唯一的頂級節點

2. 數據域與數據鏈

#添加初始化介面{ "type": "page", "initApi": "/amis/api/mock2/page/initData", "body": "date is ${date}"}#這個 api 介面返回的數據結構如下：{ "status": 0, "msg": "", "data": { "title": "Test Page Component", "date": "2017-10-13" }}# 渲染後結果： date is 2017-10-13

簡單列舉了兩個例子，是不是很簡單，so easy

好吧，快速開始

Amis 有兩種使用方法：

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

React，可以用在 React 專案中

SDK 版本適合對前端或 React 不了解的開發者，它不依賴 npm 及 webpack，可以像 Vue/jQuery 那樣外鏈程式碼就能使用。

SDK:

下載方式：

github 的 releases，檔是 sdk.tar.gz。
使用 npm i amis 來下載，在 node_modules\amis\sdk 目錄裏就能找到。

切換主題：

jssdk 版本預設使用 sdk.css 即雲舍主題，如果你想使用仿 Antd，請將 css 參照改成 antd.css。同時 js 渲染地方第四個參數傳入 theme 內容。如：

Vue:

可以基於 SDK 版本封裝成 component 供 vue 使用，具體請參考範例：https://github.com/aisuda/vue2-amis-demo

React:

初始專案請參考 https://github.com/aisuda/amis-react-starter。

如果在已有專案中，React 版本需要是 >=16.8.6，mobx 需要 ^4.5.0。

amis 1.6.5 及以上版本支持 React 17。

安裝：

npm i amis

元件介紹

1.Page 頁面

{ "type": "page", "body": { "type": "form", "api": "/amis/api/mock2/form/saveForm", "body": [ { "type": "input-text", "name": "name", "label": "姓名：" } ] }}

2.Container 容器

{ "type": "page", "body": { "type": "container", "body": "這裏是容器內容區" }}

3.Collapse 折疊器

{ "type": "page", "body": { "type": "collapse-group", "activeKey": [ "1" ], "body": [ { "type": "collapse", "key": "1", "header": "標題1", "body": "這裏是內容1" }, { "type": "collapse", "key": "2", "header": "標題2", "body": "這裏是內容2" }, { "type": "collapse", "key": "3", "header": "標題3", "body": "這裏是內容3" } ] }}

4.Flex 布局

{ "type": "page", "body": { "type": "flex", "items": [ { " style": { "backgroundColor": "#1A5CFF", "width": 100, "height": 50, "margin": 5 }, "type": "tpl", "tpl": "" } ] }}

5.Form 表單

{ "type": "page", "body": { "type": "form", "body": [ { "type": "input-text", "label": "文本框", "name": "text" }, { "type": "input-password", "label": "<a href='./password'>密碼</a>", "name": "password" } ] }}

6.CRUD 增刪改查

CRUD，即增刪改查元件，主要用來展現數據列表，並支持各類【增】【刪】【改】【查】等操作。

註意 CRUD 所需的數據必須放 items 中，因此如果只是想顯示表格類別的數據沒有分頁，請使用 Table。

程式設計師的CRUD

7.demo 範例

https://aisuda.bce.baidu.com/amis/examples/index

用 JSON 寫頁面有什麽好處

為了實作用最簡單方式來生成大部份頁面，amis 的解決方案是基於 JSON 來配置，它的獨特好處是：

不需要懂前端 ：在百度內部，大部份 amis 使用者之前從來沒寫過前端頁面，也不會 JavaScript，卻能做出專業且復雜的後台界面，這是所有其他前端 UI 庫都無法做到的；

不受前端技術更新的影響 ：百度內部最老的 amis 頁面是 6 年多前建立的，至今還在使用，而當年的 Angular/Vue/React 版本現在都廢棄了，當年流行的 Gulp 也被 Webpack 取代了，如果這些頁面不是用 amis，現在的維護成本會很高；

享受 amis 的不斷升級 ：amis 一直在提升細節互動體驗，比如表格首行凍結、下拉框大數據下不卡頓等，之前的 JSON 配置完全不需要修改；

可以完全使用視覺化頁面編輯器來制作頁面：一般前端視覺化編輯器只能用來做靜態原型，而 amis 視覺化編輯器做出的頁面是可以直接上線的。

其他亮點

提供完整的界面解決方案 ：其它 UI 框架必須使用 JavaScript 來組裝業務邏輯，而 amis 只需 JSON 配置就能完成完整功能開發，包括數據獲取、表單送出及驗證等功能，做出來的頁面不需要經過二次開發就能直接上線；

大量內建元件（120+），一站式解決 ：其它 UI 框架大部份都只有最通用的元件，如果遇到一些稍微不常用的元件就得自己找第三方，而這些第三方元件往往在展現和互動上不一致，整合起來效果不好，而 amis 則內建大量元件，包括了富文字編輯器、程式碼編輯器、diff、條件組合、即時日誌等業務元件，絕大部份中後台頁面開發只需要了解 amis 就足夠了；

支持擴充套件 ：除了低程式碼模式，還可以透過自訂元件來擴充元件，實際上 amis 可以當成普通 UI 庫來使用，實作 90% 低程式碼，10% 程式碼開發的混合模式，既提升了效率，又不失靈活性；

容器支持無限級巢狀 ：可以透過巢狀來滿足各種布局及展現需求；

經歷了長時間的實戰考驗 ：amis 在百度內部得到了廣泛使用， 在 6 年多的時間裏建立了 5 萬頁面 ，從內容稽核到機器管理，從數據分析到模型訓練，amis 滿足了各種各樣的頁面需求，最復雜的頁面有超過 1 萬行 JSON 配置。

amis 不適合做什麽？

使用 JSON 有優點但也有明顯缺點，在以下場合並不適合 amis：

大量客製 UI ：JSON 配置使得 amis 更適合做有大量常見 UI 元件的頁面，但對於面向普通客戶（toC）的頁面，往往追求個人化的視覺效果，這種情況下用 amis 就不合適，實際上絕大部份前端 UI 元件庫也都不適合，只能客製開發。

極為復雜或特殊的互動 ：有些復雜的前端功能，比如視覺化編輯器，其中有大量客製的拖拽操作，這種需要依賴原生 DOM 實作的功能無法使用 amis。但對於某些互動固定的領域，比如圖連線，amis 後續會有專門的元件來實作。

總結

amis確實可以說是一個良心產品，對於一些簡單的功能，只要有api就能實作完整的系統，元件豐富，樣式也很好看，對於前端不是很擅長的人員來說非常的友好，對於高手也能提升效率！