《開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目，包括技術、學習、實用與各種有趣的內容。本期推薦的是一個由百度開源的低代碼前端框架——amis。
在經歷了十幾年的發展后，前端開發變得越來越復雜，門檻也越來越高，要使用當下流行的 UI 組件庫，你必須懂 npm、webpack、react/vue，必須熟悉 ES6 語法，最好還了解狀態管理，比如 Redux，如果沒接觸過函數式編程，光入門都很費勁，而入門之后會發現它還有巨大的生態，相關的庫有 2347 個，很多功能相似，挑選成本高。
然而前端技術的發展不會停滯，等學完這些后可能會發現大家都用 Hooks 了、某個打包工具取代 Webpack了。使用amis只需要簡單配置就能完成所有頁面開發，你不需要了解 React/Vue、Webpack，甚至不需要很了解 JavaScript，即便沒學過 amis 也能猜到大部分配置的作用，對于大部分常用頁面，應該使用最簡單的方法來實現，甚至不需要學習前端框架和工具。
amis的亮點
- 不需要懂前端：在百度內部，大部分 amis 用戶之前從來沒寫過前端頁面，也不會 JavaScript，卻能做出專業且復雜的后臺界面，這是所有其他前端 UI 庫都無法做到的；
- 不受前端技術更新的影響：百度內部最老的 amis 頁面是 4 年多前創建的，至今還在使用，而當年的 Angular/Vue/React 版本現在都廢棄了，當年流行的 Gulp 也被 Webpack 取代了，如果這些頁面不是用 amis，現在的維護成本會很高；
- 享受 amis 的不斷升級：amis 一直在提升細節交互體驗，比如表格首行凍結、下拉框大數據下不卡頓等，之前的 JSON 配置完全不需要修改；
- amis 內置大量組件，包括了富文本編輯器、代碼編輯器、diff、條件組合、實時日志等業務組件，絕大部分中后臺頁面開發只需要了解 amis 就足夠了；還可以通過 自定義組件 來擴充組件，實際上 amis 可以當成普通 UI 庫來使用。
低代碼可視化編輯器
amis的定位是一個低代碼的前端框架，所以這里我們只介紹低代碼部分，如果你想使用純JSON配置來完成頁面開發，那么請查看一下文檔說明，當然你也可以使用90%低代碼 10%代碼開發的混合模式，既提升了效率，又不失靈活性。
注意：
1.目前 amis-editor 未開源，但可以免費使用（包括商用）
2.要使用編輯器必須熟悉 React
1. 在項目中使用amis-editor
安裝依賴
npm i amis-editor
使用方法
import {Editor} from 'amis-editor';render() { return ( <Editor {...props} /> )}
屬性說明：
- value: any 值，amis 的json 配置。
- onChange: (value: any) => void。 當編輯器修改的時候會觸發。
- preview?: boolean 是否為預覽狀態。
- autoFocus?: boolean 是否自動聚焦第一個可編輯的組件。
- plugins 插件類集合
2. 添加自定義組件
加自定義編輯器的方式有兩種：
- registerEditorPlugin 注冊全局插件。
- 不注冊，但是調用 <Editor> 的時候時候通過 plugins 屬性傳入。
效果都一樣，重點還是怎么寫個 Plugin，示例：
import {BasePlugin} from 'amis-editor';export class MyRendererPlugin extends BasePlugin { rendererName = 'my-renderer'; // 暫時只支持這個，配置后會開啟代碼編輯器 $schema = '/schemas/UnkownSchema.json'; // 用來配置名稱和描述 name = '自定義渲染器'; description = '這只是個示例'; // tag，決定會在哪個 tab 下面顯示的 tags = ['自定義', '表單項']; // 圖標 icon = 'fa fa-user'; // 用來生成預覽圖的 previewSchema = { type: 'my-renderer', target: 'demo' }; // 拖入組件里面時的初始數據 scaffold = { type: 'my-renderer', target: '233' }; // 右側面板相關 panelTitle = '自定義組件'; panelControls = [ { type: 'tabs', tabsMode: 'line', className: 'm-t-n-xs', contentClassName: 'no-border p-l-none p-r-none', tabs: [ { title: '常規', controls: [ { name: 'target', label: 'Target', type: 'text' } ] }, { title: '外觀', controls: [] } ] } ];}
定義好 plugin 后，可以有兩種方式啟用
// 方式 1，注冊默認插件，所有編輯器實例都會自動實例話。import {registerEditorPlugin} from 'amis-editor';registerEditorPlugin(MyRendererPlugin);// 方式2，只讓某些編輯器啟用() => ( <Editor plugins={[MyRendererPlugin]} />)
示例只做了簡單的說明，可用屬性還有很多，具體還是先看 npm 包里面的 .d.ts 文件。
3. 編輯器效果
- 網頁版
- 移動端
- 拖拽組件
- 查看代碼
從網頁到移動端，包括App、小程序等，amis可以滿足的頁面需求，但在一些特殊場景，比如有些頁面追求個性化的視覺效果，amis 就不適用，實際上絕大部分前端 UI 組件庫也都不適合，只能定制開發。更多有關amis的內容可自行前往閱讀。
開源地址：https://gitee.com/baidu/amis
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。