优酷暗黑模式(七):暗黑模式的技术支撑 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 页面的暗黑模式:

作者简介:

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

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章