如何在微信的WeUI开发样式库-CRMEB社区

如何在微信的WeUI开发样式库

管理

编辑

删除

WeUI 是微信官方提供的一套基于微信设计规范的前端样式库，适用于微信网页、公众号网页、小程序等场景。你可以通过以下方式在微信环境中使用 WeUI 来开发样式库或界面。

一、WeUI 项目地址

官方开源地址（GitHub）：

🔗 https://github.com/Tencent/weui

官网文档和样例页面：

🔗 https://weui.io

二、使用场景分类

场景	适用 WeUI 版本	使用方式
公众号网页/H5页面	原生 WeUI（CSS/HTML）	引入 CSS 文件
微信小程序	WeUI for 小程序	引入 WXML/WXSS 组件库

三、公众号网页/H5 项目中使用 WeUI（HTML + CSS）

1. 引入 WeUI 的 CSS 文件（CDN 或本地）

<head>
  <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.5.0/weui.min.css" />
</head>

2. 使用 WeUI 的组件（HTML 示例）

<div class="weui-cells__title">表单示例</div>
<div class="weui-cells">
  <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>

3. 样式类说明

WeUI 使用大量 BEM 命名规范，如：

weui-cell：一行表单或内容单元
weui-input：输入框
weui-btn：按钮

四、微信小程序中使用 WeUI

方法一：使用「WeUI for 小程序」组件版本

项目地址：

🔗 https://github.com/Tencent/weui-wxss

步骤：

1. 下载 weui-wxss 代码

git clone https://github.com/Tencent/weui-wxss.git

把 weui-wxss/dist 文件夹复制到你的小程序项目里，如：/miniprogram/styles/weui/

2. 引入样式（如在 `app.wxss` 中）

@import "./styles/weui/weui.wxss";

3. 使用组件样式（WXML 示例）

<view class="weui-btn-area">
  <button class="weui-btn weui-btn_primary">确定</button>
</view>

五、自定义开发 WeUI 风格组件库

如果你想 在WeUI基础上封装自己的组件库，可以这样做：

1. 引入 WeUI 样式为基础

然后使用 SASS 或 LESS 扩展样式
按 BEM 命名继续拓展样式库

2. 组件库目录结构建议（公众号项目）

weui-custom/
├── base/
│   └── weui.min.css        # 官方基础样式
├── components/
│   ├── button.css          # 自定义按钮
│   └── form.css
├── index.css               # 总样式入口

3. 自定义样式封装示例

/* components/button.css */
.custom-btn {
  @extend .weui-btn;
  background-color: #007aff;
  border-radius: 8px;
}

六、推荐开发方式

场景	推荐做法
小程序 UI 快速开发	用 `weui-wxss`，或直接用 `UniUI/Vant Weapp`
微信网页/轻应用	引入 WeUI 的 CSS，通过组件化封装复用
二次开发组件库	用 WeUI 作为基础样式 + SASS 拓展

七、WeUI 替代/拓展组件库推荐

名称	适用场景	优点
Vant	小程序/H5	组件丰富，易拓展
NutUI	多端	京东开源，支持 Vue
TDesign	H5/小程序	腾讯出品，视觉现代