QMUI

定义

QMUI 是腾讯广研 QMUI 团队推出的一系列 UI 开发框架的统称，按平台分为 QMUI Web、QMUI iOS 和 QMUI Android 三部分，三者均以开源形式在代码托管平台发布^[1][5]。它的定位不是完整的应用开发框架，而是面向界面层的解决方案：把常用控件、全局样式配置以及设备与屏幕相关的工具方法预先封装好，开发者接入后可以直接专注业务逻辑，不必反复编写基础代码^[3]。

QMUI Web 由一套 Sass 方法与函数合集构成，并内置基于自动化构建工具的工作流；移动端两侧则分别在 Android 与 iOS 原生控件体系之上做扩展和兼容处理^[2]。

原理

QMUI 的核心机制是样式与逻辑分离的全局配置。框架为颜色、导航栏、对话框、输入框、列表等界面元素提供一份集中配置表，项目只需改写其中取值，全部引用该配置的控件就会同步更新，从而避免逐个界面的重复修改^[3]。在 Web 端，这一思路由 Sass 变量与配置表实现，并配有公共组件和扩展组件供按需引用^[2]。

移动端在这一配置机制之上进一步引入换肤能力。以 Android 端为例，框架把控件资源取值属性化，运行时可切换到不同的样式集合，夜间模式只需在系统界面模式变化时调用换肤接口，而不必强制重建界面^[4]。此外，框架还封装了设备信息、屏幕信息、键盘管理和状态栏管理等工具方法，用于处理各类机型差异^[1]。

发展历程

QMUI 的起点在 2014 年。当时团队主要支持 QQ 邮箱桌面网页版这一体量庞大的项目，缺少统一的界面基础库，各模块自行开发导致样式分散、难以统一，团队因此着手制定编码规范并搭建通用界面库，技术路线选择了当时已趋成熟的 Sass 与自动化工作流^[6]。经过约三年迭代，Web 端方案发展为包含编码规范、样式工具与样式管理、内置工作流、配套桌面工具及完整文档的完整方案^[6]。

2017 年 8 月，QMUI Web 正式回迁并发布到腾讯的开源代码仓库，成为该系列中最早公开的一端^[2][7]。iOS 与 Android 两队随后于 2018 年 12 月相继开源，项目积累来自 QQ 邮箱、微信读书等产品的长期迭代^[1][3]。到 2019 年前后，Android 端发布 2.x 首个对外版本，支持库迁移到 AndroidX，最低支持版本提升，并补充了换肤功能，同时重写了弹出层、标签页等组件^[4]。

应用

QMUI Web 主要服务于需要统一整体样式、且界面变动频繁的大型项目，已用于企业微信、微信读书等腾讯自有产品的网页端^[2]。它支持通过脚手架完成项目初始化与配置，并提供图形界面的桌面工具用于管理基于该框架开发的项目^[2][8]。

移动端两端面向原生应用开发。QMUI Android 提供了对话框、标签页、下拉刷新、圆角图片控件以及可设置投影、圆角、描边的多种布局容器，并针对手势返回、沉浸式状态栏、挖孔屏适配等问题给出实现方案^[1]。QMUI iOS 在这一基础上扩展了 UIKit 的多个组件，并处理不同 iOS 版本之间的兼容差异^[3]。为便于开发者试用，各端都提供了可直接安装运行的示例应用，源码与示例相互对照^[1]。

局限

QMUI 面向的是界面层通用需求，并不覆盖业务逻辑、网络通信、数据存储等应用开发的其他部分，这些仍需项目自行选择相应方案。它提供的是一套既定风格的设计实现，使用该框架意味着在较大程度上接受其界面规范，样式自由度因此受到约束^[2]。

各平台版本之间存在兼容成本。Android 端 2.x 与 1.x 并不完全兼容，资源配置和组件接口有较多增删改，升级后即使编译通过也可能出现界面显示不正确的情况^[4]。不同大版本支持的平台范围也有差异，Android 端早期版本支持较低的系统接口级别，后续版本提高了下限；iOS 端 3.0.0 起支持 iOS 9 及以上，2.x 支持 iOS 8 及以上，而 4.6.1 及以上版本要求 iOS 13 及以上^[9]。iOS 端还暂不支持多窗口场景^[9]。

参见

• AndroidX —— QMUI Android 2.x 迁移所采用的 Android 官方支持库体系。

• UIKit —— QMUI iOS 在其基础上做扩展和版本兼容处理的苹果界面框架。

• Sass —— QMUI Web 所使用的 CSS 预处理器，框架的方法合集以此编写。

• Material Design —— Android 应用界面设计的常见规范，与移动端控件风格相关。

• 微信读书 —— QMUI 项目经验来源之一，其网页端使用了该框架。

• QQ邮箱 —— QMUI 早期开发所支持的产品，也是移动端经验的来源之一。