Wux Weapp

一套组件化、可复用、易扩展的微信小程序 UI 组件库。(A set of componentized, reusable, and easily extensible WeChat app UI components library.)

Github星跟踪图

Wux Weapp

一套组件化、可复用、易扩展的微信小程序 UI 组件库

npm version

快速上手

使用之前

在开始使用之前,你需要先阅读 微信小程序自定义组件 的相关文档。

如何使用

  1. 通过 npm 安装,需要依赖小程序基础库 2.2.1 以上版本,同时依赖开发者工具的 npm 构建。具体详情可查阅 官方 npm 文档
  2. 通过 GitHub 下载 Wux Weapp 的代码,然后 将 dist/ 目录拷贝到自己的项目中。按照如下的方式使用组件,以 Button 为例,其它组件在对应的文档页查看:
  • dist/ - 压缩版(ES5)
  • example/dist/ - 未压缩版(ES6,使用时需要开启 ES6 转 ES5,位于开发者工具右上角-详情-本地配置)

在 page.json 中引入组件

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

在 page.wxml 中使用组件

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

组件库文件体积过大的问题

随着组件库越来越丰富,文件的体积也越来越大,某些时候我们可能只需要其中的一个或多个组件,如果直接引入整个组件库的话是不合适的,这时候就需要我们将要使用到组件给单独抽离出来,也很简单直接拷贝 dist/ 目录下对应的组件即可,当然某些组件存在依赖关系,则抽离过程会相对复杂一些,以 ActionSheet、Badge、Button 为例。

demo/

主要指标

概览
名称与所有者wux-weapp/wux-weapp
主编程语言JavaScript
编程语言JavaScript (语言数: 4)
平台微信公众平台, Mac, Windows
许可证MIT License
所有者活动
创建于2017-01-10 03:12:26
推送于2024-04-25 10:22:39
最后一次提交2024-04-25 18:22:40
发布数44
最新版本名称v3.11.3 (发布于 2024-04-25 00:50:44)
第一版名称v1.1.8 (发布于 )
用户参与
星数5.1k
关注者数153
派生数879
提交数665
已启用问题?
问题数391
打开的问题数29
拉请求数18
打开的拉请求数1
关闭的拉请求数17
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?