wux-weapp 介绍
wux-weapp一套组件化、可复用、易扩展的 微信小程序 UI 组件库
如何使用
通过 npm 安装,需要依赖 小程序 基础库 2.2.1 以上版本,同时依赖开发者工具的 npm 构建。具体详情可查阅 官方 npm 文档。
通过 GitHub 下载 Wux Weapp 的 代码 ,然后 将 dis t/ 目录拷贝到自己的项目中。按照如下的方式使用组件,以 Button 为例,其它组件在对应的文档页查看:
在 page.json 中引入组件
"usingComponents": {"wux-button": " dis t/button/index"}在 page.wxml 中使用组件
<wux-button size="small" />
<wux-button size="default" />
<wux-button size="large" />
组件库 文件 体积过大的问题
随着组件库越来越丰富, 文件 的体积也越来越大,某些时候我们可能只需要其中的 一个 或多个组件,如果直接引入整个组件库的话是不合适的,这时候就需要我们将要使用到组件给单独抽离出来,也很简单直接拷贝 dis t/ 目录下对应的组件即可,当然某些组件存在依赖关系,则抽离过程会相对复杂一些,以 ActionSheet、Badge、Button 为例。
demo/
|-actionsheet/
|-animation-group/
|-backdrop/
|-badge/
|-button/
|-helpers/
|-index.js
首先将 dis t/ 目录下对应组件(如 actionsheet)拷贝至 demo 目录;?
其次看其对应目录下index.json 是否存在依赖组件,若存在则一一拷贝;
然后看组件是否依靠 JavaScript 主动 调用 (查看对应文档可得知或存在index.js 文件 中),是则拷贝 index.js 文件 ,并 删除 不需要的组件引用;?
最后查看组件目录下 index.js 是否存在对帮助 方法 的引用,若存在则拷贝 helpers 目录(抑或直接拷贝不管是否存在引用)。
网站地址 : https://wux-weapp.github.io/wux-weapp-docs/#/
GitHub: https://github.com/wux-weapp/wux-weapp
网站描述: 组件化、可复用、易扩展的 微信小程序 UI 组件库
wux-weapp官方网站
官方网站: https://wux-weapp.github.io/wux-weapp-docs/#/
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。