“AI 技术+人才”如何成为企业增长新引擎?戳此了解>>> 了解详情
写点什么

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

评论

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

基于微信小程序的驾校预约学车平台的概要设计和详细设计

CC同学

隐私计算技术栈的融合使用之路还很远

易观分析

隐私计算

HBase海量数据高效入仓解决方案

vivo互联网技术

数据库 HBase

免费下载 |《Serverless 开发速查手册》让你速查秒懂 Serverless

阿里巴巴云原生

云原生

Web 键盘输入法应用开发指南 (8) —— 模拟事件

天择

JavaScript 键盘 输入法 3月月更

Nginx 反向代理(二)

神农写代码

AQS 源码流程分析

网易云信

java

WPF 与 Winform 的区别以及应用场景

神农写代码

22.04 LTS爆料现场 - UKUI 3.1实操界面曝光,简约却不简单!

优麒麟

Linux 开源 操作系统 优麒麟 UKUI

StarRocks 2.1 新版本特性介绍

StarRocks

数据库 大数据 StarRocks

大数据培训:HiveSQL技术优化与面试

@零度

Hive SQL 大数据开发

PendingIntent重定向:一种针对安卓系统和流行App的通用提权方法——BlackHat EU 2021议题详解(上)

安第斯智能云

安全 安卓

CRM复杂业务场景的低代码开发实践

鲸品堂

低代码

WPF -资源引用、资源字典引用以及容器模板和数据模板

神农写代码

阿里巴巴发布最佳实践 | 阿里巴巴DevOps实践指南

阿里云云效

云计算 阿里云 DevOps 云原生 迭代管理

WPF-依赖属性、依赖附加属性以及类型转换

神农写代码

petite-vue源码剖析-双向绑定`v-model`的工作原理

CRMEB

3.17线上|Azure 中国新区域发布会,携创新而来!

白玉兰开源

云计算

什么是 RabbitMQ

Ayue、

RabbitMQ 3月月更

中科柏诚本地生活引数字化活水,解银行疫情期困局

联营汇聚

web前端培训:Node的重新认识

@零度

前端开发 Node

Nginx反向代理(三)

神农写代码

Linux下玩转nginx系列(三)---nginx日志配置文件说明

anyRTC开发者

nginx Linux 音视频 WebRTC 服务器

微博系统中”微博评论“的高性能高可用计算架构

孙强

架构师实战营

To程序员:要写出好代码,你需要懂点儿“底层思维”

博文视点Broadview

Nginx反向代理(一)

神农写代码

Qunar【业务架构解析与探索】系列课重磅来袭啦!!

Qunar技术沙龙

架构

干货|一次完整的性能测试,测试人员需要做什么?

云智慧AIOps社区

测试 性能测试 测试 单元测试 测试类型 测试管理

WPF 项目版本控制以及布局控件

神农写代码

Figma 封禁大疆,并封停所有被美国制裁名单公司账号

PingCode

Java基础重要面试题(一)

逆锋起笔

java面试 java基础 3月月更

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