H5-Dooring
H5-Dooring是一款功能强大，开源免费的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以react为主， 后台采用nodejs开发。
技术栈
- React 前端主流框架(react,vue,angular)之一,更适合开发灵活度高且复杂的应用
- dva 主流的react应用状态管理工具，基于redux
- less css预编译语言，轻松编写结构化分明的css
- umi 基于react的前端集成解决方案
- antd 地球人都知道的react组件库
- axios 强大的前端请求库
- react-dnd 基于react的拖拽组件解决方案，具有优秀的设计哲学
- qrcode.react 基于react的二维码生成插件
- zarm 基于react的移动端ui库，轻松实现美观的H5应用
- koa 基于nodejs的上一代开发框架，轻松实现基于nodejs的后端开发
- @koa/router 基于koa2的服务端路由中间件
- ramda 优秀的函数式js工具库
需求分析
在思考需求分析之前我们先来看看Dooring的使用演示：
由上面的gif图我们可以分析出，可视化编辑器主要有以下几部分组成：
- 可拖拽的组件库 draggable components
- 盛放组件的画布 canvas
- 组件编辑器 FormEditor
- 头部工具栏 toolBar
可拖拽组件我们可以用社区比较火的react-dnd，react-draggable来实现，由于我们的画布是可拖拽可放大缩小的，所以这里需要对画布赋能，具体实现可参考下文。
其次就是H5编辑器部分，这部分是核心功能，后面我们会详细分析。还有就是预览，生成预览链接，保存json文件， 保存模版这些功能本质上是对我们json文件的操作，可是目前可视化搭建技术的常用手段之一。先来看看这些功能的演示：
基础准备
我们的h5页面可视化编辑器采用umi来作为脚手架工具.
umi是可扩展的企业级前端应用框架,以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求.
这样我们不会关注繁琐的工程配置细节, 可以直接在项目中使用 antd 和 less 这些方案, 并且集成了目前比较流行的css module, 可以方便我们在项目里对css进行模块化开发. umi创建项目的具体使用流程如下:
// 创建并进入工程目录
mkdir dooring && cd dooring
// 创建umi应用
yarn create @umijs/umi-app
// 安装依赖
yarn // 或者使用npm install
简单的三步走策略就能轻松搭建我们的项目工程, 是不是省去了很多麻烦? (在使用这些方式之前我们首先确保自己本地的node 版本是 10.13 或以上)
在项目创建完之后我们还需要安装可视化方面必备的第三方组件, 笔者调研社区精选组件之后采用了一下方案:
- react-dnd react拖拽组件
- react-color react颜色选择组件,用于H5编辑器的编辑颜色部分
- react-draggable 用于组件或者画布的拖拽移动
- react.qrcode 基于react的二维码生成组件, 能以react组件的方式生成二维码
以上组件在运行项目前大家可以自行安装.
已完成功能
-
- 组件库拖拽和显示
-
- 组件库动态编辑
-
- H5页面预览功能
-
- 保存H5页面配置文件
-
- 保存为模版
-
- 移动端跨端适配
-
- 媒体组件
正在完成功能
- 添加模版库模块
- 添加在线下载网站代码功能
- 丰富组件库组件，添加可视化组件
- 添加配置交互功能
- 组件细分和代码优化
- 添加typescript支持和单元测试
持续升级
正在升级1.1版本，敬请期待...
技术反馈和交流
微信：beautifulFront
