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

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

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

安裝

amis有兩種使用方法：

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

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

SDK的方式直接在頁面中引用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的方式直接通過npm安裝：

npm install amis --save

典型組件

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

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

圖表

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

表單項(xiàng)

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

可視化編輯器

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

Vue組件集成

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

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

移動端支持

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

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

同時我們也針對移動端進(jìn)行特殊定制，可以通過mobile屬性來在移動端下覆蓋部分屬性。

開源地址：

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è)級服務(wù)市場：https://www.ijiandao.com/