??大家好，我是為廣大程序員兄弟操碎了心的小編，每天推薦一個(gè)小工具/源碼，裝滿你的收藏夾，每天分享一個(gè)小技巧，讓你輕松節(jié)省開發(fā)效率，實(shí)現(xiàn)不加班不熬夜不掉頭發(fā)，是我的目標(biāo)！

??低代碼最近一兩年炒得非?；穑芏嗟痛a平臺(tái)都頻繁出現(xiàn)，所以今天小編推薦一款低代碼前端框架——amis，amis使用 JSON 配置來(lái)生成頁(yè)面，可以節(jié)省頁(yè)面開發(fā)工作量，極大提升開發(fā)前端頁(yè)面的效率。

開源協(xié)議

??使用 Apache-2.0 開源許可協(xié)議

鏈接地址

為什么要做 amis？

??在經(jīng)歷了十幾年的發(fā)展后，前端開發(fā)變得越來(lái)越復(fù)雜，門檻也越來(lái)越高，要使用當(dāng)下流行的 UI 組件庫(kù)，你必須懂 npm、webpack、react/vue，必須熟悉 ES6 語(yǔ)法，最好還了解狀態(tài)管理，比如 Redux，如果沒接觸過(guò)函數(shù)式編程，光入門都很費(fèi)勁，而入門之后會(huì)發(fā)現(xiàn)它還有巨大的生態(tài)，很多功能相似，挑選成本高。

用 JSON 寫頁(yè)面有什么好處

??為了實(shí)現(xiàn)用最簡(jiǎn)單方式來(lái)生成大部分頁(yè)面，amis的解決方案是基于 JSON 來(lái)配置，它的獨(dú)特好處是：

• 不需要懂前端：在百度內(nèi)部，大部分amis用戶之前從來(lái)沒寫過(guò)前端頁(yè)面，也不會(huì) JavaScript，卻能做出專業(yè)且復(fù)雜的后臺(tái)界面，這是所有其他前端 UI 庫(kù)都無(wú)法做到的；
• 不受前端技術(shù)更新的影響：百度內(nèi)部最老的amis 頁(yè)面是 4 年多前創(chuàng)建的，至今還在使用，而當(dāng)年的 Angular/Vue/React 版本現(xiàn)在都廢棄了，當(dāng)年流行的 Gulp 也被 Webpack 取代了，如果這些頁(yè)面不是用amis，現(xiàn)在的維護(hù)成本會(huì)很高；
• 享受amis的不斷升級(jí)：amis 一直在提升細(xì)節(jié)交互體驗(yàn)，比如表格首行凍結(jié)、下拉框大數(shù)據(jù)下不卡頓等，之前的 JSON 配置完全不需要修改；
• 可以 完全 使用可視化頁(yè)面編輯器來(lái)制作頁(yè)面：一般前端可視化編輯器只能用來(lái)做靜態(tài)原型，而amis 可視化編輯器做出的頁(yè)面是可以直接上線的。

amis 不適合做什么？

使用 JSON 有優(yōu)點(diǎn)但也有明顯缺點(diǎn)，在以下場(chǎng)合并不適合 amis：

• 大量定制 UI：JSON 配置使得 amis 更適合做有大量常見 UI 組件的頁(yè)面，但對(duì)于面向普通客戶（toC）的頁(yè)面，往往追求個(gè)性化的視覺效果，這種情況下用 amis 就不合適，實(shí)際上絕大部分前端 UI 組件庫(kù)也都不適合，只能定制開發(fā)。
• 極為復(fù)雜或特殊的交互： 有些復(fù)雜的前端功能，比如 可視化編輯器，其中有大量定制的拖拽操作，這種需要依賴原生 DOM 實(shí)現(xiàn)的功能無(wú)法使用 amis。但對(duì)于某些交互固定的領(lǐng)域，比如圖連線，amis 后續(xù)會(huì)有專門的組件來(lái)實(shí)現(xiàn)。

示例截圖

表單

Checkbox 勾選框

日期

文件上傳

List 列表

富文本編輯器

Switch開關(guān)

圖表

Cards卡片組

結(jié)尾

??本期就分享到這里，我是小編南風(fēng)吹，專注分享好玩有趣、新奇、實(shí)用的開源項(xiàng)目及開發(fā)者工具、學(xué)習(xí)資源！希望能與大家共同學(xué)習(xí)交流。