《開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項(xiàng)目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦的是一個(gè)由百度開源的低代碼前端框架——amis。

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

然而前端技術(shù)的發(fā)展不會(huì)停滯，等學(xué)完這些后可能會(huì)發(fā)現(xiàn)大家都用 Hooks 了、某個(gè)打包工具取代 Webpack了。使用amis只需要簡(jiǎn)單配置就能完成所有頁(yè)面開發(fā)，你不需要了解 React/Vue、Webpack，甚至不需要很了解 JavaScript，即便沒(méi)學(xué)過(guò) amis 也能猜到大部分配置的作用，對(duì)于大部分常用頁(yè)面，應(yīng)該使用最簡(jiǎn)單的方法來(lái)實(shí)現(xiàn)，甚至不需要學(xué)習(xí)前端框架和工具。

amis的亮點(diǎn)

• 不需要懂前端：在百度內(nèi)部，大部分 amis 用戶之前從來(lái)沒(mé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 配置完全不需要修改；
• amis 內(nèi)置大量組件，包括了富文本編輯器、代碼編輯器、diff、條件組合、實(shí)時(shí)日志等業(yè)務(wù)組件，絕大部分中后臺(tái)頁(yè)面開發(fā)只需要了解 amis 就足夠了；還可以通過(guò) 自定義組件 來(lái)擴(kuò)充組件，實(shí)際上 amis 可以當(dāng)成普通 UI 庫(kù)來(lái)使用。

低代碼可視化編輯器

amis的定位是一個(gè)低代碼的前端框架，所以這里我們只介紹低代碼部分，如果你想使用純JSON配置來(lái)完成頁(yè)面開發(fā)，那么請(qǐng)查看一下文檔說(shuō)明，當(dāng)然你也可以使用90%低代碼 10%代碼開發(fā)的混合模式，既提升了效率，又不失靈活性。

注意：

1.目前 amis-editor 未開源，但可以免費(fèi)使用（包括商用）

2.要使用編輯器必須熟悉 React

1. 在項(xiàng)目中使用amis-editor

安裝依賴

npm i amis-editor

使用方法

import {Editor} from 'amis-editor';render() { return ( <Editor {...props} /> )}

屬性說(shuō)明：

• value: any 值，amis 的json 配置。
• onChange: (value: any) => void。 當(dāng)編輯器修改的時(shí)候會(huì)觸發(fā)。
• preview?: boolean 是否為預(yù)覽狀態(tài)。
• autoFocus?: boolean 是否自動(dòng)聚焦第一個(gè)可編輯的組件。
• plugins 插件類集合

2. 添加自定義組件

加自定義編輯器的方式有兩種：

• registerEditorPlugin 注冊(cè)全局插件。
• 不注冊(cè)，但是調(diào)用 <Editor> 的時(shí)候時(shí)候通過(guò) plugins 屬性傳入。

效果都一樣，重點(diǎn)還是怎么寫個(gè) Plugin，示例：

import {BasePlugin} from 'amis-editor';export class MyRendererPlugin extends BasePlugin { rendererName = 'my-renderer'; // 暫時(shí)只支持這個(gè)，配置后會(huì)開啟代碼編輯器 $schema = '/schemas/UnkownSchema.json'; // 用來(lái)配置名稱和描述 name = '自定義渲染器'; description = '這只是個(gè)示例'; // tag，決定會(huì)在哪個(gè) tab 下面顯示的 tags = ['自定義', '表單項(xiàng)']; // 圖標(biāo) icon = 'fa fa-user'; // 用來(lái)生成預(yù)覽圖的 previewSchema = { type: 'my-renderer', target: 'demo' }; // 拖入組件里面時(shí)的初始數(shù)據(jù) scaffold = { type: 'my-renderer', target: '233' }; // 右側(cè)面板相關(guān) panelTitle = '自定義組件'; panelControls = [ { type: 'tabs', tabsMode: 'line', className: 'm-t-n-xs', contentClassName: 'no-border p-l-none p-r-none', tabs: [ { title: '常規(guī)', controls: [ { name: 'target', label: 'Target', type: 'text' } ] }, { title: '外觀', controls: [] } ] } ];}

定義好 plugin 后，可以有兩種方式啟用

// 方式 1，注冊(cè)默認(rèn)插件，所有編輯器實(shí)例都會(huì)自動(dòng)實(shí)例話。import {registerEditorPlugin} from 'amis-editor';registerEditorPlugin(MyRendererPlugin);// 方式2，只讓某些編輯器啟用() => ( <Editor plugins={[MyRendererPlugin]} />)

示例只做了簡(jiǎn)單的說(shuō)明，可用屬性還有很多，具體還是先看 npm 包里面的 .d.ts 文件。

3. 編輯器效果

• 網(wǎng)頁(yè)版

• 移動(dòng)端

• 拖拽組件

• 查看代碼

從網(wǎng)頁(yè)到移動(dòng)端，包括App、小程序等，amis可以滿足的頁(yè)面需求，但在一些特殊場(chǎng)景，比如有些頁(yè)面追求個(gè)性化的視覺(jué)效果，amis 就不適用，實(shí)際上絕大部分前端 UI 組件庫(kù)也都不適合，只能定制開發(fā)。更多有關(guān)amis的內(nèi)容可自行前往閱讀。

開源地址：https://gitee.com/baidu/amis