低代码简单的实践

112 阅读3分钟

vue3 + ts

无标题.png

协议是低代码的基石

1、协议

   协议(其实就是约束),它主要包括物料创建协议、物料属性协议、动作协议、动画协议等等。这个东西贯穿低代码的整条链路。一个json驱动组件渲染,组件维护、新增、解析等都需要围绕这个json:

  • 相应的协议扩展物料
  • 把左侧一个物料拖到中间画布区通过协议来通信和解析
  • 选中画布区域的组件时,通过右边设置面板进行属性设置时,也需要通过协议来通信和解析
  • ...

2、物料区 (我这里使用的npm包,将物料区作为一个组件库发布至npm)

左侧的物料区,这是开始

以下是物料创建的协议(约定)

/**
 * @description 单个组件注册规则
 */
export type VisualEditorComponent = {
  maximum: number;
  /** 组件name */
  key: string;
  /** 组件所属模块名称 */
  moduleName: keyof ComponentModules;
  /** 组件唯一id */
  _vid?: string;
  /** 组件中文名称 */
  label: string;
  /** 组件预览函数 */
  preview: () => JSX.Element;
  /** 组件渲染函数 */
  render: (
    data: {
      props: any;
      model: any;
      styles: CSSProperties;
      block: VisualEditorBlockData;
      custom: Record<string, any>;
      formVid?: string;
    },
    context?: any,
  ) => () => JSX.Element;
  /** 组件是否可以被拖拽 */
  draggable?: boolean;
  /** 是否显示组件的样式配置项 */
  showStyleConfig?: boolean;
  /** 组件属性 */
  props?: Record<string, VisualEditorProps>;
  /** 动画集 */
  animations?: Animation[];
  /** 组件事件集合 */
  events?: { label: string; value: string }[] | string[];
  /** 组件样式 */
  styles?: CSSProperties;
};

以下是物料属性的协议

export enum VisualEditorPropsType {
  /** 输入框 */
  input = 'input',
  /** 数字输入框 */
  inputNumber = 'InputNumber',
  /** 颜色选择器 */
  color = 'color',
  /** 下拉选择器 */
  select = 'select',
  /** 单选组 */
  radioGroup = 'radioGroup',
  /** 表格 */
  table = 'table',
  /** 开关 */
  switch = 'switch',
  /** 可拖拽项 */
  crossSortable = 'CrossSortable',
  /** Upload 上传 */
  upload = 'Upload',
}

物料区本身很简单:

  • 组件的分类:

    • 容器组件(这类组件主要用来协助布局和嵌套)
    • 基本组件(常见的有图片、文本、输入框、视频等)
    • 集成度稍高一点的组件(表格、表单、图表、自定义组件、业务组件)
  • 如何渲染组件:

    • vue3+JSX   defineComponent  创建组件   setup   返回jsx
  name: 'CompRender',
  props: {
    element: {
      type: Object as PropType<VisualEditorBlockData>,
      default: () => ({}),
    },
  },
  setup(props) {
    return componentMap[props.element.componentKey].render({
      styles: props.element.styles || {},
      props: props.element.props || {},
      model: {},
      block: props.element,
      custom: {},
    });
  },
});

3、画布区(渲染器)

 

  • 流式布局:组件从左到右从上往下自然排列,就是单纯的从上往下平铺开来(一般用做移动端项目)
  • 栅格画布:类似前端组件库中的栅格布局,一行 24 列,一行 12 列这样划分填充,看起来比较规范也比较整齐(一般用做PC端管理后端)

 

4、属性编辑区(设置器)

这个区域通常会支持三种基本的设置:props && 样式 && 事件。一般来说我们的操作是这样的:

  • 点选画布区的某个组件
  • 触发设置某个全局变量为当前组件  currentBlock (组件属性)
  • 右侧属性面板就会根据 currentBlock(组件属性),这个 currentBlock 其实就是一开始在物料协议里面约定的 props,但是和 props 可能有点小区别,需要自己手动写个函数转一下;
  • 用户自定义的交互,参考物料属性的约定,自定义约束类型。

 

其他问题

模块之间如何进行解耦呢:

  • 通过全局数据来共享,而不是通过直接相互传递数据(vuex、provide&inject 等)
  • 独立项目,开发起来自然就会强迫自己解耦了
  • 好处:重构或者替换某一个模块时,可以直接替换单个模块而不影响其他地方的逻辑

如何做版本控制:

  • 前端控制:

    •  NPM包本身就是增量发布,版本号对应
    • CMS应该一直保持最新版本,无需做版本控制
    • H5可以根据版本号将静态资源打包至对应版本目录,生成对应版本的H5路由,通过访问对应路由的静态文件来实现

总结

  • 低代码重要的是方向(应当是单纯的、纯粹的)
  • 低代码基石是:协议(约定)
  • 低代码所有的操作都是在操作一个 json(组件属性props、组件动作events、组件动画animations等等)