WeUI 设计规范与组件

WeUI：https://github.com/Tencent/weui（设计规范与样式库）
WeUI-WXSS（小程序样式库）：https://github.com/Tencent/weui-wxss
WeUI-Miniprogram（小程序自定义组件）：https://github.com/Tencent/weui-miniprogram
官网：https://weui.io/
关联清单：https://github.com/justjavac/awesome-wechat-weapp

WeUI 是微信官方设计团队为微信内的网页与小程序提供的统一视觉与交互规范。对小程序而言，常见形态包括：

• WeUI-WXSS：以样式（wxss）为主的库，通过 class 组合出基础组件风格
• WeUI-Miniprogram：封装成自定义组件的形态，直接以组件方式使用

🎯 文章目标

• 理解 WeUI 在小程序中的常用接入方式
• 选择 WXSS 版或自定义组件版并实践
• 结合分包与按需引入控制包体

⚙️ 使用方式一：WeUI-WXSS（样式库）

安装与引用（任选一种）：

• 直接拷贝 dist 到项目并在 app.wxss / 页面 wxss 中引入
• npm 安装后在构建 npm 后引用

示例（全局引入）：

/* app.wxss */
@import "weui-wxss/dist/style/weui.wxss";

按钮示例（WXML）：

<!-- pages/index/index.wxml -->
<button class="weui-btn weui-btn_primary">主操作</button>
<button class="weui-btn weui-btn_default">次操作</button>

⚙️ 使用方式二：WeUI-Miniprogram（自定义组件）

安装：

npm i weui-miniprogram -S --production
# 构建 npm：在微信开发者工具中“工具 -> 构建 npm”

页面中声明 usingComponents（示例以 Button 为例）：

{
  "usingComponents": {
    "mp-button": "weui-miniprogram/button/button"
  }
}

使用组件：

<mp-button type="primary" bindtap="onTap">确认</mp-button>

🧩 工程实践

• 统一主题：基于变量或定制样式文件覆盖品牌色、圆角、间距
• 按需引入：仅在使用页面引入对应组件/样式，结合分包控制主包体积
• 与第三方组件库共存：需要注意样式优先级与命名冲突（建议 BEM 命名与局部样式）

🧪 常见问题

• 构建 npm 失败：清缓存、重启工具，确认基础库版本与 packNpm 设置
• 样式覆盖无效：检查引入顺序与选择器优先级
• 组件与样式混用：确保不会重复引入相同功能的两套实现

✅ 适用场景

• 希望遵循微信生态原生风格的业务
• 需要快速搭建通用风格的页面（表单、列表、对话框等）
• 与 Vant Weapp/ColorUI 搭配时，保持统一视觉规范

🔗 参考

• WeUI：https://github.com/Tencent/weui
• WeUI-WXSS：https://github.com/Tencent/weui-wxss
• WeUI-Miniprogram：https://github.com/Tencent/weui-miniprogram
• 自定义组件指南：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

📊 总结

WeUI 为微信生态提供统一设计基线。对小程序而言，WeUI-WXSS 适合轻量样式快速落地，WeUI-Miniprogram 更适合组件粒度的复用与规范化。按需选型、合理分包即可平衡体验与包体。