前言
2015年10月左右，我接到了开发h5移动页面编辑器的任务。 开发的目的是为了释放公司内部制作此类网页所投入的人力，并解决使用外部h5编辑器涉及的版权问题。
因此，需要研发一款与市面上现有的h5编辑器产品具有类似功能，并结合公司账号权限和特殊需求的产品。
什么是h5页面编辑器？ h5页面编辑器是使用HTML5开发的页面编辑器，集成了各种页面元素的编辑样式和动画。 一般根据最终产品的适用平台分为PC端和移动端两种。
02
现状
在开发移动h5页面编辑器之前，我们首先了解一下移动网页的现状。
移动网页的现状
我们知道，HTML5自诞生以来，凭借其优秀的体验和开放强大的功能，在移动端得到了快速的发展。 特别是随着微信等社交工具的诞生以及苹果的大力支持，HTML5在信息管理、游戏、广告等领域取得了长足的发展。 这就是为什么我们要开发这样一个软件。
手机网页的分类
从手机网页的功能来看，我将其分为以下几类：广告展示类、游戏活动类、新闻信息类、平台应用类。 下面对这些类别进行一一描述。
广告展示
显示网页是最常见的。 一般用作企业官网、活动网站的展示网页。 体验形式多为上下（或左右）滑动翻页或一屏到底。 一般来说，会添加各种元素。 各种CSS3动画。
PS：其实这种类型和PPT很相似，所以私下里我也喜欢称其为ppt类型，而我们开发的编辑器目前就是这种类型的主要编辑对象。
游戏和活动
活动网页具有最大的扩展空间，各广告公司的专家们还在进一步发挥想象力，为这一类别添砖加瓦。 一般来说，最好在网页中嵌入一个HTML5小游戏，比如摇晃、躲避球、抓金币、踩白块等，并在通过游戏后获得一定的奖品，以增加活动的参与度。 花费。
更多炫酷案例请参考：
新闻资讯
信息网页类似于魅族、阿里巴巴、腾讯等官方网站的手机版，或者以新闻列表或图片信息的形式展示各种信息。
平台应用类
某平台手机版、某系统手机版就属于此类网站。 它们的功能也与PC端一致。 由于操作比较复杂，在手机上出现的几率不是很高。 更多 在PC和pad上更受欢迎。
概念
本文旨在对广告展示的h5编辑器进行结构描述，希望能给大家带来一些思维拓展和方向性指导。
03
实现原理及需求分析
实现原理
从实现原理来看，实际上需要解决以下问题：
哪些元素需要可编辑？
文本、图片、形状、音频、链接等游戏素材，更多可编辑元素将在第二阶段之后逐渐添加。
元素是如何编辑的？
通过点击或上传添加h5游戏开发框架，通过拖动调整大小和位置，通过编辑面板修改样式。 同时，不同的元素会有不同的编辑面板。 例如，文本类型可以修改字体、颜色、大小、对齐方式等，而图像类型可以进行缩放、裁剪、圆角、阴影等调整。
如何编辑和预览动画效果？
动画效果会模仿其他产品并合并到编辑面板中。 点击图标即可更换不同的入口动画。 改变时，会触发该动画实际效果的预览。 另外，您还可以点击独立预览按钮来预览编辑后的页面。
如何实现与后台的数据交互？
page和in-page元素组合成一个json对象，将音频信息传递到后台数据接口，读取时也是同样的处理方式。
如何将数据转化为移动网页？
通过js、php解析，将页面元素一一解析为html、css，利用滑块插件上下或左右翻页。
如何实现与手机网页的兼容？
目前市场上手动开发此类网页的兼容方式一般有两种，即固定尺寸兼容和百分比兼容。 我把它们称为主动兼容性和被动兼容性。 区别主要在于元素css大小的计算方法和viewport的编写方式。h5游戏开发框架，网上已经有很多此类文章了，这里不再赘述。 在这个项目中，最终的选择是将两者结合起来。 其原因将在后续文章中提及。
通过回答以上问题，我们应该对这位小编有了一个初步的了解。 下面我们将以excel表格的形式列出整理好的需求。
需求分析
这是需求分析表的简化版本。 完整版太复杂，所以我不会发布它，但我可以给你看一个截图。
当然，并不是列表中的所有功能都是项目一期开发的，比如提现、zip包发布等。
因此，我根据完成功能的难度，在需求中标注了每个功能的技术难度，并区分了每个阶段的开发目标。 了解了编辑器的实现原理和需求之后，我们来给大家展示一下它的整体框架设计。
04
框架设计与实现
后端框架
分享方面，内置微信分享代码，支持使用项目标题、描述、封面等自定义分享文案。
登录方面，集成公司内部登录系统，账户无缝对接。
前端框架
前端也采用了比较轻量化的框架结构。 目前，由于没有混合动力的需求，所以这块还没有集成。
05
总结
一期工程已开发完成，基本功能已完成。 目前正在研究react修订的可行性，并已取得初步结果。
由于篇幅限制，本文不涉及适配策略、代码框架、知识技能、优化策略、打包策略等UI界面，这些内容将在下一篇文章中详细介绍。
以下是小编的初步设计方案，是我自己设计的~
由于该设计借鉴了许多其他成熟产品，对这方面接触较多的同学可能会觉得这个界面很熟悉^_^。
PS：该项目目前定位为内部使用。
h5编辑器的下一阶段
目前现阶段的编辑器功能还很少。 在下一阶段开始之前，我们会大致规划一下可能增加的功能：
基于react的修改
React的诞生给这类需要开发undo功能和双向绑定功能的软件带来了福音。 一旦上手，开发难度就会大大降低。 依托react的diff算法的策略，相信可以在性能方面给这个项目带来相当大的提升。
我希望能够在今年内将使用react修改后的项目带给大家。
