H5 活動(dòng)頁面快速生成神器——Mocha
項(xiàng)目介紹
Mocha 項(xiàng)目為 H5 活動(dòng)配置平臺(tái)，用于簡(jiǎn)單、靈活、快速地生成活動(dòng)頁面，操作方式采用拖拽來快速生成，使之更方便地獲得想要的內(nèi)容，所見即所得。同時(shí)還支持在線預(yù)覽、掃碼預(yù)覽、一鍵發(fā)布上線等功能。相比原來開發(fā)廣告活動(dòng)所消耗的開發(fā)成本大幅度降低。那么，接下來就開始說說這個(gè)活動(dòng)配置平臺(tái)~
項(xiàng)目流程圖
Mocha 活動(dòng)配置平臺(tái)項(xiàng)目主要通過簡(jiǎn)單配置快速、穩(wěn)定上線，減少開發(fā)成本。此項(xiàng)目技術(shù)及框架涉及到 React、dva、umi、react-dnd、antd 等，數(shù)據(jù)是存儲(chǔ)到ElasticSearch （簡(jiǎn)稱：es）服務(wù)中，同時(shí)會(huì)同步緩存到 redis。當(dāng)未超過緩存時(shí)間時(shí)直接讀取 redis 中的數(shù)據(jù)并返回，但此次介紹的重點(diǎn)并不是數(shù)據(jù)的存儲(chǔ)和讀取，而是一個(gè)新活動(dòng)的生成及實(shí)現(xiàn)過程。
活動(dòng)創(chuàng)建
活動(dòng)的創(chuàng)建根據(jù)不同的類型進(jìn)行區(qū)分，如：默認(rèn)分類、運(yùn)營活動(dòng)、投放活動(dòng)、研發(fā)測(cè)試等。一般針對(duì)于新的組件功能研發(fā)或測(cè)試的活動(dòng)會(huì)在研發(fā)測(cè)試分類中，其他分類下均由運(yùn)營同學(xué)來配置活動(dòng)。接下來看一下如何創(chuàng)建新的活動(dòng)，如圖所示：
這里的活動(dòng) ID 是由前端生成的，可以通過此 ID 值在 es 服務(wù)查詢到當(dāng)前活動(dòng)的數(shù)據(jù)。活動(dòng) ID 的生成規(guī)則代碼如下：
活動(dòng)配置
創(chuàng)建一個(gè)活動(dòng)后，我們來具體看看如何配置一個(gè)活動(dòng)以及是如何實(shí)現(xiàn)的。先來看一下配置活動(dòng)的頁面結(jié)構(gòu)：
從圖上可以看出，在配置活動(dòng)的頁面中主要分為三個(gè)部分，分別是組件庫、畫布展示區(qū)、組件屬性配置。
組件庫
每一個(gè)組件由 index.tsx、schema.ts、template.ts 文件三個(gè)部分組成，如圖：
index.tsx：主要用來顯示組件內(nèi)容，展示左側(cè)組件庫中的模板及畫布上配置參數(shù)后的組件
schema.ts：組件的基礎(chǔ)數(shù)據(jù)信息
template.ts：組件的類型、生成樣式及組件名稱
在組件庫中的每一個(gè)組件由 DynamicEngine 組件動(dòng)態(tài)解析生成，給組件 DynamicEngine 傳入相應(yīng)的參數(shù)來生成不同的組件，代碼如下：
再來看一下 DynamicEngine 組件的實(shí)現(xiàn)，代碼如下：
代碼中可以看到 props 中有一個(gè) isTpl 屬性，這個(gè)屬性的目的是用來做展示區(qū)分的。當(dāng) isTpl 為 true 時(shí)會(huì)顯示在組件庫中，否則會(huì)展示到畫布展示區(qū)中。那么來看一下畫布展示區(qū)這個(gè)部分到底做了哪些工作。
畫布展示區(qū)
當(dāng)一個(gè)組件從組件庫中拖拽到畫布中，會(huì)顯示組件的默認(rèn)信息。以圖片組件為例，如圖所示：
從圖上可以看出，我們只需要簡(jiǎn)單配置相對(duì)應(yīng)的數(shù)據(jù)信息即可在畫布中顯示出我們想要的結(jié)果。那么，來看一下是這部分是如何實(shí)現(xiàn)的，代碼如下：
GridLayout 組件主要的作用是對(duì)畫布的拖拽事件做了一些處理，在 GridLayout 組件中我們可以同樣看到 DynamicEngine 組件的存在。這里的 DynamicEngine 與組件庫中為同一個(gè)組件，作用也是一致的。唯一不同的是此時(shí)的 isTpl 屬性為 false，那么在動(dòng)態(tài)加載組件時(shí)可以通過此屬性展示出不同的內(nèi)容。接下來同樣以圖片列表組件為例來看一下在組件中 isTpl 屬性做怎樣的區(qū)分，代碼如下：
通過屬性 isTpl 做不同的展示處理，屬性 imageList 用來處理圖片展示的數(shù)據(jù)，這樣就可以在組件庫及畫布展示區(qū)中得到我們想要的數(shù)據(jù)。那么，組件的屬性是如何配置、如何解析的呢？接下來就看一下組件信息的配置。
組件屬性配置
一個(gè)組件的具體屬性數(shù)據(jù)的配置均由此部分進(jìn)行，根據(jù)組件的 schema 信息解析對(duì)應(yīng)的配置組件，再由配置組件配置出的數(shù)據(jù)給到畫布展示區(qū)對(duì)應(yīng)的組件進(jìn)行渲染。組件的具體類型是在 template.ts 及 schema.ts 文件中定義的，代碼如下：
通過以上的信息在組件屬性配置區(qū)域來區(qū)分加載不同類型的組件，那么來看一下不同類型的組件在 FormEditor 組件中如何加載的，列舉部分類型代碼如下：
可以看到，通過組件的 schema.ts 中的 type 來動(dòng)態(tài)地加載不同的屬性組件，從而對(duì)組件的一些屬性進(jìn)行設(shè)置來顯示到畫布展示區(qū)中。
預(yù)覽&發(fā)布上線
預(yù)覽
除了在畫布中顯示出配置好的信息以外，同時(shí)還可以通過預(yù)覽操作生成配置好的頁面用于發(fā)布上線之前的測(cè)試及效果查看。并可在預(yù)覽頁面生成二維碼在手機(jī)上查看效果，如圖所示：
發(fā)布上線
通過預(yù)覽頁面查看測(cè)試之后，我們可以在預(yù)覽頁面直接發(fā)布上線，點(diǎn)擊“提交”按鈕即可直接發(fā)布到線上，一個(gè)線上活動(dòng)就這樣完成了。
總結(jié)
Mocha 活動(dòng)配置平臺(tái)能夠在確保新活動(dòng)快速上線，減少開發(fā)成本的同時(shí)，保證 B 端的穩(wěn)定輸出。后續(xù)還會(huì)對(duì)項(xiàng)目性能逐漸優(yōu)化，提高項(xiàng)目的穩(wěn)定性及完善程度。
Mocha 活動(dòng)配置平臺(tái)主要的功能以及部分實(shí)現(xiàn)已經(jīng)在上文中一一介紹，目前項(xiàng)目中支持的組件包含圖片列表、輪播圖、購買、登錄、表單以及訂閱組件等。之后會(huì)根據(jù)業(yè)務(wù)的需求添加不同功能的組件來豐富平臺(tái)的功能，使之配置化平臺(tái)更加完善。
Mocha 項(xiàng)目參考于開源項(xiàng)目 H5 Dooring 實(shí)現(xiàn)。
推薦閱讀：
數(shù)據(jù)流管理方案 | Redux 和 MobX 哪個(gè)更好？
React 面試不完全指南：為什么要學(xué)數(shù)據(jù)流管理？
點(diǎn)個(gè)“在看”和“贊”吧，
畢竟我是要成為前端網(wǎng)紅的人。