低代码设计器的实现原理

什么是低代码设计器

将组件以可视化交互方式编排成想要的布局和配置，并将配置结果以某种方式渲染出来。

低代码设计器的实现原理

• 关键技术方案：用来搭建的组件需要复用普通的前端组件，且配置面板的内容可以定制。
• 关键技术方案：实现可视化编排，编排结果能还原成页面。
• 一般需求：设计器整体UI框架、设计前面板机制、拖拽机制、设置面板配置和显示机制、画布机制、快捷键机制、产物直接渲染能力、产物转成代码的能力等。

关键技术方案：用来搭建的组件需要复用普通的前端组件，且配置面板的内容可以定制

组件的分类：

基础组件、业务组件、自定义组件

每个组件的设置面板配置：

1. 配置项是配什么：

• 映射到源码如何使用组件开发：

• • 组件属性(props)
  • 组件回调函数(callback)

• 设置面板布局/显示相关：

• • 以什么UI交互形式(下拉/输入/…)给属性/回调赋值
  • 对设置面板进行调整,有些不需要展示的可以不展示(分组、是否显示某属性)

1. 以什么格式：

• JSON

举例：

• 组件就是指物料。
• JSON 是有规范的：写的人和用的人都需要知道。（《物理描述规范》）
• Setter-设置器：对组件的设置，例如不同组件样式等。给某一种值类型的prop去赋值的ui组件。每个prop是什么类型的可以用什么ui组件去赋值。例如有输入框、开关、选择框等

关键技术方案：实现可视化编排，编排结果能还原成页面。

编排：如何推拽，如何放到合适的位置，如何存起来、还原等。

• 知识点：Drag and Drop API，一组 HTML 原生 API，用来将一个可拖拽(draggable)的元素拖到一个可以被放置(droppable)的位置。

• 拖拽是拖拽对组件的描述，画布是有一个结构描述，又称数据模型。画布的展示是对数据模型的反馈。数据模型的变动可以带来画布展示的变动。

• 当拖动发生时：

• • \1.组件被选中并移动，记录了一个draggable的元素。(例如 componentName:’Button’)
  • \2. 移动到画布区域后，拖拽引擎根据鼠标位置寻找最适合的插入位置。
  • \3. 鼠标松开后，将 {componentName:’Button’}插入到画布的模型中，形成新的模型，并具象的将UI展示出来。

• 编排和渲染过程的基本原理：

• • 设计过程：n * (组件+组件的配置) + 特定的顺序和层级结构 = 模型描述(JSON)
  • 渲染过程：模型描述(JSON) ——> 1.解析 2.加载依赖组件 3. 按顺序和层级渲染组件 ——> 还原页面布局