Categories
程式開發

優酷暗黑模式(七):暗黑模式的技術支撐 Weex & H5


在本文中,我們會介紹優酷App的Weex和H5頁面是如何盡可能複用Native端的實現方案,實現暗黑模式的。

一、適配原理

對於Weex和H5頁面的暗黑模式支持,我們考慮了幾種方案。

第一種方案,只提供視覺模式查詢能力,由具體頁面的開發同學來控制效果;

第二種方案,建立JavaScript版本的公共資源庫和設計標準化體系;

第一種方案過於簡單,難以對最終頁面呈現結果做統一管控;

第二方案又比較重,需要較長的時間成本。

我們的最終的方案是:Native/Weex/H5具體頁面的開發都統一按照視覺標準化定義的DesignToken進行開發,這樣同一套設計體係可以復用到不同的渲染方式。 Native容器在加載Weex或H5頁面時,將當前的色值表傳給JavaScript側;JavaScript側不用關心當前所處的視覺模式,只需要讀取色值表並設置到頁面組件。

Weex/H5頁面實現暗黑模式的架構圖:

優酷暗黑模式(七):暗黑模式的技術支撐 Weex & H5 1

Weex/H5的實際使用場景一般是作為活動的承載頁,內容的落地頁,和跨應用業務的交互頁。但不論是哪種,都是嵌入在整個原生頁面交互鏈路上的。所以我們把Native當作是Weex/H5容器的運行環境,Native觸發動態頁面的渲染時,我們會將色板從色彩管理器中取出,傳遞給JavaScript側,然後藉由JavaScript側影響最終的視覺效果呈現。

1. Weex頁面的適配

Weex渲染流程圖:

優酷暗黑模式(七):暗黑模式的技術支撐 Weex & H5 2

2. H5頁面的適配

H5 渲染流程圖:

優酷暗黑模式(七):暗黑模式的技術支撐 Weex & H5 3

色彩管理器向JS傳遞的色板數據

{
    "cb_1":"rgba(36,165,255,0)",
    "cb_2":"rgba(0,179,250,0)",
    "cb_3":"rgba(25,69,121,0)",
    "cd_1":"rgba(0,0,0,1)",
    "cg_1":"rgba(28,32,41,0)",
    ......
    "ykn_belt":"rgba(37,37,43,0)",
    "ykn_blackNavigationBar":"rgba(29,29,33,0)",
    "ykn_elevatedPrimaryBackground":"rgba(37,37,43,0)",
    "ykn_elevatedPrimaryGroupedBackground":"rgba(37,37,43,0)",
    "ykn_elevatedSecondaryBackground":"rgba(37,37,43,0)",
    "ykn_elevatedSecondaryGroupedBackground":"rgba(51,51,55,0)",
    "ykn_elevatedTertiaryBackground":"rgba(66,66,69,0)"
}

通過這樣的技術方案,我們最終達成了同一份業務代碼,自動適配系統的視覺模式。無論是Weex頁面還是H5頁面,最終的視覺效果是和Native頁面保持和諧統一的。

二、頁面視覺效果

以下是Weex/H5頁面最終呈現的視覺效果:

1. H5頁面視覺效果

H5頁面的普通模式:

優酷暗黑模式(七):暗黑模式的技術支撐 Weex & H5 4

H5頁面的暗黑模式 :

優酷暗黑模式(七):暗黑模式的技術支撐 Weex & H5 5

2. Weex頁面視覺效果

Weex頁面的正常模式:

優酷暗黑模式(七):暗黑模式的技術支撐 Weex & H5 6

Weex頁面的暗黑模式:

優酷暗黑模式(七):暗黑模式的技術支撐 Weex & H5 7

作者簡介

涵父,阿里文娛無線開發專家。

相關閱讀

優酷暗黑模式(一):是什麼、為什麼、如何落地?

優酷暗黑模式(二):如何建立設計語言標準化管理體系

優酷暗黑模式(三):暗黑模式設計指南

優酷暗黑模式(四):設計標準化的技術實現

優酷暗黑模式(五):暗黑模式的技術實現策略

優酷暗黑模式(六):暗黑模式的技術支撐 iOS