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

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

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

百度開源的低代碼前端框架，支持網(wǎng)頁和移動端頁面開發(fā)（百度前端代碼規(guī)范）

amis的亮點(diǎn)

不需要懂前端：在百度內(nèi)部，大部分 amis 用戶之前從來沒寫過前端頁面，也不會 JavaScript，卻能做出專業(yè)且復(fù)雜的后臺界面，這是所有其他前端 UI 庫都無法做到的；
不受前端技術(shù)更新的影響：百度內(nèi)部最老的 amis 頁面是 4 年多前創(chuàng)建的，至今還在使用，而當(dāng)年的 Angular/Vue/React 版本現(xiàn)在都廢棄了，當(dāng)年流行的 Gulp 也被 Webpack 取代了，如果這些頁面不是用 amis，現(xiàn)在的維護(hù)成本會很高；
享受 amis 的不斷升級：amis 一直在提升細(xì)節(jié)交互體驗(yàn)，比如表格首行凍結(jié)、下拉框大數(shù)據(jù)下不卡頓等，之前的 JSON 配置完全不需要修改；
amis 內(nèi)置大量組件，包括了富文本編輯器、代碼編輯器、diff、條件組合、實(shí)時日志等業(yè)務(wù)組件，絕大部分中后臺頁面開發(fā)只需要了解 amis 就足夠了；還可以通過自定義組件來擴(kuò)充組件，實(shí)際上 amis 可以當(dāng)成普通 UI 庫來使用。

百度開源的低代碼前端框架，支持網(wǎng)頁和移動端頁面開發(fā)（百度前端代碼規(guī)范）

低代碼可視化編輯器

amis的定位是一個低代碼的前端框架，所以這里我們只介紹低代碼部分，如果你想使用純JSON配置來完成頁面開發(fā)，那么請查看一下文檔說明，當(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} /> )}

屬性說明：

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

2. 添加自定義組件

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

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

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

import {BasePlugin} from 'amis-editor';export class MyRendererPlugin extends BasePlugin { rendererName = 'my-renderer'; // 暫時只支持這個，配置后會開啟代碼編輯器 $schema = '/schemas/UnkownSchema.json'; // 用來配置名稱和描述 name = '自定義渲染器'; description = '這只是個示例'; // tag，決定會在哪個 tab 下面顯示的 tags = ['自定義', '表單項(xiàng)']; // 圖標(biāo) icon = 'fa fa-user'; // 用來生成預(yù)覽圖的 previewSchema = { type: 'my-renderer', target: 'demo' }; // 拖入組件里面時的初始數(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，注冊默認(rèn)插件，所有編輯器實(shí)例都會自動實(shí)例話。import {registerEditorPlugin} from 'amis-editor';registerEditorPlugin(MyRendererPlugin);// 方式2，只讓某些編輯器啟用() => ( <Editor plugins={[MyRendererPlugin]} />)

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

3. 編輯器效果