Wux Weapp

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

Github stars Tracking Chart

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/

Main metrics

Overview
Name With Ownerwux-weapp/wux-weapp
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 4)
Platform微信公众平台, Mac, Windows
License:MIT License
所有者活动
Created At2017-01-10 03:12:26
Pushed At2024-04-25 10:22:39
Last Commit At2024-04-25 18:22:40
Release Count44
Last Release Namev3.11.3 (Posted on 2024-04-25 00:50:44)
First Release Namev1.1.8 (Posted on )
用户参与
Stargazers Count5.1k
Watchers Count153
Fork Count879
Commits Count665
Has Issues Enabled
Issues Count391
Issue Open Count29
Pull Requests Count18
Pull Requests Open Count1
Pull Requests Close Count17
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private