快手、孩子王、华为等专家分享大模型在电商运营、母婴消费、翻译等行业场景的实际应用 了解详情
写点什么

优酷暗黑模式(七):暗黑模式的技术支撑 Weex & H5

  • 2020-02-27
  • 本文字数:1140 字

    阅读完需:约 4 分钟

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


2020-02-27 10:001766

评论

发布
暂无评论
发现更多内容

架构实战营-模块五

瓜子葫芦侠

「架构实战营」

🏆【Alibaba中间件技术系列】「RocketMQ技术专题」让我们一起实践RocketMQ的服务搭建及配置操作

洛神灬殇

RocketMQ 11月日更 Apache RocketMQ 集群搭建

明道云对接企查查,一键矫正客户信息

明道云

Pulsar VS. Kafka(1): 统一的消息消费模型(Queue + Stream)

Apache Pulsar

kafka 架构 云原生 Apache Pulsar 消息中间件

架构实战营 - 模块四作业

危险游戏

架构实战营

模块四作业-redis 存储方案设计 - 学生考试试卷

Geek_cb2b43

不可思议,阿里巴巴首发:Java核心框架指导手册,竟1小时点击量破千万

热爱java的分享家

Java 面试 程序人生 编程语言 经验分享

区块链技术革命才刚刚开始

CECBC

Pulsar VS. Kafka(2): 以Segment为中心的架构

Apache Pulsar

kafka 架构 分布式 Apache Pulsar 消息中间件

微博评论的高性能高可用计算架构

deng

架构实战

Hive基本理论和常用函数

犟马骝

真香!Github一夜爆火,阿里性能优化不传之秘终于开源

热爱java的分享家

Java 程序人生 性能优化 编程语言 经验分享

【LeetCode】N 叉树的最大深度Java题解

Albert

算法 LeetCode 11月日更

终于有人将Github星标百万的Spring技术精髓收录成册

热爱java的分享家

Java 面试 程序人生 springboot 经验分享

nginx配置详解

小鲍侃java

11月日更

你敢相信?我用了3个月成功破茧成蝶,从简历被拒到收割8个大厂offer

热爱java的分享家

Java 面试 程序人生 编程语言 经验分享

微服务架构中,二次浅封装实践

架构 分布式 微服务 技术栈 二次封装

考试试卷存储方案

天天向上

架构实战营

字节跳动面试官:SpringBoot统一接口返回和全局异常处理怎么玩?

热爱java的分享家

Java 架构 程序人生 编程语言 经验分享

极客时间算法训练营Week01

jjn0703

算法训练营

先睹为快即将到来的HTML6

devpoint

JavaScript html5 11月日更

记一次提升18倍的性能优化

捉虫大师

性能优化 Go 语言

遇到了几道关于作用域的前端小题

空城机

JavaScript 大前端 11月日更

架构实战营模块四作业

孙志强

架构实战营

调优达到上限?这份尊享版性能实战套餐,让你领先别人好几个级别

热爱java的分享家

Java 面试 程序人生 编程语言 经验分享

【高并发】深度解析ScheduledThreadPoolExecutor类的源代码

冰河

Java 并发编程 多线程 高并发 异步编程

第四模块总结

张靖

架构训练营

微博评论的高性能高可用计算架构

deng

架构实战

Elasticsearch写入数据的过程是什么?以及是如何更新索引数据的

热爱java的分享家

Java 架构 程序人生 编程语言 经验分享

System.Text.Json自定义Conveter

喵叔

11月日更

模块四作业

Asha

「架构实战营」

优酷暗黑模式(七):暗黑模式的技术支撑 Weex & H5_移动_阿里巴巴文娱技术_InfoQ精选文章