一個簡單易用的電商活動頁面生成系統

做爲一個前端搬磚工，是否把80%的時間花在了活動專題頁面的編碼上？在電商行業，每個節日前都是前端搬磚工的加班時間週期，甚至上線前一秒還能收到領導或運營發來修改文案和圖片的郵件。

本文將介紹一個移動端專題活動頁面製做平臺的搭建思路。

一個典型的電商專題活動頁

沒錯，你看到的就是把你當兄弟的某東的一個活動主場頁，如今你能夠去把各大電商平臺的活動頁面瀏覽一遍，不難看出如下共同點：

1. 頁面展現圖片爲主
2. 點擊必須兼容app
3. 商品列表的樣式固定幾個
4. 運營特別喜歡使用樓層導航菜單
5. 倒計時確定少不了
6. 底部菜單欄跳轉到分會場
7. 少許的動畫效果
8. tabs切換增長頁面展現內容
9. 圖片懶加載提高頁面的呈現速度
10. 回到頂部這種通用的必不可少
11. 微信分享除了淘寶

其餘項目痛點分析：頁面功能大同小異、需求急、時間緊、下線快、研發性很比低，前端工程師沒法持續開發無窮無盡的活動頁面，須要採用活動頁面可視化搭建工具， 由運營人員/產品人員直接生成/修改活動頁面，研發人員的工做轉變爲提供知足活動頁面業務須要的活動模板。

現有頁面製做平臺

或許你也體驗過現有其餘頁面製做平臺，是否以爲本身一個前端開發人員都不會使用？以下圖是某一個在線頁面製做工具，是否是以爲比ps還複雜？

固然，他們這些平臺都是從通用性考慮，相似一個基礎性平臺，把前端技術以界面的方式呈現出來。不能否認，技術很強大，同時也很龐大，離普通人很遙遠，通常人使用不了。有句話說（具體我也不知道誰說的）：不能把技術落地成你們都能使用的東西就不是好技術。沒錯，我如今就是要把技術落地成小朋友都會使用的東西。

其餘可視化搭建工具舉例

阿里雲鳳蝶

• 支持頁面 Data 編輯, 面向運營、產品人員, 編輯自由度爲無嵌套的組件
• 目前製做運營、活動頁面功能上最好的工具
• 提供頁面搭建的模板, 並支持自定義模板
• 配置表單基於 Schema 生成，配置表單操做功能完善

ice 阿里飛冰

• 支持 Component Tree 編輯, 面向中後臺開發人員
• 編輯自由度爲無嵌套的組件，使用「物料-區塊」
• 非前端開發人員能夠快速搭建出可用、符合規範的頁面
• 頁面以源碼方式輸出，前端服務化的一種方式

百度H5

• 支持 HTML Tree 編輯, 面向前端小白, 編輯自由度爲 HTML 元素
• 作 H5 的好工具, 功能上很強大, 對動畫的編輯功能作到細緻

美團外賣前端可視化界面組裝平臺 —— 樂高

• 支持 Dynamic Logic 編輯, 面向中後臺開發人員, 編輯自由度爲可嵌套的組件
• 前端服務化的一種方式
• 在美團內部支持了許多業務頁面, 沒有公網服務, 瞭解該系統只能經過其介紹文章

gaea-editor

• 支持 Component Tree 編輯, 面向中後臺開發人員, 編輯自由度爲可嵌套的組件
• 頁面的拖拉生成, 實現得很完整
• 用於頁面設計, 因此偏向頁面元素的樣式控制
• 技術文章對可視化搭建工具數據流有深入理解: 可視化在線編輯器架構設計

Vue-Layout

• 基於UI組件的Vue可視化佈局、生成vue代碼的工具
• 支持 Component Tree 編輯, 面向中後臺開發人員, 編輯自由度爲可嵌套的組件
• 工具的使用體驗效果不錯

組件開發的思考

以上開源/非開源的可視化頁面製做平臺，無一例外都存在使用門檻高，專業術語多，操做複雜等。

我理想的可視化運營頁面生成工具特色：

• 採用組件化和頁面模板實現快速生成頁面
• 採用不嵌套的組件層級簡化樣式佈局和配置操做
• 開發參數式配置數據, 自動生成配置表單
• 採用後臺渲染或生成靜態文件, 使編輯系統與組件前端框架解耦
• 在遵循編輯系統約定下, 組件能夠自由拓展, 前端框架能夠自由選擇

1、平臺的易用性與展現的靈活性之間的平衡

1. 利用 vuejs 的 mvv* 特性能夠輕鬆實現配置便可見，大幅下降用戶使用難度和項目的開發難度；
2. 頁面只作橫向切割劃分組件（組件寬度100%），放棄 absolute 佈局方式的通用組件，組件內部的absolute佈局採用用戶拖拉定位的交互；
3. 少許頁面全局的 absolute/fixed 組件（如底部導航，回到頂部等），採用特殊處理 + 預約義的方式；
4. 組件設計儘可能考慮使用背景圖出樣式，或者以多種固定樣式提供給用戶選擇。

以下圖所示分割組件：

2、APP內嵌套如何處理點擊或跳轉

統必定義頁面點擊事件，針對不一樣的環境作不一樣跳轉方式，處理APP內跳轉的兼容。另外還能夠特定的組件定義特定的事件：例如商品列表組件，動態獲取商品數據，點擊事件默認跳轉到商品詳情頁。

var url = JSON.parse(target.dataset.url)
var type = target.dataset.type
// 系統內部頁面
if (type === 'inside') {
    if ('isAPP') {
        openApp(url)
    } else {
        location.href = url
    }
}
if (type === 'ouside') {
    location.href = url
}
if (type === 'tel') {
    location.href = 'tel:' + url
}
if (type === 'mail') {
    location.href = 'mailto:' + url
}
// 領取優惠券
if (type === 'coupon') {
    getCoupon(url)
}
複製代碼

3、按需（css和js的按需）生成小體積頁面

隨着組件的增長，防止頁面資源太大影響頁面呈現速度，這裏除了公共代碼，根據用到的組件，加載該組件使用的css和js代碼。

// 按需生成script標籤
<script src="http://example.com/??swiper.min.js,timeout.min.js,form.min.js"><script> // 根據用到的組件添加style，或者直接打包到html頭部 <link ref="stylesheet" href="http://example.com/??form.min.css,swiper.min.css,timeout.min.css"/> 複製代碼

4、樓層導航菜單和圖片懶加載須要組件預約義高度

在實現樓層導航菜單和圖片懶加載的過程當中發現須要預約義頁面高度，這就要求全部組件必須撐開自身的高度，禁止出現加載動態內容後才撐開高度的組件。

<div style="height:6.85vw;">
    <img data-src="http://img.o" class="lazyload">
</div>
複製代碼

5、緩存和非緩存之間的平衡

生成靜態頁面的緩存時間不能太長，必須能夠在短期內或支持用戶手動推送更新頁面，這裏能夠配合平臺使用的CDN系統進行處理。

6、 配置信息與後端接口解耦

組件會隨着系統迭代大幅增長，且每一個組件配置不統一，採用配置信息生成json字符串的方式保存到數據庫。解耦後端的存儲和接口邏輯，後端只須要提供一個增刪改接口便可。

7、頁面生成系統與前端h5的框架解偶

h5消費端能夠採用原生、jQuery、vuejs等任何技術方案。 我的偏向使用原生（個人應用項目方案），jQuery在移動端存在的意義不大，vuejs等框架增長了消費的複雜度，活動專題頁這種純展現性的頁面沒有必要引入 mvv* 框架。

8、是否能夠擴展到生成商城首頁

系統設計是一個數據生產平臺，不負責消費（所見和預覽也算是消費的兩種），能夠生成自定義格式的配置信息，供web或app消費使用。自行腦補：APP端須要預約義組件樣式。

9、開發難度與使用難度之間的平衡

這個仍是以系統的使用簡單爲主，在我這個系統上，開發多作幾個功能相似的組件並無太大難度，例如輪播圖組件，是否把swiper的全部功能集成到一個組件上，個人想法就是分開吧，運營人員喜歡直觀易用的，他想要的組件功能可能就是那麼簡單。

組件舉例

圖片組件：如上圖組件分割第一個組件，咱們使用一個圖片組件便可，上傳切割好的圖片，而後定義點擊區域（相似熱區area，用戶拖拉生成）實現點擊跳轉便可（PS：實際上圖片組件已經能夠知足頁面80%的佈局要求）：

倒計時組件：上圖有一個倒計時功能，如何儘可能覆蓋平時使用要求？我採用圖片出樣式的原則，內部用用戶隨意定義各個倒計時數字樣式，設計以下：

其餘組件就不一一列舉了，感興趣的小夥伴能夠本身嘗試封裝組件，還能夠分裝從後端獲取數據的組件，好比我在實際項目中封裝的「商品列表」組件等，可是別忘記組件的封裝原則：圖片出樣式，高度要撐開。

項目開源地址： github地址

References

【第1282期】頁面可視化搭建工具前生今世

【第1524期】頁面可視化搭建工具技術要點