优酷暗黑模式（七）：暗黑模式的技术支撑 Weex & H5

在本文中，我们会介绍优酷 App 的 Weex 和 H5 页面是如何尽可能复用 Native 端的实现方案，实现暗黑模式的。

一、适配原理

对于 Weex 和 H5 页面的暗黑模式支持，我们考虑了几种方案。

第一种方案，只提供视觉模式查询能力，由具体页面的开发同学来控制效果；

第二种方案，建立 JavaScript 版本的公共资源库和设计标准化体系；

第一种方案过于简单，难以对最终页面呈现结果做统一管控；

第二方案又比较重，需要较长的时间成本。

我们的最终的方案是：Native/Weex/H5 具体页面的开发都统一按照视觉标准化定义的 DesignToken 进行开发，这样同一套设计体系可以复用到不同的渲染方式。Native 容器在加载 Weex 或 H5 页面时，将当前的色值表传给 JavaScript 侧;JavaScript 侧不用关心当前所处的视觉模式，只需要读取色值表并设置到页面组件。

Weex/H5 页面实现暗黑模式的架构图:

Weex/H5 的实际使用场景一般是作为活动的承载页，内容的落地页，和跨应用业务的交互页。但不论是哪种，都是嵌入在整个原生页面交互链路上的。所以我们把 Native 当作是 Weex/H5 容器的运行环境，Native 触发动态页面的渲染时，我们会将色板从色彩管理器中取出，传递给 JavaScript 侧，然后借由 JavaScript 侧影响最终的视觉效果呈现。

1. Weex 页面的适配

Weex 渲染流程图：

2. H5 页面的适配

H5 渲染流程图:

色彩管理器向 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 页面的普通模式：

H5 页面的暗黑模式 :

2. Weex 页面视觉效果

Weex 页面的正常模式:

Weex 页面的暗黑模式:

作者简介：

涵父，阿里文娱无线开发专家。

相关阅读：

优酷暗黑模式（一）：是什么、为什么、如何落地？

优酷暗黑模式（二）：如何建立设计语言标准化管理体系

优酷暗黑模式（三）：暗黑模式设计指南

优酷暗黑模式（四）：设计标准化的技术实现

优酷暗黑模式（五）：暗黑模式的技术实现策略

优酷暗黑模式（六）：暗黑模式的技术支撑 iOS