一、前言

在去年10月份左右，接到了需求：開發一個H5移動端頁面編輯器的任務，目的主要是解放公司內在製作這類網頁的所投入的人力以及解決使用外部H5編輯器所涉及到的版權問題。

因此，一款能夠與市面上已經成型的H5編輯器產品功能相仿，又結合了公司的賬戶許可權、特殊需求的產品，需要用心研究並著手開發。

什麼是H5頁面編輯器？

H5頁面編輯器，即是採用Html5開發製作的、集編輯頁面各種元素的樣式及動畫於一身的頁面編輯器。一般按最終成品適用平臺分為PC端和移動端兩種型別。

二、現狀

在進行移動端H5頁面編輯器的開發之前，我們先了解下移動端網頁的現狀。

移動端網頁的現狀

我們知道，從Html5誕生以來，憑藉著其優秀的體驗以及開放強大的特點，在移動端發展的風生水起。特別是隨著微信等社交工具的誕生，以及Apple公司的大力支援，Html5在資訊管理、遊戲、廣告傳播領域得到了非常顯著的發展，這也是為什麼我們要開發這樣一款軟體的原因。

移動端網頁的分類

從移動端網頁的功能上，我把他們分為以下幾個類別：廣告展示類、遊戲活動類、新聞資訊類、平臺應用類。 下面逐一對這幾個類別進行描述。

廣告展示類

展示類網頁是最常見的，一般都是作為企業官網、活動網站的展示類網頁，體驗形式也大多為上下（或左右）滑動翻頁或者一屏到底的型別，一般元素上會加上各種各樣的CSS3動畫。

PS：其實這種型別非常像PPT，所以私底下我也喜歡把它叫做PPT類，而我們開發的編輯器，目前主要編輯物件也是這一類。

遊戲活動類

活動類網頁的擴充套件空間是最大的，而且各個廣告公司的大神們還在進一步開發他們的腦洞，給這個類別添磚加瓦。從大方向上講，還是在網頁中，植入一個html5的小遊戲，比如搖一搖、躲避球、接金幣、踩白塊等，以及通過遊戲後得到一定的獎品，以此來提高活動參與度。

更為酷炫的案例，參考：

新聞資訊類

資訊類網頁，類似於魅族、阿里、騰訊官網的移動版，或新聞列表形式、或圖片資訊形式，展示各種知訊。

平臺應用類

某某平臺移動版、某某系統移動版，這些即是屬於這類網站了，他們的作用也是和PC端的保持一致，由於操作較為複雜，所以在手機上出現的機率不是很大，更多的是在PC和Pad上較為盛行。

立意

本文旨在廣告展示類H5編輯器做一個結構上面的描述，希望能夠給大家帶來一些思維上的拓展以及方向性的指導。

三、實現原理與需求分析

實現原理

從實現原理來說，其實需要解決的就是以下幾個問題：

• 需要有哪些可以編輯的元素？

文字、圖片、形狀、音訊、連結等，二期以後會逐步增加更多的可編輯元素。

• 元素如何進行編輯？

通過點選或者上傳的形式新增，通過拖拽來調整大小尺寸及位置，通過編輯面板來修改樣式。同時，不同的元素將擁有不同的編輯面板，如文字型別，可以修改字型、顏色、大小、對齊方式等，而圖片型別，則可以進行縮放、裁剪、圓角、陰影等調整。

• 如何編輯和預覽動畫效果？

動畫效果將模仿其他產品，合併至編輯面板，並通過點選圖示的形式，更換不同的入場動畫，更換的同時，觸發本動畫的實際效果預覽。另外也可以點選獨立的預覽按鈕，可以對已經編輯完畢的頁面進行預覽。

• 如何實現與後臺的資料互動？

按頁和頁內元素組合成一個json物件，附帶音訊資訊傳遞至後臺資料介面，讀取時同樣處理。

• 如何將資料轉換成手機端網頁？

通過js及php解析，將頁面元素逐一解析成html及css，並使用slider外掛實現上下或者左右翻頁。

• 手機端網頁如何實現相容？

目前市面上，手動開發這型別網頁，一般有兩種相容方式，即固定尺寸相容及百分比相容，我稱之為主動相容和被動相容，區別主要是在與元素css的尺寸計算方式以及viewport的寫法，這型別文章網上已經有不少，這裡就不再敷述。而在本專案當中，最終選擇的是兩者相結合的方式來實現，原因在之後的文章中會提及。

通過解答以上問題，我們應該對這款編輯器有了一個初步的認識，下面將通過excel表格的形式列舉整理好的需求。

需求分析

這是一個精簡版的需求分析表，完整版的因為太過複雜，就不放上來了，不過可以給大家看個截圖。

當然，列表中的功能並未全部在第一期專案中全部開發完畢，例如撤銷、zip包釋出等。

因此，根據功能完成的難易程度，我在需求中為各個功能標註了技術難度，並且區分了各期的開發目標。 瞭解完編輯器的實現原理和需求之後，下面為大家展示其整體框架設計。

四、框架設計實現

後端框架

分享方面，內建微信分享程式碼，支援使用專案標題、描述、封面自定義分享文案。

登入方面，整合公司內部登入系統，賬號無縫銜接。

前端框架

前端方面同樣採用了較為輕量化的框架結構，目前由於沒有hybird方面的需求，所以並沒有把這一塊整合在一起。

五、總結

專案第一期目前已經開發完畢，基本的功能都已經完成，現階段正在調研react改版的可行性，並且也有了初步的成果。

限於篇幅原因，本篇文章不涉及適應策略、程式碼框架、知識技巧、優化策略、打包策略等，這些內容將在下一篇文章中詳細描述。

以下是本編輯器的初步設計方案，是本人自己設計的哦~

由於在設計上借鑑了不少其他已經成型產品，這塊接觸的較多的同學可能會覺得這個介面較為眼熟^_^。

PS：本專案目前的定位是內部使用。

下個階段的h5編輯器

目前來說，這個階段的編輯器功能還較少，在下個階段開始之前，大致規劃下可能會增加的功能：

• 支援表單模板
• 支援抽獎等擁有大量指令碼的模板
• 更加完善的模板編輯
• 某些特殊效果的模板（擦除、長按）
• 支援撤銷操作
• 檔案打包
• 介面的進一步優化改版

基於React的改版

React的誕生，為這類需要開發撤銷功能及雙向繫結功能的軟體帶來了福音，一旦上手後，開發難度將大幅降低。憑藉React的diff演算法上的策略，在效能上，相信能對本專案帶來不小的提升。

希望能夠在今年內，將使用react改版後的專案帶給大家。