weui-wxss：微信小程序官方UI组件库完全指南

weui-wxss是微信官方设计的微信小程序UI组件库，为开发者提供与微信原生视觉体验完全一致的基础样式库。作为微信小程序开发的首选UI框架，weui-wxss包含了button、cell、dialog、progress、toast、article、actionsheet、icon等丰富组件，让小程序开发更加高效专业。✨

🎯 为什么选择weui-wxss？

统一视觉体验 - weui-wxss由微信官方设计团队打造，确保与微信原生界面风格完美融合，为用户提供一致的视觉体验。

开箱即用 - 包含超过30种常用UI组件，无需从零开始设计，直接引用即可使用，大大提升开发效率。

完全免费 - 基于MIT开源协议，开发者可以自由使用和修改，无需担心版权问题。

📦 快速安装和使用

安装方式

npm install weui-wxss

或者直接从GitHub克隆项目：

git clone https://gitcode.com/gh_mirrors/weu/weui-wxss

基本使用

在app.wxss中引入整个样式库：

@import '/path/to/weui-wxss/dist/style/weui.wxss';

或者按需引入单个组件：

@import '/path/to/weui-wxss/dist/style/widget/weui-button/weui-button.wxss';

🎨 核心组件展示

按钮组件 (Button)

weui-wxss提供多种按钮样式，包括主要按钮、默认按钮、警告按钮等，满足不同场景需求。

表单组件 (Form)

完整的表单解决方案，包含输入框、选择器、单选框、复选框等表单元素。

弹窗组件 (Dialog)

模态弹窗、动作面板等多种弹窗组件，提供良好的用户交互体验。

导航组件 (Navigation)

底部标签栏、顶部导航栏等导航组件，帮助用户快速定位和切换页面。

🔧 高级功能特性

黑暗模式支持

weui-wxss支持黑暗模式，只需在根节点添加属性即可切换：

<view data-weui-theme="dark">
    <!-- 你的内容 -->
</view>

Rpx版本适配

除了默认的px版本，还提供rpx版本，更好地适配不同屏幕尺寸，文件位于dist-rpx-mode目录。

模块化引用

支持按需引入，只需引用需要的组件样式文件，减少包体积：

@import 'path/to/weui-wxss/dist/style/widget/weui-cell/weui-cell.wxss';
@import 'path/to/weui-wxss/dist/style/widget/weui-button/weui-button.wxss';

🚀 开发最佳实践

项目结构组织

建议按照功能模块组织样式文件，保持代码清晰：

src/
├── styles/
│   ├── weui-components/    # weui组件样式
│   ├── custom/            # 自定义样式
│   └── app.wxss          # 主样式文件

自定义主题

通过修改变量文件来自定义主题色彩：

/* 在variable目录下修改配色变量 */
@weuiColorPrimary: #07C160;
@weuiColorWarn: #FA5151;

性能优化

• 按需引入组件样式，减少不必要的代码
• 使用rpx版本以获得更好的屏幕适配
• 合理使用组件，避免过度设计

📊 实际应用案例

weui-wxss已被众多微信小程序采用，包括官方示例和第三方商业应用，证明了其稳定性和实用性。

💡 常见问题解答

Q: weui-wxss是否支持自定义样式？ A: 完全支持，您可以在引入weui样式后覆盖或扩展自定义样式。

Q: 如何更新到最新版本？ A: 通过npm update weui-wxss或重新下载最新版本替换旧文件。

Q: 是否支持TypeScript？ A: weui-wxss是纯样式库，与TypeScript完全兼容。

📝 总结

weui-wxss作为微信官方推出的UI组件库，为小程序开发者提供了专业、统一、高效的开发体验。无论你是初学者还是资深开发者，weui-wxss都能帮助你快速构建出符合微信设计规范的高质量小程序。

通过本指南，你应该已经掌握了weui-wxss的核心功能和使用方法。现在就开始使用weui-wxss，打造属于你的精美小程序吧！🎉

官方文档参考：src/style/ 和 src/example/ 目录