移动端复杂运营页解决方案的探索和实践

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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