wux-weapp：微信小程序 UI 组件库安装与使用指南

一、项目官方信息

Wux Weapp 是一套组件化、可复用、易扩展的微信小程序 UI 组件库。它提供了按钮、表单、弹层、操作反馈等一整套常用小程序组件，开箱即用，适合快速搭建小程序界面。

二、官方图片

• 上图为 Wux Weapp 的官方 Logo。
• 下方为组件库在小程序中的实际界面预览（来自 README）。

三、环境要求

• 微信开发者工具（最新稳定版）。
• 小程序基础库 2.2.1 及以上版本。
• 使用 npm 方式时，项目需要开启开发者工具的「构建 npm」能力。
• 开始使用前，建议先阅读微信官方《小程序自定义组件》文档。

四、安装步骤

方式一：通过 npm 安装（推荐）

通过 npm 安装，依赖小程序基础库 2.2.1 以上版本，同时依赖开发者工具的 npm 构建：

# Using npm
npm i wux-weapp -S --production

# Using yarn
yarn add wux-weapp --production

安装后，在微信开发者工具中点击菜单 工具 → 构建 npm，生成 miniprogram_npm 目录。

方式二：下载代码拷贝

git clone https://github.com/wux-weapp/wux-weapp.git
cd wux-weapp

然后把 packages/lib/ 目录拷贝到自己的项目中：

• packages/lib/：压缩版（ES5）；
• packages/es/：未压缩版（ES6，使用时需在开发者工具右上角「详情 → 本地配置」中开启「ES6 转 ES5」）。

方式三：按需定制

参考官方「量身定制」页面（https://wuxui.com/#/customize-theme）自动抽离只需要的组件，避免引入整个组件库导致体积过大。

五、使用方法

以 Button 组件为例：

1. 在 page.json 中注册组件

"usingComponents": {
    "wux-button": "../../dist/button/index"
}

2. 在 page.wxml 中使用组件

<wux-button size="small">Button</wux-button>
<wux-button size="default">Button</wux-button>
<wux-button size="large">Button</wux-button>

其它组件（ActionSheet、Badge、Form 等）在对应的文档页查看用法。

3. 组件体积优化

如果只用到其中一两个组件，不必整库引入：

1. 优先用官方「量身定制」功能自动抽离（官方推荐）；
2. 手动抽离：从 packages/ 目录拷贝对应组件，检查其 index.json 里是否有依赖组件并一并拷贝；若组件依赖 helpers 目录或通过 JS 主动调用，也需拷贝对应文件。

4. 预览示例

用微信开发者工具打开项目根目录下的 example 目录（注意是 example，不是整个项目），即可预览全部组件效果。

六、常见问题 FAQ

1. npm 装完后组件用不了？ 必须在开发者工具里执行「工具 → 构建 npm」，生成 miniprogram_npm 后才能在页面里通过 usingComponents 引用。

2. 基础库版本有要求吗？ 需要小程序基础库 2.2.1 及以上。过低版本在项目设置里调高基础库即可。

3. 引入整个库后包体积太大？ 用官方「量身定制」按需抽离组件，或手动只拷贝用到的组件及其依赖。

4. ES6 版（packages/es）用不了？ 需在开发者工具「详情 → 本地配置」中开启「ES6 转 ES5」。

5. 组件路径怎么写？ usingComponents 里的值是相对当前页面 json 的组件路径（如 ../../dist/button/index），按实际目录调整层级。

6. 哪里看完整组件文档？ 官方文档站：https://wuxui.com，更新日志见 https://wuxui.com/#/changelog。

七、跳转链接

• GitHub 仓库：https://github.com/wux-weapp/wux-weapp
• 官方文档：https://wuxui.com
• npm 包：https://www.npmjs.com/package/wux-weapp