携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
概念
低代码平台是一款图形化、拖拉拽方式快速实现应用搭建、支持用少量代码（0代码）扩展实现个性化需求的技术工具平台。
代码仓库地址
这是我写的低代码平台示例源码仓库
github：github.com/iamwhj/mobi…
组成
前端配置是低代码平台的主要组成部分之一，此外还有后端和组件物料等。
前端配置实现
前端配置这块的主要目的就是生成一分活动页面的描述数据，也就是常说的schema, 然后再通过这份schema到目标环境还原活动页面，有点像mvvm框架vdom的意思，先用vdom描述dom信息，再将vdom按照解析器生成 real dom。
本篇主要目的是学习，实现一个简单、拥有核心功能的低代码平台即可，如有不全后续可自行拓展。
主要提供核心思路伪代码，完整代码请前往github仓库。
- 拖拽功能
拖拽功能直接使用H5的 draggable 这套API
作用于被拖拽元素：
ondragstart，当拖拽元素开始被拖拽时触发ondrag，dragstart和dragover之间触发ondragend，当拖拽完成后触发
作用于目标元素:
ondragenter，拖拽元素进入目标元素时触发ondragover，拖拽元素在目标元素上移动时触发ondrap，被拖拽元素在目标元素上松开鼠标时触发
ondragover方法中要执行preventDefault()，否则ondrap不会被触发。
在Vue中，被拖拽元素和目标元素的写法是：
// 被拖拽元素
draggable="true"
@dragstart="dragStart($event, item)"
// 目标元素
@dragover.prevent
@drop="componentDrap"
- Schema
schema的设计一开始肯定是想不全的，先设计一个能实现当前功能的，后面出现新功能在扩展。
// 整个活动的schema
{
components: [],
detail: { name: '', title: '活动页', date: [], },
mark: 'activity-' + Date.now()
};
// 单个组件的schema
{
name, // 组件注册名称
fullName, // 组件的展示名称
mark: name + '-' + Date.now(),
detail: {},
style: {},
};
我们拖拽组件配置活动页面的过程，schema的实际操作就是生成组件的schema，然后存入活动schema的components里。
- 渲染
动态渲染实际上使用的是Vue里的动态组件的方式
<component :is="name"></component>
只要将组件都全局注册之后，name 里放入对应的组件名称，组件就能渲染。
总结
低代码平台项目体量一般都会比较大，功能点和细节很多，费时和费力，但功能并没有复杂到无法实现，其实只要将核心实现了，其他功能只需要顺着核心去拓展，多半能下手。
