写点什么

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

评论

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

我正在使用React Native (Expo) 开源一个精美的电商购物应用。

Geek_9da61c

产品设计 软件开发 开源中国 品牌设计

德国 building IoT 2024 峰会:天谋科技围绕 IoTDB 的时序数据管理解决方案前沿探索

Apache IoTDB

融云 IM 史无前例五折优惠!

融云 RongCloud

Git 安全远程访问:SSH 密钥对生成、添加和连接步骤解析

小万哥

git 程序人生 编程语言 软件工程 后端开发

带你全方位体验 Amazon Connect

亚马逊云科技 (Amazon Web Services)

万字长文讲解关于LowCode你需要知道的一切

canonical

DDD 低代码 软件架构 可逆计算 Nop平台

一文读懂Penpad 以 Fair Launch 方式推出的首个资产 PEN

BlockChain先知

基于高德地图的电子围栏、地图搜索嵌入

五陵散人

地图 高德地图 电子围栏

九章云极DataCanvas公司牵手国家超算互联网,实现算法与算力一体化服务

九章云极DataCanvas

牛市初期,Penpad 以 Fair Launch 方式推出首个资产 PEN

石头财经

技术管理者如何避免被裁掉(1)

芃篙君

管理

编程究竟难在哪?

算法的秘密

再聊对架构决策记录的一些思考

疯狂架构

架构设计实战 架构决策记录 ADR

SpringBoot混淆代码,防止反编译代码泄露

源字节1号

开源 软件开发 前端开发 后端开发 小程序开发

一文读懂Penpad 以 Fair Launch 方式推出的首个资产 PEN

加密眼界

AIGC 周报(2.26~3.03)

AIGC Weekly 周报

人工智能 AI AI应用 openai AIGC

一文读懂Penpad 以 Fair Launch 方式推出的首个资产 PEN

股市老人

一文读懂Penpad 以 Fair Launch 方式推出的首个资产 PEN

股市老人

华为云时习知&成都大学附属医院,打造“互联网+医疗”标杆

轶天下事

大模型基础应用框架(ReACT\SFT\RAG)创新及零售业务落地

京东零售技术

人工智能 算法 大模型 agent ChatGPT

百度AI,能否“投”出未来?

自象限

百度 AI

如何将Word一键转PPT?收好这3个办公提效神器!

彭宏豪95

效率 PPT 在线白板 办公软件 AI工具

HttpMessageConverter添加java8 LocateTime时间转换

智慧源点

九章云极DataCanvas公司出席WBBA 2024宽带发展大会

九章云极DataCanvas

作业12

大肚皮狒狒

2023,九章云极DataCanvas的澎湃时刻

九章云极DataCanvas

企业架构设计原则之理念领先性

凌晞

架构设计原则

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