最新快訊!密鑼緊鼓地開發年度盛典 BigoLive前端營收組同比更佳

背景

(相關資料圖)

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

活動流程與概況

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

前端技術設計

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

1.活動主頁

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

六邊形頭像

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

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

使用clip-path描繪各個頂點，使用方便，缺點為兼容性不夠全面；

由于要兼容4.3和ios9機型，所以不使用css3的語法，構思是使用多個變形的矩形進行疊加，運用overflow: hidden;進行邊界的描繪;

.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.活動面板

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

2.1 相關交互

活動面板是主播間主要的活動入口，所以產品會以面板為出發點規劃用戶的整體操作路徑，點擊面板主體部分可拉起禮物面板并定位到相關活動配置的禮物位置，點擊頂部可通過內部jsbridge協議打開半屏頁展示活動主頁，另外直播間還有爆獎和提示彈窗，都可通過在面板監聽數據更新，調用不同接口展示相應的頁面，彈窗之間有隊列進行管控，避免多個彈窗同時觸發導致數據丟失。

3.獎勵展示

獎勵展示頁面可以說是主播和用戶們最為關注的一個頁面了，不同區域會根據用戶消費能力進行區域化配置獎勵展示來增強活動與用戶的匹配性，提升用戶消費，拉動營收。

以上只是一個區域的一個分組賽程的獎勵展示，Bigolive 作為全球直播平臺此次共上線區域20+、每個區域下分組個數1-3個不等、獎勵配置明細均需根據各個區域用戶消費能力進行差異化配置。此時龐大的獎勵展示配置就需要前端進行維護?？紤]到研發手動填寫獎勵配置工作量甚巨、容易填寫出錯，且配置文件還可能頻繁改動，導致一些不可預料的人為失誤，目前采用的方案是：

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

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

4 Pear系統配置平臺

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

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

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

Pear系統接入到年度盛典中后，在整個活動進行到過程中，產品的文案變動20+次，修改完成在Pear點擊發布即可上線，實現了文案的“熱更新”，省去了多次構建發布的流程，統計下來至少節省了18個小時。除了文案的可配置，活動獎勵，賽程安排等靜態數據，也實現了平臺配置化，活動過程中產品需要調整獎勵數值和賽程安排，也能通過Pear自行配置，年度盛典的配置修改更靈活，從設計上將配置與業務代碼解耦，降低了溝通成本并提高了整體效率。

5 mp4+canvas替代動圖

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

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

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

但在實際測試中，發現低端機的性能不太好，優化點有兩個： 1.完整方法為每個點都繪制，低端機則每倆個點才繪制； 2.不實時監聽play事件，加上間隔時間雖然幀數會降低，但頁面不會卡頓；

以下為Svga、png、mp4部分性能測試結果

另外也將video + canvas播放動圖做成了npm庫，之后其他業務線需要可以直接使用，不再需要調試。

總結

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

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

我是bigo前端，下期見。