四、暗色模式适配

随着 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;
}

来源：
http://unbgv.cn