百度Amis+React低代碼實踐-有解無憂

背景

在專案中有集成低代碼平臺的想法,經過多方對比最后選擇了 amis,主要是需要通過 amis 進行頁面配置,匯出 json 供移動端和 PC 端進行渲染,所以接下來講一下近兩周研究 amis 的新的以及一些簡單經驗,供大家參考.

什么是 amis

amis 是一個低代碼前端框架，它使用 JSON 配置來生成頁面，可以減少頁面開發作業量，極大提升效率，

如何使用 amis

在 amis 官網提供了兩種使用 amis 的方式分別是

JSSDK 可以在任意頁面使用
React 可以在 React 專案中使用

博主是在 umi 框架下結合 React 使用 amis,所以本文主要著重介紹第二種方法

在使用時需要對 amis 進行安裝,專案中也需要使用 amis-editor 進行頁面配置所以需要同時安裝如下兩個包

{
  "amis": "^3.1.1",
  "amis-editor": "^5.4.1"
}

amis

首先介紹 amis,amis 提供了 render 方法來對 amis-editor 生成的 JSON 物件頁面配置進行渲染,如下,在使用是 render 主要作用就是進行渲染

import { render as renderAmis } from "amis";

const App = () => {
  return (
    <div>
      {renderAmis({
        type: "button",
        label: "保存",
        level: "primary",
        onClick: function () {
          console.log("TEST");
        },
      })}
    </div>
  );
};

export default App;

amis-editor

amis-editor 提供了一個編譯器組件 <Editor />

import { useState } from "react";
import { Editor, setSchemaTpl } from "amis-editor";
import type { SchemaObject } from "amis";
import { render as renderAmis } from "amis";
import type { Schema } from "amis/lib/types";
// 以下樣式均生效
import "amis/lib/themes/default.css";
import "amis/lib/helper.css";
import "amis/sdk/iconfont.css";
import "amis-editor-core/lib/style.css";
import "amis-ui/lib/themes/antd.css";
type Props = {
  defaultPageConfig?: Schema;
  codeGenHandler?: (codeObject: Schema) => void;
  pageChangeHandler?: (codeObject: Schema) => void;
};

export function Amis(props: Props) {
  const [mobile, setMobile] = useState(false);
  const [preview, setPreview] = useState(false);
  const [defaultPageConfig] = useState<Schema>(props.defaultPageConfig); // 傳入配置
  const defaultSchema: Schema | SchemaObject = defaultPageConfig || {
    type: "page",
    body: "",
    title: "標題",
    regions: ["body"],
  };
  const [schema] = useState(defaultSchema);
  let pageJsonObj: Schema = defaultSchema;
  const onChange = (value: Schema) => {
    pageJsonObj = value;
    props.pageChangeHandler && props.pageChangeHandler(value);
  };
  const onSave = () => {
    props.codeGenHandler && props.codeGenHandler(pageJsonObj);
  };
  return (
    <>
      {renderAmis({
        type: "form",
        mode: "inline",
        title: "",
        body: [
          {
            type: "switch",
            option: "預覽",
            name: "preview",
            onChange: function (v: any) {
              setPreview(v);
            },
          },
          {
            type: "switch",
            option: "移動端",
            name: "mobile",
            onChange: function (v: any) {
              setMobile(v);
            },
          },
          {
            type: "button",
            label: "保存",
            level: "primary",
            onClick: function () {
              onSave();
            },
          },
          {
            type: "button",
            label: "退出",
            level: "danger",
            onClick: function () {
              // if (!window.confirm('確定退出?')) return;
              if (props.cancleGenHandler) props.cancleGenHandler();
            },
          },
        ],
      })}
      <Editor
        preview={preview}
        isMobile={mobile}
        onChange={onChange}
        value=https://www.cnblogs.com/plumliil/archive/2023/06/24/{schema as SchemaObject}
        theme={"antd"}
        onSave={onSave}
      />
    </>
  );
}

export default Amis;

在 amis 中提供了兩套組件樣式供我們選擇,分別是 cxd(云舍)和 antd(仿 Antd),我們可以通過設定Editor組件中 theme 屬性來進行主題的選擇,同時需要引入對應的組件樣式在以上代碼中,我們對Editor組件進行了二次封裝,暴露出了defaultPageConfig(進入編譯器默認頁面 JSON 配置)屬性和codeGenHandler(代碼生成保存方法),cancleGenHandler(退出頁面編輯器方法),pageChangeHandler(頁面改變方法)供外部使用

自定義組件

在 amis-editor 中使用的組件可以是我們的自定義組件.在撰寫自定義組件時特別需要主義的是它的 plugin 配置接下來以MyButton為例來進行自定義組件的介紹

首先來介紹以下組件結構

├─MyButton
  │  ├─comp.tsx # 組件本體
  │  ├─index.tsx # 整體匯出
  │  ├─plugin.tsx # 右側panel配置

在`comp.tsx`中主要進行組件的開發

import React from "react";
import type { Schema } from "amis/lib/types";
import { Button } from "antd";

const MyButtonRender = React.forwardRef((props: Schema, ref: any) => {
  // const props = this.props
  return (
    <Button
      {...props}
      ref={ref}
      type={props.level || "primary"}
      name={props.name}
    >
      {props.label}
    </Button>
  );
});

class MyButtonRender2 extends React.Component<any, any> {
  handleClick = (nativeEvent: React.MouseEvent<any>) => {
    const { dispatchEvent, onClick } = this.props;
    // const params = this.getResolvedEventParams();
    dispatchEvent(nativeEvent, {});
    onClick?.({});
  };

  handleMouseEnter = (e: React.MouseEvent<any>) => {
    const { dispatchEvent } = this.props;
    // const params = this.getResolvedEventParams();

    dispatchEvent(e, {});
  };

  handleMouseLeave = (e: React.MouseEvent<any>) => {
    const { dispatchEvent } = this.props;
    // const params = this.getResolvedEventParams();

    dispatchEvent(e, {});
  };

  render() {
    return (
      <MyButtonRender
        onClick={this.handleClick}
        onm ouseEnter={this.handleMouseEnter}
        onm ouseLeave={this.handleMouseLeave}
      >
        {this.props.label}2
      </MyButtonRender>
    );
  }
}

export default MyButtonRender2;

在上述代碼中MyButtonRender簡單的對Button組件進行了簡單的封裝,MyButtonRender2對 amis 中組件的事件進行了簡單的處理并暴露出去

在plugin.tsx中主要對MyButtonRender組件進行渲染器注冊以及對組件的 plugin 進行配置,注冊渲染器是為了將自定義組件拖入中間預覽區域是可以正常的顯示,這一操作與 amis 的作業原理有關(amis 的渲染程序是將 json 轉成對應的 React 組件，先通過 json 的 type 找到對應的 Component，然后把其他屬性作為 props 傳遞過去完成渲染，作業原理
)

在`plugin.tsx`中進行 panel 配置

import { Renderer } from "amis";
import MyButtonRender from "./comp";
import type { BaseEventContext } from "amis-editor-core";
import { BasePlugin } from "amis-editor-core";
import { getSchemaTpl } from "amis-editor-core";
import type { RendererPluginAction, RendererPluginEvent } from "amis-editor";
import { getEventControlConfig } from "amis-editor/lib/renderer/event-control/helper";

// 渲染器注冊
Renderer({
  type: "my-button",
  autoVar: true,
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
})(MyButtonRender);

export class MyButton extends BasePlugin {
  // 關聯渲染器名字
  rendererName = "my-button";
  $schema = "/schemas/ActionSchema.json";
  order = -400;
  // 組件名稱
  name = "MyButton";
  isBaseComponent = true;
  description =
    "用來展示一個按鈕，你可以配置不同的展示樣式，配置不同的點擊行為，";
  docLink = "/amis/zh-CN/components/button";
  tags = ["自定義"];
  icon = "fa fa-square";
  pluginIcon = "button-plugin";
  scaffold = {
    type: "my-button",
    label: "MyButton",
    wrapperBody: true,
  };
  previewSchema: any = {
    type: "my-button",
    label: "MyButton",
    wrapperBody: true,
  };

  panelTitle = "MyButton";

  // 事件定義
  events: RendererPluginEvent[] = [
    {
      eventName: "click",
      eventLabel: "點擊",
      description: "點擊時觸發",
      defaultShow: true,
      dataSchema: [
        {
          type: "object",
          properties: {
            nativeEvent: {
              type: "object",
              title: "滑鼠事件物件",
            },
          },
        },
      ],
    },
    {
      eventName: "mouseenter",
      eventLabel: "滑鼠移入",
      description: "滑鼠移入時觸發",
      dataSchema: [
        {
          type: "object",
          properties: {
            nativeEvent: {
              type: "object",
              title: "滑鼠事件物件",
            },
          },
        },
      ],
    },
    {
      eventName: "mouseleave",
      eventLabel: "滑鼠移出",
      description: "滑鼠移出時觸發",
      dataSchema: [
        {
          type: "object",
          properties: {
            nativeEvent: {
              type: "object",
              title: "滑鼠事件物件",
            },
          },
        },
      ],
    },
  ];

  // 動作定義
  actions: RendererPluginAction[] = [];

  panelJustify = true;

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  panelBodyCreator = (context: BaseEventContext) => {
    return getSchemaTpl("tabs", [
      {
        title: "屬性",
        body: [
          getSchemaTpl("label", {
            label: "按鈕名稱",
          }),
          {
            type: "input-text",
            label: "欄位名稱",
            name: "name",
          },
          {
            type: "select",
            label: "按鈕型別",
            name: "level",
            options: [
              {
                label: "默認",
                value: "primary",
              },
              {
                label: "危險",
                value: "danger",
              },
              {
                label: "警告",
                value: "warn",
              },
              {
                label: "成功",
                value: "success",
              },
              {
                label: "淺色",
                value: "default",
              },
            ],
            multiple: false,
            selectFirst: false,
          },
          {
            type: "input-text",
            label: "按鈕圖示",
            name: "icon",
            // 提示
            labelRemark: {
              icon: 'icon-close',
              trigger: ['hover'],
              className: 'Remark--warning',
              title: '提示',
              content: '圖示請從My Iconfont庫中選擇 部分圖示需要加icon-前綴 如close -> icon-close',
            // },
          },
        ],
      },
      {
        title: "樣式",
        body: [
          getSchemaTpl("buttonLevel", {
            label: "高亮樣式",
            name: "activeLevel",
            visibleOn: "data.active",
          }),

          getSchemaTpl("switch", {
            name: "block",
            label: "塊狀顯示",
          }),

          getSchemaTpl("size", {
            label: "尺寸",
          }),
        ],
      },
      {
        title: "事件",
        className: "p-none",
        body:
          !!context.schema.actionType ||
          ["submit", "reset"].includes(context.schema.type)
            ? [
                getSchemaTpl("eventControl", {
                  name: "onEvent",
                  ...getEventControlConfig(this.manager, context),
                }),
                // getOldActionSchema(this.manager, context)
              ]
            : [
                getSchemaTpl("eventControl", {
                  name: "onEvent",
                  ...getEventControlConfig(this.manager, context),
                }),
              ],
      },
    ]);
  };
}

當點選某個組件的時候，編輯器內部會觸發面板構建動作，每個插件都可以通過實作 buildEditorPanel 來插入右側面板，通常右側面板都是表單配置，使用 amis 配置就可以完成，所以推薦的做法是，直接在這個插件上面定義 panelBody 或者 panelBodyCreator 即可，

具體配置可以參考上述代碼,其中需要注意的是getSchemaTpl這一方法,該方法通過獲取預先通過setSchemaTpl設定的模板來進行渲染某些元素組件,一下部分原始碼可進行參考,tpl 部分全部原始碼可參考這里

export function getSchemaTpl(
  name: string,
  patch?: object,
  rendererSchema?: any
): any {
  const tpl = tpls[name] || {};
  let schema = null;

  if (typeof tpl === "function") {
    schema = tpl(patch, rendererSchema);
  } else {
    schema = patch
      ? {
          ...tpl,
          ...patch,
        }
      : tpl;
  }

  return schema;
}

export function setSchemaTpl(name: string, value: any) {
  tpls[name] = value;
}

在index.tsx中主要進行自定義組件插件的注冊以及匯出

import { registerEditorPlugin } from "amis-editor";
import { MyButton } from "./plugin";

registerEditorPlugin(MyButton);

其他

在拖拽組件生成頁面時,amis-editor 可選擇的組件有很多,如果我們想使用自己組建的同時忽略隱藏原有組件可以通過disabledRendererPlugin來對原生組件進行隱藏

import { registerEditorPlugin, BasePlugin } from "amis-editor";
import type {
  RendererEventContext,
  SubRendererInfo,
  BasicSubRenderInfo,
} from "amis-editor";

/**
 * 用于隱藏一些不需要的Editor組件
 * 備注: 如果不知道當前Editor中有哪些預置組件，可以在這里設定一個斷點，console.log 看一下 renderers，
 */

// 需要在組件面板中隱藏的組件
const disabledRenderers = [
  // 'flex',
  "crud2",
  "crud2",
  "crud2",
  // 'crud',
  // 'input-text',
  "input-email",
  "input-password",
  "input-url",
  // "button",
  "reset",
  "submit",
  "tpl",
  "grid",
  "container",
  // 'flex',
  // 'flex',
  "collapse-group",
  "panel",
  "tabs",
  // 'form',
  "service",
  "textarea",
  "input-number",
  // 'select',
  "nested-select",
  "chained-select",
  "dropdown-button",
  "checkboxes",
  "radios",
  "checkbox",
  "input-date",
  "input-date-range",
  "input-file",
  "input-image",
  "input-excel",
  "input-tree",
  "input-tag",
  "list-select",
  "button-group-select",
  "button-toolbar",
  "picker",
  "switch",
  "input-range",
  "input-rating",
  "input-city",
  "transfer",
  "tabs-transfer",
  "input-color",
  "condition-builder",
  "fieldset",
  "combo",
  "input-group",
  "input-table",
  "matrix-checkboxes",
  "input-rich-text",
  "diff-editor",
  "editor",
  "search-box",
  "input-kv",
  "input-repeat",
  "uuid",
  "location-picker",
  "input-sub-form",
  "hidden",
  "button-group",
  "nav",
  "anchor-nav",
  "tooltip-wrapper",
  "alert",
  "wizard",
  "table-view",
  "web-component",
  "audio",
  "video",
  "custom",
  "tasks",
  "each",
  "property",
  "iframe",
  "qrcode",
  "icon",
  "link",
  "list",
  "mapping",
  "avatar",
  "card",
  "card2",
  "cards",
  "table",
  "table2",
  "chart",
  "sparkline",
  "carousel",
  "image",
  "images",
  "date",
  "time",
  "datetime",
  "tag",
  "json",
  "progress",
  "status",
  "steps",
  "timeline",
  "divider",
  "code",
  "markdown",
  "collapse",
  "log",
  "input-array",
  "control",
  "input-datetime",
  "input-datetime-range",
  "formula",
  "group",
  "input-month",
  "input-month-range",
  "input-quarter",
  "input-quarter-range",
  "static",
  "input-time",
  "input-time-range",
  "tree-select",
  "input-year",
  "input-year-range",
  "breadcrumb",
  "custom",
  "hbox",
  "page",
  "pagination",
  "plain",
  "wrapper",
  "column-toggler",
];

export class ManagerEditorPlugin extends BasePlugin {
  order = 9999;
  buildSubRenderers(
    context: RendererEventContext,
    renderers: SubRendererInfo[]
  ): BasicSubRenderInfo | BasicSubRenderInfo[] | void {
    // 更新NPM自定義組件排序和分類
    // console.log(renderers);
    for (let index = 0, size = renderers.length; index < size; index++) {
      // 判斷是否需要隱藏 Editor預置組件
      const pluginRendererName = renderers[index].rendererName;
      if (
        pluginRendererName &&
        disabledRenderers.indexOf(pluginRendererName) > -1
      ) {
        renderers[index].disabledRendererPlugin = true; // 更新狀態
      }
    }
  }
}

registerEditorPlugin(ManagerEditorPlugin);

寫在最后

一個階段的結束伴隨著另一個階段的開始,在新的階段中會繼續學習繼續進步

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/555884.html

標籤：其他

上一篇：React SSG - 也寫個 Demo 吧

下一篇：返回列表

百度Amis+React低代碼實踐

背景