四、暗色模式适配
随着 iOS 13 引入暗色模式，微信也全面支持了暗色主题。WeUI 提供了完善的暗色模式适配方案。
4.1 暗色模式原理
WeUI 使用 CSS 自定义属性（CSS Variables）来实现动态主题切换。明色主题和暗色主题分别定义了一套颜色变量：
/* 明色主题变量 */
:root,
page {
--weui-BRAND: #07C160;
--weui-RED: #FA5151;
--weui-BG-0: #EDEDED;
--weui-BG-1: #F7F7F7;
--weui-BG-2: #FFFFFF;
--weui-FG-0: rgba(0, 0, 0, .9);
--weui-FG-1: rgba(0, 0, 0, .5);
--weui-FG-2: rgba(0, 0, 0, .3);
}
/* 暗色主题变量 */
[data-weui-theme='dark'] {
--weui-BRAND: #07C160;
--weui-RED: #FA5151;
--weui-BG-0: #111111;
--weui-BG-1: #1E1E1E;
--weui-BG-2: #191919;
--weui-FG-0: rgba(255, 255, 255, .8);
--weui-FG-1: rgba(255, 255, 255, .5);
--weui-FG-2: rgba(255, 255, 255, .3);
}
4.2 启用暗色模式
方式一：跟随系统
在页面根元素上不设置特定的 data-weui-theme 属性，WeUI 会自动检测系统主题设置。
方式二：手动控制
通过 JavaScript 动态设置主题：
// 切换为暗色主题
document.documentElement.setAttribute('data-weui-theme', 'dark');
// 切换为明色主题
document.documentElement.setAttribute('data-weui-theme', 'light');
// 跟随系统
document.documentElement.removeAttribute('data-weui-theme');
// 切换函数
function toggleTheme() {
const isDark = document.documentElement.getAttribute('data-weui-theme') === 'dark';
if (isDark) {
document.documentElement.setAttribute('data-weui-theme', 'light');
} else {
document.documentElement.setAttribute('data-weui-theme', 'dark');
}
}
方式三：在小程序中启用
// app.json
{
"darkmode": true,
"themeLocation": "theme.json"
}
4.3 自定义暗色主题
如果需要定制暗色主题的品牌色，可以覆盖相应的 CSS 变量：
/* 自定义主题 */
:root {
--weui-BRAND: #0052D9; /* 品牌色 */
}
[data-weui-theme='dark'] {
--weui-BRAND: #4582E6; /* 暗色模式下的品牌色 */
--weui-BG-0: #000000;
--weui-BG-1: #1A1A1A;
--weui-BG-2: #242424;
}
五、性能优化与最佳实践
5.1 按需引入
WeUI 全量引入的 CSS 文件可能超过 100KB，对于小程序或移动端 Web 应用，按需引入可以显著减小包体积。
按需引入的关键原则：
只引入实际使用的组件样式：不要全量导入 weui.css，而是只导入需要的组件样式
注意组件依赖：某些组件（如对话框）可能依赖按钮、遮罩等子组件样式，需要一并引入
使用构建工具优化：利用 Webpack 等工具的 Tree Shaking 功能自动移除未使用的 CSS
CSS 按需引入示例：
/* 只引入按钮和对话框组件 */
@import 'weui/packages/weui-button/weui-button.css';
@import 'weui/packages/weui-dialog/weui-dialog.css';
5.2 小程序扩展库优化
在小程序中使用 useExtendedLib 方式引入 WeUI 是最优方案：
{
"useExtendedLib": {
"weui": true
}
}
5.3 CSS 动画性能优化
WeUI 的动画效果（如 Toast 淡入淡出、Dialog 弹出）使用了 CSS3 过渡和变换，这些属性可以利用 GPU 加速：
/* 使用 transform 代替 left/top 实现动画 */
.weui-dialog {
transform: translateY(-50%) scale(0.9);
transition: transform 0.3s ease;
}
.weui-dialog.weui-dialog_show {
transform: translateY(-50%) scale(1);
}
5.4 图片资源优化
WeUI 中的图标建议使用以下方式优化：
使用字体图标：WeUI 内置了图标字体，避免图片请求
图标合并：多个图标合并为雪碧图，减少 HTTP 请求
懒加载：对于非首屏图片，使用懒加载技术
使用 SVG：对于需要高清显示的图标，使用 SVG 格式
5.5 移动端触摸优化
/* 增大触摸区域 */
.weui-btn {
min-height: 44px; /* 移动端最小触摸区域 */
display: inline-flex;
align-items: center;
justify-content: center;
}
/* 禁用点击高亮 */
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* 滚动优化 */
.weui-scroll-view {
-webkit-overflow-scrolling: touch;
}
