前端组件库——WeUI知识点大全（二）

2026-04-22 262

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 教程来源 http://vbzcj.cn/ WeUI是微信官方UI库，提供按钮、输入框、列表等表单组件，图标、Flex布局等基础组件，以及对话框、Toast等反馈组件和导航组件，并全面支持暗色模式，通过CSS变量实现主题动态切换。

三、核心组件详解

3.1 表单类组件
表单是用户与应用交互的核心，WeUI提供了完整的表单组件体系。

3.1.1 按钮组件
按钮是WeUI中最基础的交互元素，提供了多种视觉变体：

<!-- 主要操作按钮（绿色） -->
<button class="weui-btn weui-btn_primary">主要按钮</button>

<!-- 次要操作按钮（灰色） -->
<button class="weui-btn weui-btn_default">默认按钮</button>

<!-- 警示操作按钮（红色） -->
<button class="weui-btn weui-btn_warn">警告按钮</button>

<!-- 小尺寸按钮 -->
<button class="weui-btn weui-btn_primary weui-btn_mini">小按钮</button>

<!-- 禁用按钮 -->
<button class="weui-btn weui-btn_primary weui-btn_disabled">禁用按钮</button>

<!-- 加载中按钮 -->
<button class="weui-btn weui-btn_primary weui-btn_loading">
    <i class="weui-loading"></i> 加载中
</button>

按钮状态说明：

主要按钮（绿色）：用于页面的主要操作，如“提交”、“确认”

默认按钮（灰色）：用于次要操作，如“取消”、“返回”

警示按钮（红色）：用于危险操作，如“删除”、“注销”

3.1.2 输入框组件
输入框是表单中的核心元素，WeUI提供了多种输入框样式：

<!-- 标准输入框 -->
<div class="weui-cell">
    <div class="weui-cell__hd">
        <label class="weui-label">用户名</label>
    </div>
    <div class="weui-cell__bd">
        <input class="weui-input" type="text" placeholder="请输入用户名">
    </div>
</div>

<!-- 带验证状态的输入框 -->
<div class="weui-cell weui-cell_warn">
    <div class="weui-cell__hd">
        <label class="weui-label">手机号</label>
    </div>
    <div class="weui-cell__bd">
        <input class="weui-input" type="tel" placeholder="请输入手机号">
    </div>
    <div class="weui-cell__ft">
        <i class="weui-icon-warn"></i>
    </div>
</div>

<!-- 文本域 -->
<div class="weui-cell">
    <div class="weui-cell__bd">
        <textarea class="weui-textarea" placeholder="请输入详细描述" rows="3"></textarea>
        <div class="weui-textarea-counter">0/200</div>
    </div>
</div>

输入框结构说明：

weui-cell：表单项容器

weui-cell__hd：标签区域

weui-label：标签文本

weui-cell__bd：输入区域

weui-input：输入框样式

weui-cell__ft：右侧附加区域（图标、提示等）

weui-cell_warn：警告状态的样式修饰

3.1.3 列表表单
列表表单用于展示多个表单项的组合

<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">姓名</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" placeholder="请输入姓名">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">邮箱</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="email" placeholder="请输入邮箱">
        </div>
    </div>
</div>

3.1.4 选择器

<!-- 单选框组 -->
<div class="weui-cells weui-cells_radio">
    <label class="weui-cell weui-check__label" for="radio1">
        <div class="weui-cell__bd">
            <p>选项一</p>
        </div>
        <div class="weui-cell__ft">
            <input type="radio" class="weui-check" name="radio" id="radio1" checked>
            <span class="weui-icon-checked"></span>
        </div>
    </label>
</div>

<!-- 复选框组 -->
<div class="weui-cells weui-cells_checkbox">
    <label class="weui-cell weui-check__label" for="checkbox1">
        <div class="weui-cell__hd">
            <input type="checkbox" class="weui-check" id="checkbox1">
            <i class="weui-icon-checked"></i>
        </div>
        <div class="weui-cell__bd">
            <p>选项一</p>
        </div>
    </label>
</div>

<!-- 开关 -->
<div class="weui-cell weui-cell_switch">
    <div class="weui-cell__bd">接收通知</div>
    <div class="weui-cell__ft">
        <input class="weui-switch" type="checkbox">
    </div>
</div>

3.2 基础组件
3.2.1 图标组件
WeUI内置了丰富的图标，覆盖了常见的状态和操作场景：

<!-- 成功图标 -->
<i class="weui-icon-success"></i>

<!-- 提示图标 -->
<i class="weui-icon-info"></i>

<!-- 警告图标 -->
<i class="weui-icon-warn"></i>

<!-- 等待图标 -->
<i class="weui-icon-waiting"></i>

<!-- 安全提示图标 -->
<i class="weui-icon-safe"></i>

<!-- 信息图标 -->
<i class="weui-icon-info-circle"></i>

<!-- 取消/关闭图标 -->
<i class="weui-icon-cancel"></i>

<!-- 搜索图标 -->
<i class="weui-icon-search"></i>

<!-- 清除图标 -->
<i class="weui-icon-clear"></i>

图标使用场景：

weui-icon-success：操作成功提示

weui-icon-warn：警告或错误提示

weui-icon-info：普通信息提示

weui-icon-waiting：等待状态提示

3.2.2 Flex布局
WeUI提供了基于Flexbox的布局工具类：

<!-- 水平布局 -->
<div class="weui-flex">
    <div class="weui-flex__item">弹性项目1</div>
    <div class="weui-flex__item">弹性项目2</div>
</div>

<!-- 垂直布局 -->
<div class="weui-flex weui-flex_column">
    <div>项目1</div>
    <div>项目2</div>
</div>

<!-- 两端对齐 -->
<div class="weui-flex weui-flex_justify-between">
    <div>左</div>
    <div>右</div>
</div>

3.3 操作反馈组件
3.3.1 对话框（Dialog）
对话框用于需要用户确认的重要操作：

<div class="weui-dialog" id="dialog">
    <div class="weui-dialog__hd">
        <strong class="weui-dialog__title">提示</strong>
    </div>
    <div class="weui-dialog__bd">
        确定要执行此操作吗？
    </div>
    <div class="weui-dialog__ft">
        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
    </div>
</div>

3.3.2 提示框（Toast）
提示框用于显示轻量级的操作反馈：

<!-- 成功提示 -->
<div class="weui-toast">
    <i class="weui-icon-success-no-circle weui-icon_toast"></i>
    <p class="weui-toast__content">已完成</p>
</div>

<!-- 加载提示 -->
<div class="weui-toast">
    <i class="weui-loading weui-icon_toast"></i>
    <p class="weui-toast__content">加载中</p>
</div>

<!-- 文字提示 -->
<div class="weui-toast">
    <p class="weui-toast__content">仅文字提示</p>
</div>

3.3.3 操作表（ActionSheet）
操作表从底部弹出，提供多个操作选项：

<div class="weui-actionsheet" id="actionSheet">
    <div class="weui-actionsheet__title">
        <p class="weui-actionsheet__title-text">请选择操作</p>
    </div>
    <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell">选项一</div>
        <div class="weui-actionsheet__cell">选项二</div>
        <div class="weui-actionsheet__cell">选项三</div>
    </div>
    <div class="weui-actionsheet__action">
        <div class="weui-actionsheet__cell">取消</div>
    </div>
</div>

3.4 导航组件
3.4.1 顶部导航栏

<div class="weui-navbar">
    <div class="weui-navbar__item weui-bar__item_on">
        选项一
    </div>
    <div class="weui-navbar__item">
        选项二
    </div>
    <div class="weui-navbar__item">
        选项三
    </div>
</div>

3.4.2 底部标签栏

<div class="weui-tabbar">
    <a href="#" class="weui-tabbar__item weui-bar__item_on">
        <div class="weui-tabbar__icon">
            <img src="./images/icon_home.png" alt="">
        </div>
        <p class="weui-tabbar__label">首页</p>
    </a>
    <a href="#" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img src="./images/icon_my.png" alt="">
        </div>
        <p class="weui-tabbar__label">我的</p>
    </a>
</div>

3.5 其他常用组件
3.5.1 列表（Cells）
列表是WeUI中最常用的数据展示组件：

<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <p>列表项1</p>
        </div>
        <div class="weui-cell__ft">
            详细信息
        </div>
    </div>
    <div class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
            <p>可点击列表项</p>
        </div>
        <div class="weui-cell__ft weui-cell__ft_in-access">
        </div>
    </div>
</div>

3.5.2 卡片（Panel）
卡片用于组合展示相关内容：

<div class="weui-panel">
    <div class="weui-panel__hd">面板标题</div>
    <div class="weui-panel__bd">
        <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title">标题</h4>
            <p class="weui-media-box__desc">描述内容</p>
        </div>
    </div>
    <div class="weui-panel__ft">
        <a href="#" class="weui-cell weui-cell_access weui-cell_link">
            <div class="weui-cell__bd">查看更多</div>
            <span class="weui-cell__ft"></span>
        </a>
    </div>
</div>

3.5.3 搜索栏

<div class="weui-search-bar">
    <form class="weui-search-bar__form">
        <div class="weui-search-bar__box">
            <i class="weui-icon-search"></i>
            <input type="search" class="weui-search-bar__input" placeholder="搜索">
            <a href="javascript:" class="weui-icon-clear"></a>
        </div>
        <label class="weui-search-bar__label">
            <i class="weui-icon-search"></i>
            <span>搜索</span>
        </label>
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn">取消</a>
</div>

四、暗色模式适配

随着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');

方式三：在小程序中启用

// 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;
}

来源：
http://vbzcj.cn/

前端组件库——WeUI知识点大全（二）

三、核心组件详解

四、暗色模式适配

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

前端组件库——WeUI知识点大全（二）

三、核心组件详解

四、暗色模式适配

热门文章

最新文章

相关电子书