聲明：該文章來(lái)自（開(kāi)源之星）版權(quán)由原作者所有，K2OS渲染引擎提供網(wǎng)頁(yè)加速服務(wù)。

由百度開(kāi)源的低代碼前端框架Amis，它可以通過(guò)簡(jiǎn)單的JSON配置來(lái)快速構(gòu)建豐富的用戶界面。

就像官網(wǎng)[1]上介紹的那樣，現(xiàn)在的前端開(kāi)發(fā)變得越來(lái)越復(fù)雜，門檻也越來(lái)越高，市面上各種UI組件庫(kù)在不停的教育你要熟悉npm、精通webpack、熟練掌握vue等等，但是很多時(shí)候我就想做一個(gè)簡(jiǎn)單的數(shù)據(jù)表格，這么復(fù)雜的技術(shù)棧是完全學(xué)不過(guò)來(lái)。

因此，Amis的設(shè)計(jì)理念是讓前端開(kāi)發(fā)變得更加簡(jiǎn)單、高效，即使是非科班出身的程序員也能夠通過(guò)配置輕松創(chuàng)建表單、表格、卡片等各種UI組件。

安裝

amis有兩種使用方法：

JS SDK，可以用在任意頁(yè)面中React，可以用在React項(xiàng)目中

SDK版本適合對(duì)前端或React不了解的開(kāi)發(fā)者，它不依賴npm及webpack，可以像Vue/jQuery那樣外鏈代碼就能使用。

SDK的方式直接在頁(yè)面中引用js文件和css文件：

<link?rel="stylesheet"?href="sdk.css"?/><link?rel="stylesheet"?href="helper.css"?/><link?rel="stylesheet"?href="iconfont.css"?/><script?src="sdk.js"></script>

React的方式直接通過(guò)npm安裝：

npm install amis --save

典型組件

帶增刪改查的數(shù)據(jù)表格

對(duì)于一些信息管理系統(tǒng)，下面這種數(shù)據(jù)列表應(yīng)用應(yīng)該非常廣泛，就簡(jiǎn)單的增刪改查，然后支持分頁(yè)等等。這種場(chǎng)景就是amis的強(qiáng)項(xiàng)了，簡(jiǎn)單幾行JSON配置就可以完成。

圖表

對(duì)于一些常用的圖表，就沒(méi)必要再引入其他圖表庫(kù)了，amis可以通過(guò)簡(jiǎn)單的配置輕松拿捏，當(dāng)然內(nèi)核用的echarts，理論上echarts的所有圖表類型都支持。

表單項(xiàng)

amis有著比較完整的表單組件，基本上常用的和不常用的都有。這些表單項(xiàng)也是通過(guò)配置即可實(shí)現(xiàn)。

可視化編輯器

目前amis可視化編輯器也作為單獨(dú)的npm包發(fā)布了出來(lái)，可以通過(guò) npm 安裝使用，并且可以進(jìn)行在線體驗(yàn)[2]。

Vue組件集成

amis底層是基于React技術(shù)開(kāi)發(fā)，而Nop平臺(tái)的前端主要基于Vue3.0技術(shù)開(kāi)發(fā)，為了便于集成第三方的vue組件, Nop平臺(tái)提供了一個(gè)通用的包裝組件。在AMIS的配置文件中我們可以這樣使用：

{??"type":?"vue-form-item",??"vueComponent":?"Vue組件名",??"props": {? ??// 傳給vue組件的屬性? }}

移動(dòng)端支持

amis的設(shè)計(jì)本身是響應(yīng)式的，也就意味著大部分的組件都可以在移動(dòng)端進(jìn)行較好地展示，不需要我們做特殊的代碼改造。

尤其從1.6.0版本開(kāi)始，amis會(huì)默認(rèn)在移動(dòng)端下使用仿原生UI的展現(xiàn)，比如日期選擇會(huì)從底部彈出，這樣就能更好的貼切移動(dòng)端的交互方式。

同時(shí)我們也針對(duì)移動(dòng)端進(jìn)行特殊定制，可以通過(guò)mobile屬性來(lái)在移動(dòng)端下覆蓋部分屬性。

開(kāi)源地址：

https://github.com/baidu/amis

參考資料[1]?

官網(wǎng):?https://baidu.github.io/amis

[2]?

在線體驗(yàn):?https://aisuda.github.io/amis-editor-demo

[超站]友情鏈接：

四季很好，只要有你，文娛排行榜：https://www.yaopaiming.com/
關(guān)注數(shù)據(jù)與安全，洞悉企業(yè)級(jí)服務(wù)市場(chǎng)：https://www.ijiandao.com/