链氪巴士
  1. 首页
  2. 站点导航
  3. 文章
  4. 快讯
  5. 软件
  6. 书刊
  7. 关于

wux-weapp:微信小程序UI组件库

wux - weapp是一套组件化、可复用、易扩展的微信小程序UI组件库。它提供多种安装方式,如npm安装(有相关依赖要求)和下载代码。使用时可按文档操作,以Button组件为例展示了在page.json和page.wxml中的使用步骤。对于组件库文件体积过大问题有解决办法,可...

访问官网 →

【Github】项目名:wux – weapp – 微信小程序UI组件库

项目简介

wux – weapp是一套组件化、可复用、易扩展的微信小程序UI组件库。它提供了多种安装和使用方式,支持通过npm安装(需依赖小程序基础库2.2.1以上版本且依赖开发者工具的npm构建),也可通过下载代码使用,还能选择需要的模块进行量身定制。

安装方式

1. 通过npm安装

#Using npm npmi wux – weapp – S — production #Using yarn yarn add wux – weapp — production

2. 通过下载代码

通过GitHub下载WuxWeapp的代码,然后将packages/lib/目录拷贝到自己的项目中(packages/lib/ – 压缩版(ES5),packages/es/ – 未压缩版(ES6,使用时需要开启ES6转ES5,位于开发者工具右上角 – 详情 – 本地配置)),示例: git clone https://github.com/wux – weapp/wux – weapp.git cd wux – weapp

3. 选择需要的模块,量身定制

参考量身定制部分内容。

使用方式

以Button为例,先在page.json中引入组件”usingComponents”:{“wux – button”:”../../dist/button/index”},然后在page.wxml中使用组件,如: <wux – button size = “small”>Button</wux – button> <wux – button size = “default”>Button</wux – button> <wux – button size = “large”>Button</wux – button>

组件库文件体积过大的解决方案

如果直接引入整个组件库不合适时,可以使用量身定制功能自动抽离组件(官方推荐),也可手动抽离组件(直接拷贝packages/目录下对应的组件,但某些组件存在依赖关系时,抽离过程会相对复杂些)。

项目总结

wux – weapp为微信小程序开发提供了方便的UI组件库,有多种安装和使用方式以及解决文件体积过大的方法。希望大家在使用过程中有任何想法都可以在下方留言参与讨论。

项目地址

GitHub链接直达