《開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項(xiàng)目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦的是一個(gè)由百度開源的低代碼前端框架——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 個(gè)，很多功能相似，挑選成本高。
然而前端技術(shù)的發(fā)展不會停滯，等學(xué)完這些后可能會發(fā)現(xiàn)大家都用 Hooks 了、某個(gè)打包工具取代 Webpack了。使用amis只需要簡單配置就能完成所有頁面開發(fā)，你不需要了解 React/Vue、Webpack，甚至不需要很了解 JavaScript，即便沒學(xué)過 amis 也能猜到大部分配置的作用，對于大部分常用頁面，應(yīng)該使用最簡單的方法來實(shí)現(xiàn)，甚至不需要學(xué)習(xí)前端框架和工具。
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í)時(shí)日志等業(yè)務(wù)組件，絕大部分中后臺頁面開發(fā)只需要了解 amis 就足夠了；還可以通過 自定義組件 來擴(kuò)充組件，實(shí)際上 amis 可以當(dāng)成普通 UI 庫來使用。
低代碼可視化編輯器
amis的定位是一個(gè)低代碼的前端框架，所以這里我們只介紹低代碼部分，如果你想使用純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)編輯器修改的時(shí)候會觸發(fā)。
- preview?: boolean 是否為預(yù)覽狀態(tài)。
- autoFocus?: boolean 是否自動(dòng)聚焦第一個(gè)可編輯的組件。
- plugins 插件類集合
2. 添加自定義組件
加自定義編輯器的方式有兩種：
- registerEditorPlugin 注冊全局插件。
- 不注冊，但是調(diào)用 <Editor> 的時(shí)候時(shí)候通過 plugins 屬性傳入。
效果都一樣，重點(diǎn)還是怎么寫個(gè) Plugin，示例：
import {BasePlugin} from 'amis-editor';export class MyRendererPlugin extends BasePlugin { rendererName = 'my-renderer'; // 暫時(shí)只支持這個(gè)，配置后會開啟代碼編輯器 $schema = '/schemas/UnkownSchema.json'; // 用來配置名稱和描述 name = '自定義渲染器'; description = '這只是個(gè)示例'; // tag，決定會在哪個(gè) tab 下面顯示的 tags = ['自定義', '表單項(xiàng)']; // 圖標(biāo) icon = 'fa fa-user'; // 用來生成預(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，注冊默認(rèn)插件，所有編輯器實(shí)例都會自動(dòng)實(shí)例話。import {registerEditorPlugin} from 'amis-editor';registerEditorPlugin(MyRendererPlugin);// 方式2，只讓某些編輯器啟用() => ( <Editor plugins={[MyRendererPlugin]} />)
示例只做了簡單的說明，可用屬性還有很多，具體還是先看 npm 包里面的 .d.ts 文件。
3. 編輯器效果
- 網(wǎng)頁版
- 移動(dòng)端
- 拖拽組件
- 查看代碼
從網(wǎng)頁到移動(dòng)端，包括App、小程序等，amis可以滿足的頁面需求，但在一些特殊場景，比如有些頁面追求個(gè)性化的視覺效果，amis 就不適用，實(shí)際上絕大部分前端 UI 組件庫也都不適合，只能定制開發(fā)。更多有關(guān)amis的內(nèi)容可自行前往閱讀。
開源地址：https://gitee.com/baidu/amis
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。