最新快訊!密鑼緊鼓地開發(fā)年度盛典 BigoLive前端營(yíng)收組同比更佳

背景

(相關(guān)資料圖)

年末將至，各直播平臺(tái)都會(huì)上線了相應(yīng)的年末活動(dòng)，各公會(huì)、主播也都紛紛參加活動(dòng)沖年終業(yè)績(jī)，而BigoLive作為YY旗下的海外直播平臺(tái)當(dāng)然也不落下步伐，相比與國(guó)內(nèi)已經(jīng)成規(guī)模的直播帶貨，海外發(fā)展形式則更為偏向于傳統(tǒng)直播的“秀場(chǎng)”，所以我們的年末活動(dòng)也都圍繞這直播打賞模式做活動(dòng)，并將各個(gè)用戶/主播福利點(diǎn)滿，爭(zhēng)取早日業(yè)績(jī)達(dá)標(biāo)；為了完成這一目標(biāo)，早在9月1號(hào)便密鑼緊鼓地開發(fā)年度盛典的首個(gè)活動(dòng)——區(qū)域家族賽，緊接其后的還有區(qū)域個(gè)人賽、全球家族賽、全球個(gè)人賽，BigoLive前端營(yíng)收組從9月至11月陸續(xù)地投入大量人力參與開發(fā)年度盛典，其最終效果也同比上年度更佳。

活動(dòng)流程與概況

活動(dòng)主要分為預(yù)賽，晉級(jí)賽，半決賽與決賽四個(gè)階段。參與的用戶包含了家族，主播，用戶，針對(duì)不同的人群設(shè)置不同的競(jìng)賽晉升機(jī)制，由于每類人群的利益都是息息相關(guān)的，所以在活動(dòng)玩法上給每類人群足夠有吸引力的獎(jiǎng)勵(lì)機(jī)制，讓大家形成一個(gè)作戰(zhàn)團(tuán)體，家族靠主播獲得票，主播靠家族協(xié)助運(yùn)營(yíng)粉絲獲得更多打賞，主播通過粉絲打賞獲得高排名，粉絲通過打賞獲得榮譽(yù)稱號(hào)。從整體的活動(dòng)設(shè)計(jì)上來看，邏輯還是較為清晰的，模塊劃分也合理，包含各賽程，榜單，活動(dòng)規(guī)則，家族獎(jiǎng)勵(lì)，個(gè)人獎(jiǎng)勵(lì)，額外的還有相關(guān)活動(dòng)的賽況介紹，包含打得火熱的直播間，官方最新戰(zhàn)況報(bào)道，粉絲精華帖子推薦等等，讓用戶看到了一個(gè)更加真實(shí)，更有感情更有溫度的比賽。每個(gè)賽段的活動(dòng)是一環(huán)扣一環(huán)的，家族賽得到的復(fù)活卡可以在個(gè)人賽使用，區(qū)域家族賽打榜的前N名（各區(qū)域設(shè)置不同）能夠得到參與全球賽的資格等；在原型與UI的設(shè)計(jì)上，產(chǎn)品和設(shè)計(jì)師、技術(shù)都達(dá)成了共識(shí)：后一個(gè)活動(dòng)在前一個(gè)活動(dòng)的基礎(chǔ)上做改動(dòng)，這樣能夠在保持UI風(fēng)格不變的情況下，更利于前端做模塊/組件的分割；另外在人員排期上也是安排了雙線同時(shí)并進(jìn)，更大程度的提前提測(cè)日期，以便上線前進(jìn)行充分的測(cè)試。

前端技術(shù)設(shè)計(jì)

年度盛典可謂是把整個(gè)直播體系的功能都用上了一遍，從送禮打榜、貴族升級(jí)到bigo寵物養(yǎng)成、貼吧分享等等形成了一條引導(dǎo)用戶操作的鏈路；展示模塊上也是用上了直播間內(nèi)web元素的活動(dòng)面板、輪播入口、暴獎(jiǎng)彈窗、半屏頁拉起等功能，那么這篇文章我們會(huì)講述年度盛典的整體設(shè)計(jì)以及使用到的公共模塊。

1.活動(dòng)主頁

從UI圖可以看出，UI對(duì)組件的劃分也是與技術(shù)的想法是比較一致的。能從UI上每個(gè)模塊之間都能進(jìn)行解耦，封裝出榜單、彈窗、賽程信息、直播間跳轉(zhuǎn)鏈接、廣告輪播等大量可復(fù)用的交互展示組件。此外，數(shù)據(jù)上也可以通過vuex進(jìn)行狀態(tài)管理，代碼設(shè)計(jì)時(shí)就像搭積木一樣對(duì)每個(gè)賽程階段都構(gòu)建一個(gè)組裝界面，每個(gè)界面內(nèi)是不同組件的組合，這樣用戶在切換不同階段數(shù)據(jù)的時(shí)候只是更新 store的狀態(tài)即可，所以keep-alive+component就形成一個(gè)很好的配合；

六邊形頭像

按照客戶端的規(guī)范，家族頭像是以六邊形的形式展示的，使用web來展示六邊形，我們準(zhǔn)備的3種方案：

如果背景色固定，可以在正常頭像上層遮蓋一個(gè)挖空六邊形的模板，但實(shí)際UI中背景顏色過多，遂放棄該方案；

使用clip-path描繪各個(gè)頂點(diǎn)，使用方便，缺點(diǎn)為兼容性不夠全面；

由于要兼容4.3和ios9機(jī)型，所以不使用css3的語法，構(gòu)思是使用多個(gè)變形的矩形進(jìn)行疊加，運(yùn)用overflow: hidden;進(jìn)行邊界的描繪;

.hexagon-container {    width: 100%;    height: 100%;    overflow: hidden;    visibility: hidden;    position: absolute;    left: 50%;    top: 50%;    transform: translate3d(-50%, -50%, 0) rotate(120deg);    .hexagon-container-in1 {      overflow: hidden;      width: 100%;      height: 100%;      transform: rotate(-60deg);      .hexagon-container-in2 {        width: 100%;        height: 100%;        visibility: visible;        transform: rotate(-60deg);        background: center no-repeat;        background-size: cover;      }    }  }

最終效果：

2.活動(dòng)面板

活動(dòng)面板是懸浮在直播間左上角（多人房為右下角）的一塊180px*250px的webview，相信大家在其他直播軟件也能看到其存在，差異就在于是客戶端實(shí)現(xiàn)還是web實(shí)現(xiàn)；年度盛典作為需要強(qiáng)曝光的活動(dòng)，所以活動(dòng)面板也是需要配置開發(fā)的，實(shí)時(shí)性的數(shù)據(jù)更新是面板展示數(shù)據(jù)的關(guān)鍵，主播和觀眾的每一次操作都能反映在面板中，提高觀眾們的積極性，增加主播間的競(jìng)爭(zhēng)性。 活動(dòng)模板整體設(shè)計(jì)如下：

2.1 相關(guān)交互

活動(dòng)面板是主播間主要的活動(dòng)入口，所以產(chǎn)品會(huì)以面板為出發(fā)點(diǎn)規(guī)劃用戶的整體操作路徑，點(diǎn)擊面板主體部分可拉起禮物面板并定位到相關(guān)活動(dòng)配置的禮物位置，點(diǎn)擊頂部可通過內(nèi)部jsbridge協(xié)議打開半屏頁展示活動(dòng)主頁，另外直播間還有爆獎(jiǎng)和提示彈窗，都可通過在面板監(jiān)聽數(shù)據(jù)更新，調(diào)用不同接口展示相應(yīng)的頁面，彈窗之間有隊(duì)列進(jìn)行管控，避免多個(gè)彈窗同時(shí)觸發(fā)導(dǎo)致數(shù)據(jù)丟失。

3.獎(jiǎng)勵(lì)展示

獎(jiǎng)勵(lì)展示頁面可以說是主播和用戶們最為關(guān)注的一個(gè)頁面了，不同區(qū)域會(huì)根據(jù)用戶消費(fèi)能力進(jìn)行區(qū)域化配置獎(jiǎng)勵(lì)展示來增強(qiáng)活動(dòng)與用戶的匹配性，提升用戶消費(fèi)，拉動(dòng)營(yíng)收。

以上只是一個(gè)區(qū)域的一個(gè)分組賽程的獎(jiǎng)勵(lì)展示，Bigolive 作為全球直播平臺(tái)此次共上線區(qū)域20+、每個(gè)區(qū)域下分組個(gè)數(shù)1-3個(gè)不等、獎(jiǎng)勵(lì)配置明細(xì)均需根據(jù)各個(gè)區(qū)域用戶消費(fèi)能力進(jìn)行差異化配置。此時(shí)龐大的獎(jiǎng)勵(lì)展示配置就需要前端進(jìn)行維護(hù)。考慮到研發(fā)手動(dòng)填寫?yīng)剟?lì)配置工作量甚巨、容易填寫出錯(cuò)，且配置文件還可能頻繁改動(dòng)，導(dǎo)致一些不可預(yù)料的人為失誤，目前采用的方案是：

由研發(fā)人員列出所需要填寫的表格字段由產(chǎn)品人員將獎(jiǎng)勵(lì)配置如：配置所屬區(qū)域、獎(jiǎng)勵(lì)多語言、獎(jiǎng)勵(lì)圖片、獎(jiǎng)勵(lì)數(shù)量、獎(jiǎng)勵(lì)id、展示類別等數(shù)據(jù)填寫在表格中。使用瀏覽器插件 sheetToCode進(jìn)行批量導(dǎo)出，前端再根據(jù)不同字段進(jìn)行獎(jiǎng)勵(lì)展示的適配。如果獎(jiǎng)勵(lì)配置有改動(dòng)，研發(fā)人員只需要重新用插件導(dǎo)入一遍配置即可，不需要改動(dòng)原有代碼設(shè)計(jì)。

此方案還抽離成了公共組件，供四個(gè)年度盛典賽段共同使用，提高了代碼的復(fù)用性，減少繁瑣低效的人力精力投入。

4 Pear系統(tǒng)配置平臺(tái)

Bigolive的營(yíng)收活動(dòng)，按上線區(qū)域可分為單區(qū)域活動(dòng)、多區(qū)域活動(dòng)與全球活動(dòng)，那么在開發(fā)中就需要對(duì)多個(gè)國(guó)家和區(qū)域做本土化處理，支持23種語言的文案展示。在初期，我們的多語言策略是基于vue-i18n和多語言拉取腳本，使用excel-tobe-json3將多種語言處理成多份js文件，保存在本地，根據(jù)vue-i18n獲取到的語言碼異步加載多語言文案。

由此帶來的問題是，活動(dòng)線上運(yùn)行期間，如果產(chǎn)品需要對(duì)某句文案做修改，就需要聯(lián)系開發(fā)，開發(fā)在手動(dòng)運(yùn)行多語言腳本更新多語言文件，再構(gòu)建項(xiàng)目代碼、代碼 CR、填寫變更、層層審批，走嚴(yán)格的活動(dòng)發(fā)版流程，耗時(shí)良久才能最終展示到用戶面前。如果文案修改多次的話，頻繁的發(fā)版不但影響研發(fā)的日常工作效率，也提升了人為出錯(cuò)的概率，影響線上活動(dòng)的穩(wěn)定性；

這次年度盛典活動(dòng)，采用了公司新搭建的Pear系統(tǒng)配置平臺(tái)，通過在遠(yuǎn)程機(jī)器上運(yùn)行多語言拉取腳本并同步到cdn機(jī)器，就可以得到一份由線上接口獲取的多語言數(shù)據(jù)；在實(shí)際體驗(yàn)中也適當(dāng)?shù)貎?yōu)化了我們技術(shù)的開發(fā)流程，在開發(fā)過程中無需等待去區(qū)域運(yùn)營(yíng)翻譯好文檔，而是將業(yè)務(wù)代碼提交上線后，在運(yùn)行時(shí)進(jìn)行vue-i18n的數(shù)據(jù)載入；另外我們封裝了私有庫@bigo/pear-fetch，用以讀取構(gòu)建參數(shù)區(qū)分拉取不同環(huán)境的配置文件，同時(shí)拉取一份保底的英文多語言配置（可自行設(shè)置保底語言）用以當(dāng)前語言獲取key失敗時(shí)降級(jí)使用英文。

Pear系統(tǒng)接入到年度盛典中后，在整個(gè)活動(dòng)進(jìn)行到過程中，產(chǎn)品的文案變動(dòng)20+次，修改完成在Pear點(diǎn)擊發(fā)布即可上線，實(shí)現(xiàn)了文案的“熱更新”，省去了多次構(gòu)建發(fā)布的流程，統(tǒng)計(jì)下來至少節(jié)省了18個(gè)小時(shí)。除了文案的可配置，活動(dòng)獎(jiǎng)勵(lì)，賽程安排等靜態(tài)數(shù)據(jù)，也實(shí)現(xiàn)了平臺(tái)配置化，活動(dòng)過程中產(chǎn)品需要調(diào)整獎(jiǎng)勵(lì)數(shù)值和賽程安排，也能通過Pear自行配置，年度盛典的配置修改更靈活，從設(shè)計(jì)上將配置與業(yè)務(wù)代碼解耦，降低了溝通成本并提高了整體效率。

5 mp4+canvas替代動(dòng)圖

年度盛典中設(shè)計(jì)大佬希望有更多的動(dòng)態(tài)元素，在此前的方案中大多使用gif，但不能顯示透明背景，Lottie、Svga等動(dòng)畫方案則需要為此引入較為龐大的第三方庫，技術(shù)側(cè)為了活動(dòng)能夠以較小的體積運(yùn)行上線，在立項(xiàng)期間進(jìn)行了調(diào)研； webp效果很雖好，但在ios舊系統(tǒng)上無法運(yùn)行，通過搜索沒有發(fā)現(xiàn)比較好的解決方法；在搜尋客戶端播放動(dòng)圖的技術(shù)中，發(fā)現(xiàn)設(shè)計(jì)為客戶端做的動(dòng)態(tài)禮物素材是一個(gè)左右鏡像的mp4文件，通過對(duì)比倆邊的像素點(diǎn)（黑色則渲染為透明）將圖像結(jié)合在一起，這樣處理的效果幀數(shù)高、體積小，所以便找尋web是否也可以通過這種方式播放無用戶交互的動(dòng)畫；

https://user-images.githubusercontent.com/19945145/103343455-11a67100-4ac7-11eb-9d55-d08f3e46d246.mp4

H5實(shí)現(xiàn)alpha通道視頻在這篇文章中發(fā)現(xiàn)了可通過video + canvas重新繪制視頻內(nèi)容，當(dāng)描述的點(diǎn)在黑白鏡像內(nèi)是黑色，則設(shè)置為透明，通過實(shí)時(shí)監(jiān)聽video的play事件繪制canvas，我們就可以得到一個(gè)透明底的動(dòng)圖效果，且兼容性上有良好的表現(xiàn)；

但在實(shí)際測(cè)試中，發(fā)現(xiàn)低端機(jī)的性能不太好，優(yōu)化點(diǎn)有兩個(gè)： 1.完整方法為每個(gè)點(diǎn)都繪制，低端機(jī)則每倆個(gè)點(diǎn)才繪制； 2.不實(shí)時(shí)監(jiān)聽play事件，加上間隔時(shí)間雖然幀數(shù)會(huì)降低，但頁面不會(huì)卡頓；

以下為Svga、png、mp4部分性能測(cè)試結(jié)果

另外也將video + canvas播放動(dòng)圖做成了npm庫，之后其他業(yè)務(wù)線需要可以直接使用，不再需要調(diào)試。

總結(jié)

年度盛典中使用到的公共模塊較多，而且今年前端的基建完善了許多，大多數(shù)模塊都進(jìn)行了更替迭代，作為業(yè)務(wù)使用人員需要進(jìn)行嚴(yán)格的內(nèi)部自測(cè)流程才可交付驗(yàn)收，這一部分壓力便落到了進(jìn)行年度盛典開發(fā)的同事們頭上，在時(shí)間有限的情況下活動(dòng)順利驗(yàn)收提測(cè)、順利保障線上運(yùn)行，是大家共同的努力結(jié)果。

歡迎大家留言討論，祝工作順利、生活愉快！

我是bigo前端，下期見。