Wux Weapp
一套组件化、可复用、易扩展的微信小程序 UI 组件库
快速上手
使用之前
在开始使用之前,你需要先阅读 微信小程序自定义组件 的相关文档。
如何使用
- 通过
npm
安装,需要依赖小程序基础库2.2.1
以上版本,同时依赖开发者工具的npm
构建。具体详情可查阅 官方 npm 文档。 - 通过 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/