需求

概念

低代码（Low-Code）是一种快速设计和开发软件应用程序并且手动编码最少的方法。它可以为技术人员提供更快，更可靠的价值。通过在图形界面中使用可视化建模来组装和配置应用程序，开发人员可以跳过所有基础架构让开发速度提升起来。

简单的来说，就是在低代码平台上，用户可以通过拖拽的方式，将组件在编辑器中自由排版，设置相关属性即可保存和预览，完成页面的设计。

个人感觉关键技术在于拖拽功能、可视化的展示、组件操作和预览发布。这几项我们组两名同学都不是很清楚哈哈，都得学习一下。

技术实现

布局

layout三栏：组件库、预览视图、操作台

可视化设计

看到一篇帖子，到时候可以学习LowCode - 可视化中的规则组件设计 - 掘金

拖拽

学习思路low-code平台大屏篇(实现思路) - 掘金

拖拽功能实现：鼠标事件

拖拽时，有一个组件的缩略图，放入编辑器中时，有对应的颜色高亮提示位置

识别编辑器中各组件，拖拽时可以放入不同的图层上

路由

根据需求，使用react-router配置路由

撤销重做

并会记录每次操作的数据，使用record 函数记录，便于完成撤销重做功能。低代码(low-code)简单实践 - 掘金

const undoDesign=()=>{
  const {index,data}=undo();
  setSchema(data);
  if(index===0){
    setDisableUndo(true);
  }
  setDisableRedo(false);
};

const redoDesign=()=>{
  const {index,length,data}=redo();
  setSchema(data);
  if(index===length-1){
    setDisableRedo(true);
  }
  setDisableUndo(false);
};

页面预览与发布

项目本地保存

用户构建项目后，可以存于本地，方便后续的预览和使用。

问题：本地怎么存储，存储后怎么调用

预览

新建标签页

当前标签页覆盖在最上

组件模块

预计实现四个组件：

Button

图片

文本

视频

计划

先完成基础功能

实现拖拽和基础功能，基于h5的api

技术栈：react + ts

Low-Code项目思路整理 | 青训营笔记

需求

概念