内容来源：2017年3月11日，百度资深研发工程师潘征在“HTML5梦工场 & 微软开发者沙龙第02期——HTML5营销开发”进行《移动端复杂运营页解决方案的探索和实践》演讲分享。IT大咖说（ID：itdakashuo）作为独家视频合作方，经主办方和讲者审阅授权发布。

阅读字数：2490 | 5分钟阅读

嘉宾演讲视频及PPT回顾，请点击链接：http://t.cn/Rd0Yacn

摘要

如何成为一名优秀的切图工程师？百度资深研发工程师潘征与大家分享自己的工作心得。

ROLE移动端酷炫运营页

2014年开始，我在我们部门负责移动端酷炫运营页面，也就是俗称的H5的研发工作。

这些酷炫运营页的共同特点是通过滑动翻页的形式来展示，带动画，用户可以在上面进行一些交互操作。

我切过的页面包括纯静态2D展示类页面、对接动态数据的页面和和对接动态数据 + 3D 展示的页面。

纯静态页面是最古老的 H5，主要在于通过酷炫动效吸引眼球。

对接数据的H5 是通过对接一些后段的实时数据配合前端动效展示来实现更好的运营效果，如根据不同用户来展现与用户自身相关的数据。

对接数据 + 3D是3D 模型和动态数据整合展示的一类实现形式，通过将UE 设计好的3D 模型导入到页面并在3D 模型上用js代码控制动态数据的关联展现来实现。

百度H5平台

上面的三个例子都是在这个平台的内部版上完成的。

如果你是大公司的成员，你可以通过今天的分享了解如何设计以及在内部推广类似的平台；如果你是小公司的成员，不妨考虑直接使用我们公司平台或吸取一些通用化的经验，以减轻工作的压力。

制作一个H5运营页

可以把页面拆分为三个部分。

一个是通用部分，也就是约定俗成的交互逻辑。

另一个是个性化部分。个性化部分之所以区别于定制化，是因为它是一个可配置的选项。

而定制化部分则是一个完全和其它市面上的东西都不一样的脑洞。

通用部分

翻页器

翻页器实现了在H5中可以通过手指滑动来一页一页查看的逻辑。

在我们平台中使用的是百度内部其它部门的另一个开源项目iSlider.js。

这个主要实现的就是翻页器支持添加任意多的页面，支持滑动翻页，以及页面进入（离开）时播放页内的动画。

一个常规H5页面的基本结构如图可见，首先有很多不同页面，当真正发布出一个页面的时候，通过手指滑动去一页页查看。页面进入时，播放下方的动画。

在我们平台中使用了一个时间线的模式来管理动画的次序。实际上这种类似的动画在CSS里面对于配置项已经有了很好的总结。

在CSS中能够配置的项有动画时长、动画延时、动画重复次数以及动画播放的方向。

在我们的平台中也是通过可视化的方式来对这几个CSS的项进行配置，然后以内联形式写入style。如果是组件内部的逻辑动画，实现的方式就是当页面进入的时候调用组件暴露的start函数。

还原设计稿布局（切图）

制作H5的另一个要点就是还原设计稿布局。在这个切图过程中，需要做的是处理图层，也就是把设计师最喜欢用的蒙板、投影之类的效果栅格化以及把多个图层合并。这个过程相当于把工作外包给UE或者PM来实现。

然后把处理好的图层导入平台，同时还原每个元素的位置。第三个就是适配不同屏幕的分辨率。

PSD导入、自动切图

在我们平台上实现了PSD导入和自动切图的逻辑。就是把一个PSD文件导入到平台里面，PSD文件在平台中被打成了单个独立的元素。可以对这些单个独立的元素添加动画、事件以及其它行为。

实现原理

通过imagemagik这个开源库将PSD文件分层打散成png文件，上传到服务器。然后通过psd.js获取树结构的PSD图层信息。最后将各个图层的位置、尺寸、透明度（包括文本组件）组合，得到psd转换后的json。

个性化部分

个性化模式包括了固定模式和灵活配置。

动画个性化

动画个性化主要是动画方案、动画时长、动画次序、重复次数、播放方式。

动画方案结合了其它一些开源库不断把新出现的、好用的动画方案来整合到平台上，实现了最大程度的复用。

动画次序是用可拖拽的时间线来控制动画的前后次序。

播放方式在CSS里实现了顺序播放和逆序播放。

事件机制

事件机制目前实现了一些比较简单的功能，例如当点击时控制一个组件的显示和隐藏。这个现在还不是十分完善，不过对于我们内部来说，PM能想到的需求都已经整合到这个平台里了。

这个事件在我们平台目前分为控制类和链接类。控制类就是当点击某个选中的组件时，另一个会显示或隐藏。如果它是一个video或音频类型，还会有播放暂停的行为。

链接类则是当点击某个组件的时候，调起打电话、发邮件、链接跳转以及其它一些直接执行的行为。

计数器的设计

计数器中封装了一些可执行的行为，在我们平台中实现了一个计数器的组件，然后当计数器被添加到编辑界面中的时候，它可配置的行为就包括增减数值、计算分数、清零等一些计数相关的行为。

通过这样的机制来实现一些简单的、需要逻辑控制的H5。

定制化部分

用js脚本实现定制化功能

我们平台里的js脚本目前是支持zepto、style和script。可以通过简单的接口获取页面元素，直接操作DOM。

前端服务化在百度内部的实践目前在我们内部通过拖拽来生成页面的平台除了H5之外，还有用于生成后台管理系统的AMIS、用于生成数据报表的ShowX以及用于生成数据流功能页面的APage。

总结

总的来说，前端服务化的整个大愿景就是告别重复劳动，创造更多价值。

我个人的目标是尽可能把重复的劳动提取出来，从而free出时间来进行更深入的研究。

目前百度前端服务化系列平台已经归入百度云计算事业部，并将作为商业产品对外服务，在服务内部的同时，完成了由内而外的孵化转型。

我今天的分享就到这里，感谢聆听！