一介布衣

🧭 快速导航

Wux Weapp 组件库指南 ​

项目地址：https://github.com/wux-weapp/wux-weapp
文档/示例：见仓库 README 与示例小程序
关联清单：https://github.com/justjavac/awesome-wechat-weapp

Wux Weapp 是一套微信小程序自定义组件库，组件前缀通常为 wux-，涵盖按钮、表单、弹出层、选择器与列表等常用场景。

🎯 文章目标 ​

  • 安装并按需引入 Wux 组件
  • 在页面中完成基础交互与事件绑定
  • 进行样式与主题的简单覆盖
  • 掌握常见问题与调试思路

⚙️ 安装与引入 ​

bash
npm i wux-weapp -S
# 微信开发者工具：工具 -> 构建 npm

在页面 JSON 中声明 usingComponents（以 Button、Dialog 为例）：

json
// pages/index/index.json
{
  "usingComponents": {
    "wux-button": "wux-weapp/button/index",
    "wux-dialog": "wux-weapp/dialog/index"
  }
}

页面示例：

xml
<!-- pages/index/index.wxml -->
<view class="container">
  <wux-button type="balanced" bind:click="onOpen">打开对话框</wux-button>

  <wux-dialog id="wux-dialog" title="温馨提示" content="这是一段对话框内容" />
</view>
js
// pages/index/index.js
import { $wuxDialog } from 'wux-weapp/index'

Page({
  onOpen() {
    $wuxDialog().alert({
      title: '温馨提示',
      content: '这是一段对话框内容',
      onConfirm() {
        wx.showToast({ title: '确认' })
      }
    })
  }
})

提示：不同版本的 API 写法略有差异，具体以仓库示例与文档为准。

🎨 样式与主题 ​

  • 全局样式覆盖：在 app.wxss 或自定义 theme.wxss（后引入）中覆盖常用色板与间距。
  • 局部覆盖：仅在页面样式中覆盖对应组件的类名，避免无关页面受影响。
  • 组件属性优先：若组件 props 能满足主题需求，优先使用 props，再考虑样式覆盖。

🏗️ 工程实践 ​

  • 按需引入：仅在使用页面注册组件；大体量页面置于分包，减少主包压力。
  • 与其他库共存：与 Vant/WeUI/Lin UI 共存时，需统一视觉规范；避免同功能组件混搭。
  • 交互统一：对话框/Toast/Loading 建议统一封装调用，避免多套 API 并存。

🧪 常见问题 ​

  • 构建 npm 报错/路径不对：删除 miniprogram_npm 目录并重新构建；检查组件路径是否匹配版本。
  • 事件不触发：确认 bind:click 或组件自定义事件名是否正确；注意冒泡/捕获与自定义事件差异。
  • 样式错位：检查样式覆盖顺序；在 iOS/Android 真机上分别验证。

✅ 适用场景 ​

  • 业务表单、弹窗与选择器等高频组件
  • 需要快速搭建页面的中小型项目
  • 与现有组件库混用但保留一致体验

🔗 参考 ​

📊 总结 ​

Wux Weapp 以轻量与组件覆盖见长。通过按需引入与统一的交互封装，可以快速构建一致的 UI 与交互体验。