本文介绍了滴滴出行快车事业部开发的h5在线制作发布平台dpub，旨在解决现有平台复杂的操作界面和功能冗余的问题。自去年12月上线以来，该平台已经创建了1600多个活动页面，并获得了用户的积极反馈。技术架构包括后端的express和前端的react，支持页面编辑和数据统计等功能。

1. H5在线制作发布平台Dpub
滴滴出行快车事业部 董宏平

2. 为什么要造轮子？
因为，外面的轮子：
功能牛逼但界面复杂，对于没有技术背景的运营同学来说上手困难
（事实上绝大部分时候我们不需要那么多牛逼功能）
发布和分享和数据统计需要人工介入，没有完全抛开fe/op的支持
（上线要走流程走审批，需要分享和统计还得人工加脚本建目录）
不能根据业务定制，响应特殊需求
（90%的活动页面都是单页长图）

3. 编辑器界面（木有UE支持）

4. 平台成果
自去年12月上线以来
创建活动页面数1600+
创造访问pv 2亿+，uv 1亿4千万
得到了用户的广泛好评

5. 技术选择（不敢喊选型）
后端：express（轻量灵活）
前端：react（信react得永生，不过确实挺适合这个业务场景的）

6. 系统结构（也不敢喊架构）
登录
项目
列表
权限
管理
编辑
器
项目
预览
数据
统计
Router Mysql
数据处理
页面构建
数据配送
CDN集群
fs
giflog
hadoop
前端
服务端
预览
发布
下载

7. 数据复用，组件复用（主要能讲的点）
页面组件
编辑器 构建器
数据
Props
renderToStaticMarkup()render()
静态HTML串绑定了编辑器事件的react组件

8. 数据结构
globalData
pagesData
pageData
pageData
pageData
……
background
foreground
component
component
component
……
type
width
height
left
top
src
href
animation

9. 编辑器结构及数据流
[... …]
data
[... …]Page
Component
ForegroundBackground
Global
（图片，文字，热区，视频，自定义）
（背景音乐）
编辑器
缩略图
预览
发布
拖动
缩放
复制
删除
修改层叠顺序
编辑内容
设置动画
（背景颜色，背景图片）
（全局事件）

10. 数据处理及页面构建
页面数据
位置/尺寸转换
资源选取
图像压缩/切割
JS/CSS合并
React构建器 页面模版
翻页动画
分享设置
数据统计
图像预加载
项目配置
成品页面

11. THANK
YOU
北京嘀嘀无限科技发展有限公司
北京市海淀区东北旺路8号院尚东·数字山谷B1号楼