想必你一定使用过易企秀或百度H5等微场景生成工具制作过炫酷的h5页面，除了感叹其神奇之处有没有想过其实现方式呢？本文从零开始实现一个H5编辑器项目完整设计思路和主要实现步骤，并开源前后端代码。有需要的小伙伴可以按照该教程从零实现自己的H5编辑器。（实现起来并不复杂，该教程只是提供思路，并非最佳实践）
Github: https://github.com/huangwei9527/quark-h5
演示地址：http://47.104.247.183:4000/
演示帐号密码均admin
编辑器预览：
前端： vue: 模块化开发少不了angular，react，vue三选一，这里选择了vue。 vuex: 状态管理 sass: css预编译器。 element-ui：不造轮子，有现成的优秀的vue组件库当然要用起来。没有的自己再封装一些就可以了。 loadsh：工具类
服务端： koa：后端语言采用nodejs，koa文档和学习资料也比较多，express原班人马打造，这个正合适。 mongodb：一个基于分布式文件存储的数据库，比较灵活。
阅读前准备1、了解vue技术栈开发 2、了解koa 3、了解mongodb
工程搭建基于vue-cli3环境搭建
- 如何规划好我们项目的目录结构？首先我们需要有一个目录作为前端项目，一个目录作为后端项目。所以我们要对vue-cli 生成的项目结构做一下改造：
···
·
|-- client // 原 src 目录，改成 client 用作前端项目目录
|-- server // 新增 server 用于服务端项目目录
|-- engine-template // 新增 engine-template 用于页面模板库目录
|-- docs // 新增 docs 预留编写项目文档目录
·
···
复制代码
- 这样的话 我们需要再把我们webpack配置文件稍作一下调整，首先是把原先的编译指向src的目录改成client，其次为了 npm run build 能正常编译 client 我们也需要为 babel-loader 再增加一个编译目录： 根目录新增vue.config.js,目的是为了改造项目入口,改为:client/main.js module.exports = { pages: { index: { entry: "client/main.js" } } } 复制代码 babel-loader能正常编译 client, engine-template目录， 在vue.config.js新增如下配置 // 扩展 webpack 配置 chainWebpack: config => { config.module .rule('js') .include.add(/engine-template/).end() .include.add(/client/).end() .use('babel') .loader('babel-loader') .tap(options => { // 修改它的选项... return options }) } 复制代码
这样我们搭建起来一个简易的项目目录结构。
工程目录结构|-- client --------前端项目界面代码
|--common --------前端界面对应静态资源
|--components --------组件
|--config --------配置文件
|--eventBus --------eventBus
|--filter --------过滤器
|--mixins --------混入
|--pages --------页面
|--router --------路由配置
|--store --------vuex状态管理
|--service --------axios封装
|--App.vue --------App
|--main.js --------入口文件
|--permission.js --------权限控制
|-- server --------服务器端项目代码
|--confog --------数据库链接相关
|--middleware --------中间件
|--models --------Schema和Model
|--routes --------路由
|--views --------ejs页面模板
|--public --------静态资源
|--utils --------工具方法
|--app.js --------服务端入口
|-- common --------前后端公用代码模块（如加解密）
|-- engine-template --------页面模板引擎，使用webpack打包成js提供页面引用
|-- docs --------预留编写项目文档目录
|-- config.JSON --------配置文件
复制代码前端编辑器实现
编辑器的实现思路是：编辑器生成页面JSON数据，服务端负责存取JSON数据，渲染时从服务端取数据JSON交给前端模板处理。
确认了实现逻辑，数据结构也是非常重要的，把一个页面定义成一个JSON数据，数据结构大致是这样的：
页面工程数据接口
{
title: '', // 标题
description: '', //描述
coverImage: '', // 封面
auther: '', // 作者
script: '', // 页面插入脚本
width: 375, // 高
height: 644, // 宽
pages: [], // 多页页面
shareConfig: {}, // 微信分享配置
pageMode: 0, // 渲染模式，用于扩展多种模式渲染，翻页h5/长页/PC页面等等
}
复制代码
多页页面pages其中一页数据结构：
{
name: '',
elements: [], // 页面元素
commonStyle: {
backgroundColor: '',
backgroundImage: '',
backgroundSize: 'cover'
},
config: {}
}
复制代码
元素数据结构：
{
elName: '', // 组件名
animations: [], // 图层的动画,可以支持多个动画
commonStyle: {}, // 公共样式，默认样式
events: [], // 事件配置数据，每个图层可以添加多个事件
propsValue: {}, // 属性参数
value: '', // 绑定值
valueType: 'String', // 值类型
isForm: false // 是否是表单控件，用于表单提交时获取表单数据
}
复制代码编辑器整体设计
- 一个组件选择区，提供使用者选择需要的组件
- 一个编辑预览画板，提供使用者拖拽排序页面预览的功能
- 一个组件属性编辑，提供给使用者编辑组件内部props、公共样式和动画的功能 如图：
用户在左侧组件区域选择组件添加到页面上，编辑区域通过动态组件特性渲染出每个元素组件。
最后，点击保存将页面数据提交到数据库。至于数据怎么转成静态 HTML方法有很多。还有页面数据我们全部都有，我们可以做页面的预渲染，骨架屏，ssr，编译时优化等等。而且我们也可以对产出的活动页做数据分析~有很多想象的空间。
核心代码编辑器核心代码，基于 Vue 动态组件特性实现：
