《開源精選》是我們分享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. 編輯器效果