阿里妹導讀：天貓雙十一已經成為被大眾普遍接受的文化符號，而貓晚則是連接線下線上的重要節點。2017年天貓晚會的前臺直播任務被交給了優酷來承擔。 優酷直播，優酷主客團隊，優酷架構組等多方組成了聯合項目組，合力承擔優酷雙十一貓晚直播的開發任務。?

雖然優酷直播在線上已經有業務穩定運行，但是我們還是遇到了大量問題需要解決。

除開直播晚會現場這個最重要的功能之外，晚會項目組還規劃了點贊/分享有禮，競猜，開寶箱，紅包雨等五花八門的互動玩法，需要在原有的Native直播間上增加大量的功能。

更加雪上加霜的是，晚會的招商并未結束，對直播會場的需求一直在變化。特別是直播會場換膚的需求可能導致會場的框架結構發生大幅度變化，用老的Native直播間應對這種需求變化比較困難。

所以我們決定用Weex重寫一個新的優酷直播間，全面還原當前的Native直播間的業務，同時添加對各種雙十一互動玩法的支撐。老的Naitve直播間僅僅作為降級的備用直播間。

在開始正式工作之前，我們的第一件事情是劃分功能模塊，確定哪些模塊用Weex sdk或者aliweex自帶的原生組件實現, 哪些模塊需要把現有的Native代碼封裝為一個Weex Component供Weex業務代碼引用。

上圖即為雙十一優酷直播間的最終形態，其大致的技術架構圖和功能如下圖所示。

經過評估，我們做出如下模塊劃分：

會場框架: 由Weex業務代碼搭建

回看列表tab: 是一個包含圖文的視頻列表，由Weex原生實現

聊天tab: 包含了大量聊天氣泡動效和復雜的業務邏輯，將原有的聊天室Native代碼封裝為Weex Component

圖文直播tab：包含了投放圖片，文字，視頻，商品鏈接等復雜的邏輯，將原有的Native代碼封裝為Weex Component

播放器組件：將原有的優酷直播播放器Native代碼封裝為Weex Component

點贊標簽： 這個組件被點擊或者收到服務端推送的互動消息時會飄出大量的動畫，我們的選擇是將原有的Native代碼封裝為Weex component

自定義Tab: 這個組件我們自行封裝了一個webview的Component，包含多種功能

1) 利用百川能力加載淘寶商品，實現邊看邊買 2) 加載互動h5頁面，實現紅包雨，競猜等功能 3) 加載阿里星球投放的H5頁面等

其余的跳轉，分享，監控埋點等功能模塊封裝為Weex Module供Weex業務代碼使用

在功能模塊拆分完畢之后，整個直播間已經完全成為組件化，模塊化的，可以隨意地組合，分解，定制。

無論未來的會場設計如何變化，只要編寫新的會場皮膚，根據需要嵌入各種自定義標簽，就能組合出需要的直播會場。

運營同學在優酷直播中臺的投放系統編輯主持人話題，換膚，紅包雨等互動消息后，具體的投放信息會被服務端填入互動玩法動態模板，通過PowerMsg通道下發到端上; 當端上收到此類互動消息之后，直接通過globalEvent發給Weex直播會場，會場解析收到的字段后，根據指令顯示主持人話題，拉起寶箱，紅包雨頁面等。

與一般情況下的Weex頁面降級到H5頁面不同，我們的降級邏輯是發生加載/跳轉/運行異常時，從Weex直播間跳轉到Native直播間; 所以我們沒有沿用Weex常見的降級邏輯，而是另外實現了一套downgrade邏輯。

在開發直播會場的過程中，我們遇到了tabbar框架和自定義Weex Component手勢沖突的問題。