內(nèi)容來源：2017年3月11日，百度資深研發(fā)工程師潘征在“HTML5夢工場 & 微軟開發(fā)者沙龍第02期——HTML5營銷開發(fā)”進(jìn)行《移動(dòng)端復(fù)雜運(yùn)營頁解決方案的探索和實(shí)踐》演講分享。IT大咖說（ID：itdakashuo）作為獨(dú)家視頻合作方，經(jīng)主辦方和講者審閱授權(quán)發(fā)布。
閱讀字?jǐn)?shù)：2490?| 5分鐘閱讀
嘉賓演講視頻及PPT回顧，請點(diǎn)擊鏈接：http://t.cn/Rd0Yacn
摘要
如何成為一名優(yōu)秀的切圖工程師？百度資深研發(fā)工程師潘征與大家分享自己的工作心得。
ROLE移動(dòng)端酷炫運(yùn)營頁
2014年開始，我在我們部門負(fù)責(zé)移動(dòng)端酷炫運(yùn)營頁面，也就是俗稱的H5的研發(fā)工作。
這些酷炫運(yùn)營頁的共同特點(diǎn)是通過滑動(dòng)翻頁的形式來展示，帶動(dòng)畫，用戶可以在上面進(jìn)行一些交互操作。
我切過的頁面包括純靜態(tài)2D展示類頁面、對接動(dòng)態(tài)數(shù)據(jù)的頁面和和對接動(dòng)態(tài)數(shù)據(jù) + 3D 展示的頁面。
純靜態(tài)頁面是最古老的 H5，主要在于通過酷炫動(dòng)效吸引眼球。
對接數(shù)據(jù)的H5 是通過對接一些后段的實(shí)時(shí)數(shù)據(jù)配合前端動(dòng)效展示來實(shí)現(xiàn)更好的運(yùn)營效果，如根據(jù)不同用戶來展現(xiàn)與用戶自身相關(guān)的數(shù)據(jù)。
對接數(shù)據(jù) + 3D是3D 模型和動(dòng)態(tài)數(shù)據(jù)整合展示的一類實(shí)現(xiàn)形式，通過將UE 設(shè)計(jì)好的3D 模型導(dǎo)入到頁面并在3D 模型上用js代碼控制動(dòng)態(tài)數(shù)據(jù)的關(guān)聯(lián)展現(xiàn)來實(shí)現(xiàn)。
百度H5平臺
上面的三個(gè)例子都是在這個(gè)平臺的內(nèi)部版上完成的。
如果你是大公司的成員，你可以通過今天的分享了解如何設(shè)計(jì)以及在內(nèi)部推廣類似的平臺；如果你是小公司的成員，不妨考慮直接使用我們公司平臺或吸取一些通用化的經(jīng)驗(yàn)，以減輕工作的壓力。
制作一個(gè)H5運(yùn)營頁
可以把頁面拆分為三個(gè)部分。
一個(gè)是通用部分，也就是約定俗成的交互邏輯。
另一個(gè)是個(gè)性化部分。個(gè)性化部分之所以區(qū)別于定制化，是因?yàn)樗且粋€(gè)可配置的選項(xiàng)。
而定制化部分則是一個(gè)完全和其它市面上的東西都不一樣的腦洞。
通用部分
翻頁器
翻頁器實(shí)現(xiàn)了在H5中可以通過手指滑動(dòng)來一頁一頁查看的邏輯。
在我們平臺中使用的是百度內(nèi)部其它部門的另一個(gè)開源項(xiàng)目iSlider.js。
這個(gè)主要實(shí)現(xiàn)的就是翻頁器支持添加任意多的頁面，支持滑動(dòng)翻頁，以及頁面進(jìn)入（離開）時(shí)播放頁內(nèi)的動(dòng)畫。
一個(gè)常規(guī)H5頁面的基本結(jié)構(gòu)如圖可見，首先有很多不同頁面，當(dāng)真正發(fā)布出一個(gè)頁面的時(shí)候，通過手指滑動(dòng)去一頁頁查看。頁面進(jìn)入時(shí)，播放下方的動(dòng)畫。
在我們平臺中使用了一個(gè)時(shí)間線的模式來管理動(dòng)畫的次序。實(shí)際上這種類似的動(dòng)畫在CSS里面對于配置項(xiàng)已經(jīng)有了很好的總結(jié)。
在CSS中能夠配置的項(xiàng)有動(dòng)畫時(shí)長、動(dòng)畫延時(shí)、動(dòng)畫重復(fù)次數(shù)以及動(dòng)畫播放的方向。
在我們的平臺中也是通過可視化的方式來對這幾個(gè)CSS的項(xiàng)進(jìn)行配置，然后以內(nèi)聯(lián)形式寫入style。如果是組件內(nèi)部的邏輯動(dòng)畫，實(shí)現(xiàn)的方式就是當(dāng)頁面進(jìn)入的時(shí)候調(diào)用組件暴露的start函數(shù)。
還原設(shè)計(jì)稿布局（切圖）
制作H5的另一個(gè)要點(diǎn)就是還原設(shè)計(jì)稿布局。在這個(gè)切圖過程中，需要做的是處理圖層，也就是把設(shè)計(jì)師最喜歡用的蒙板、投影之類的效果柵格化以及把多個(gè)圖層合并。這個(gè)過程相當(dāng)于把工作外包給UE或者PM來實(shí)現(xiàn)。
然后把處理好的圖層導(dǎo)入平臺，同時(shí)還原每個(gè)元素的位置。第三個(gè)就是適配不同屏幕的分辨率。
PSD導(dǎo)入、自動(dòng)切圖
在我們平臺上實(shí)現(xiàn)了PSD導(dǎo)入和自動(dòng)切圖的邏輯。就是把一個(gè)PSD文件導(dǎo)入到平臺里面，PSD文件在平臺中被打成了單個(gè)獨(dú)立的元素?？梢詫@些單個(gè)獨(dú)立的元素添加動(dòng)畫、事件以及其它行為。
實(shí)現(xiàn)原理
通過imagemagik這個(gè)開源庫將PSD文件分層打散成png文件，上傳到服務(wù)器。然后通過psd.js獲取樹結(jié)構(gòu)的PSD圖層信息。最后將各個(gè)圖層的位置、尺寸、透明度（包括文本組件）組合，得到psd轉(zhuǎn)換后的json。
個(gè)性化部分
個(gè)性化模式包括了固定模式和靈活配置。
動(dòng)畫個(gè)性化
動(dòng)畫個(gè)性化主要是動(dòng)畫方案、動(dòng)畫時(shí)長、動(dòng)畫次序、重復(fù)次數(shù)、播放方式。
動(dòng)畫方案結(jié)合了其它一些開源庫不斷把新出現(xiàn)的、好用的動(dòng)畫方案來整合到平臺上，實(shí)現(xiàn)了最大程度的復(fù)用。
動(dòng)畫次序是用可拖拽的時(shí)間線來控制動(dòng)畫的前后次序。
播放方式在CSS里實(shí)現(xiàn)了順序播放和逆序播放。
事件機(jī)制
事件機(jī)制目前實(shí)現(xiàn)了一些比較簡單的功能，例如當(dāng)點(diǎn)擊時(shí)控制一個(gè)組件的顯示和隱藏。這個(gè)現(xiàn)在還不是十分完善，不過對于我們內(nèi)部來說，PM能想到的需求都已經(jīng)整合到這個(gè)平臺里了。
這個(gè)事件在我們平臺目前分為控制類和鏈接類?？刂祁惥褪钱?dāng)點(diǎn)擊某個(gè)選中的組件時(shí)，另一個(gè)會顯示或隱藏。如果它是一個(gè)video或音頻類型，還會有播放暫停的行為。
鏈接類則是當(dāng)點(diǎn)擊某個(gè)組件的時(shí)候，調(diào)起打電話、發(fā)郵件、鏈接跳轉(zhuǎn)以及其它一些直接執(zhí)行的行為。
計(jì)數(shù)器的設(shè)計(jì)
計(jì)數(shù)器中封裝了一些可執(zhí)行的行為，在我們平臺中實(shí)現(xiàn)了一個(gè)計(jì)數(shù)器的組件，然后當(dāng)計(jì)數(shù)器被添加到編輯界面中的時(shí)候，它可配置的行為就包括增減數(shù)值、計(jì)算分?jǐn)?shù)、清零等一些計(jì)數(shù)相關(guān)的行為。
通過這樣的機(jī)制來實(shí)現(xiàn)一些簡單的、需要邏輯控制的H5。
定制化部分
用js腳本實(shí)現(xiàn)定制化功能
我們平臺里的js腳本目前是支持zepto、style和script?？梢酝ㄟ^簡單的接口獲取頁面元素，直接操作DOM。
前端服務(wù)化在百度內(nèi)部的實(shí)踐目前在我們內(nèi)部通過拖拽來生成頁面的平臺除了H5之外，還有用于生成后臺管理系統(tǒng)的AMIS、用于生成數(shù)據(jù)報(bào)表的ShowX以及用于生成數(shù)據(jù)流功能頁面的APage。
總結(jié)
總的來說，前端服務(wù)化的整個(gè)大愿景就是告別重復(fù)勞動(dòng)，創(chuàng)造更多價(jià)值。
我個(gè)人的目標(biāo)是盡可能把重復(fù)的勞動(dòng)提取出來，從而free出時(shí)間來進(jìn)行更深入的研究。
目前百度前端服務(wù)化系列平臺已經(jīng)歸入百度云計(jì)算事業(yè)部，并將作為商業(yè)產(chǎn)品對外服務(wù)，在服務(wù)內(nèi)部的同時(shí)，完成了由內(nèi)而外的孵化轉(zhuǎn)型。
我今天的分享就到這里，感謝聆聽！
