01
前言
2015年10月份左右，接到了開發(fā)一個(gè)h5移動(dòng)端頁(yè)面編輯器的任務(wù)，開發(fā)目的是解放公司內(nèi)在制作這類網(wǎng)頁(yè)的所投入的人力以及解決使用外部h5編輯器所涉及到的版權(quán)問題。
因此，一款能夠與市面上已經(jīng)成型的h5編輯器產(chǎn)品功能相仿，又結(jié)合了公司的賬戶權(quán)限、特殊需求的產(chǎn)品就是需要研究并開發(fā)的了。
什么是h5頁(yè)面編輯器？h5頁(yè)面編輯器，即是采用html5開發(fā)制作的、集編輯頁(yè)面各種元素的樣式及動(dòng)畫于一身的頁(yè)面編輯器。一般按最終成品適用平臺(tái)分為PC端和移動(dòng)端兩種類型。
02
現(xiàn)狀
在進(jìn)行移動(dòng)端h5頁(yè)面編輯器的開發(fā)之前，我們先了解下移動(dòng)端網(wǎng)頁(yè)的現(xiàn)狀。
移動(dòng)端網(wǎng)頁(yè)的現(xiàn)狀
我們知道，從html5誕生以來(lái)，憑借著其優(yōu)秀的體驗(yàn)以及開放強(qiáng)大的特點(diǎn)，在移動(dòng)端發(fā)展的風(fēng)生水起。特別是隨著微信等社交工具的誕生，以及apple公司的大力支持，html5在信息管理、游戲、廣告?zhèn)鞑ヮI(lǐng)域得到了非常顯著的發(fā)展，這也是為什么我們要開發(fā)這樣一款軟件的原因。
移動(dòng)端網(wǎng)頁(yè)的分類
從移動(dòng)端網(wǎng)頁(yè)的功能上，我把他們分為以下幾個(gè)類別：廣告展示類、游戲活動(dòng)類、新聞信息類、平臺(tái)應(yīng)用類。下面逐一對(duì)這幾個(gè)類別進(jìn)行描述。
廣告展示類
展示類網(wǎng)頁(yè)是最常見的，一般都是作為企業(yè)官網(wǎng)、活動(dòng)網(wǎng)站的展示類網(wǎng)頁(yè)，體驗(yàn)形式也大多為上下（或左右）滑動(dòng)翻頁(yè)或者一屏到底的類型，一般元素上會(huì)加上各種各樣的css3動(dòng)畫。
PS：其實(shí)這種類型非常像PPT，所以私底下我也喜歡把它叫做ppt類，而我們開發(fā)的編輯器，目前的主要編輯對(duì)象也是這一類。
游戲活動(dòng)類
活動(dòng)類網(wǎng)頁(yè)的擴(kuò)展空間是最大的，而且各個(gè)廣告公司的大神們還在進(jìn)一步開發(fā)他們的腦洞，給這個(gè)類別添磚加瓦。從大方向上講，還是在網(wǎng)頁(yè)中，植入一個(gè)html5的小游戲，比如搖一搖、躲避球、接金幣、踩白塊等，以及通過游戲后得到一定的獎(jiǎng)品，以此來(lái)提高活動(dòng)參與度。
更為酷炫的案例，參考：
新聞信息類
信息類網(wǎng)頁(yè)h5移動(dòng)端頁(yè)面開發(fā)實(shí)例，類似于魅族、阿里、騰訊官網(wǎng)的移動(dòng)版，或新聞列表形式、或圖片信息形式，展示各種知訊。
平臺(tái)應(yīng)用類
某某平臺(tái)移動(dòng)版、某某系統(tǒng)移動(dòng)版，這些即是屬于這類網(wǎng)站了，他們的作用也是和PC端的保持一致，由于操作較為復(fù)雜，所以在手機(jī)上出現(xiàn)的幾率不是很大，更多的是在PC和pad上較為盛行。
立意
本文旨在廣告展示類h5編輯器做一個(gè)結(jié)構(gòu)上面的描述，希望能夠給大家?guī)?lái)一些思維上的拓展以及方向性的指導(dǎo)。
03
實(shí)現(xiàn)原理與需求分析
實(shí)現(xiàn)原理
從實(shí)現(xiàn)原理來(lái)說(shuō)，其實(shí)需要解決的就是以下幾個(gè)問題：
需要有哪些可以編輯的元素？
文本、圖片、形狀、音頻、鏈接等，二期以后會(huì)逐步增加更多的可編輯元素。
元素如何進(jìn)行編輯？
通過點(diǎn)擊或者上傳的形式新增，通過拖拽來(lái)調(diào)整大小尺寸及位置，通過編輯面板來(lái)修改樣式。同時(shí)，不同的元素將擁有不同的編輯面板，如文字類型，可以修改字體、顏色、大小、對(duì)齊方式等，而圖片類型，則可以進(jìn)行縮放、裁剪、圓角、陰影等調(diào)整。
如何編輯和預(yù)覽動(dòng)畫效果？
動(dòng)畫效果將模仿其他產(chǎn)品，合并至編輯面板，并通過點(diǎn)擊圖標(biāo)的形式，更換不同的入場(chǎng)動(dòng)畫，更換的同時(shí)，觸發(fā)本動(dòng)畫的實(shí)際效果預(yù)覽。另外也可以點(diǎn)擊獨(dú)立的預(yù)覽按鈕，可以對(duì)已經(jīng)編輯完畢的頁(yè)面進(jìn)行預(yù)覽。
如何實(shí)現(xiàn)與后臺(tái)的數(shù)據(jù)交互？
按頁(yè)和頁(yè)內(nèi)元素組合成一個(gè)json對(duì)象，附帶音頻信息傳遞至后臺(tái)數(shù)據(jù)接口，讀取時(shí)同樣處理。
如何將數(shù)據(jù)轉(zhuǎn)換成手機(jī)端網(wǎng)頁(yè)？
通過js及php解析h5移動(dòng)端頁(yè)面開發(fā)實(shí)例，將頁(yè)面元素逐一解析成html及css，并使用插件實(shí)現(xiàn)上下或者左右翻頁(yè)。
手機(jī)端網(wǎng)頁(yè)如何實(shí)現(xiàn)兼容？
目前市面上，手動(dòng)開發(fā)這類型網(wǎng)頁(yè)，一般有兩種兼容方式，即固定尺寸兼容及百分比兼容，我稱之為主動(dòng)兼容和被動(dòng)兼容，區(qū)別主要是在與元素css的尺寸計(jì)算方式以及的寫法，這類型文章網(wǎng)上已經(jīng)有不少，這里就不再敷述。而在本項(xiàng)目當(dāng)中，最終選擇的是兩者相結(jié)合的方式來(lái)實(shí)現(xiàn)，原因在之后的文章中會(huì)提及。
通過解答以上問題，我們應(yīng)該對(duì)這款編輯器有了一個(gè)初步的認(rèn)識(shí)，下面將通過excel表格的形式列舉整理好的需求。
需求分析
這是一個(gè)精簡(jiǎn)版的需求分析表，完整版的因?yàn)樘^復(fù)雜，就不放上來(lái)了，不過可以給大家看個(gè)截圖。
當(dāng)然，列表中的功能并未全部在第一期項(xiàng)目中全部開發(fā)完畢，例如撤銷、zip包發(fā)布等。
因此，根據(jù)功能完成的難易程度，我在需求中為各個(gè)功能標(biāo)注了技術(shù)難度，并且區(qū)分了各期的開發(fā)目標(biāo)。 了解完編輯器的實(shí)現(xiàn)原理和需求之后，下面為大家展示其整體框架設(shè)計(jì)。
04
框架設(shè)計(jì)實(shí)現(xiàn)
后端框架
分享方面，內(nèi)置微信分享代碼，支持使用項(xiàng)目標(biāo)題、描述、封面自定義分享文案。
登錄方面，集成公司內(nèi)部登錄系統(tǒng)，賬號(hào)無(wú)縫銜接。
前端框架
前端方面同樣采用了較為輕量化的框架結(jié)構(gòu)，目前由于沒有方面的需求，所以并沒有把這一塊整合在一起。
05
總結(jié)
項(xiàng)目第一期目前已經(jīng)開發(fā)完畢，基本的功能都已經(jīng)完成，現(xiàn)階段正在調(diào)研react改版的可行性，并且也有了初步的成果。
限于篇幅原因，本篇文章不涉及適應(yīng)策略、代碼框架、知識(shí)技巧、優(yōu)化策略、打包策略等，這些內(nèi)容將在下一篇文章中詳細(xì)描述。
以下是本編輯器的初步設(shè)計(jì)方案，是本人自己設(shè)計(jì)的哦~
由于在設(shè)計(jì)上借鑒了不少其他已經(jīng)成型產(chǎn)品，這塊接觸的較多的同學(xué)可能會(huì)覺得這個(gè)界面較為眼熟^_^。
PS：本項(xiàng)目目前的定位是內(nèi)部使用。
下個(gè)階段的h5編輯器
目前來(lái)說(shuō)，這個(gè)階段的編輯器功能還較少，在下個(gè)階段開始之前，大致規(guī)劃下可能會(huì)增加的功能：
基于react的改版
react的誕生，為這類需要開發(fā)撤銷功能及雙向綁定功能的軟件帶來(lái)了福音，一旦上手后，開發(fā)難度將大幅降低。憑借react的diff算法上的策略，在性能上，相信能對(duì)本項(xiàng)目帶來(lái)不小的提升。
希望能夠在今年內(nèi)，將使用react改版后的項(xiàng)目帶給大家。
了解關(guān)于項(xiàng)目后期更多內(nèi)容，請(qǐng)持續(xù)關(guān)注“魅族開放平臺(tái)”。