Weixin Weapp

微信小程序自定义 UI 组件

快速上手

使用之前

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

如何使用

通过 npm 安装，需要依赖小程序基础库 2.2.1 以上版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。
通过 GitHub 下载 Wux Weapp 的代码，然后将dist/ 目录拷贝到自己的项目中。按照如下的方式使用组件，以 Badge 为例，其它组件在对应的文档页查看：

在 page.json 中引入组件

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

在 page.wxml 中使用组件

<wux-badge count="22" />
<wux-badge count="44" />
<wux-badge count="66" />

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

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

demo/
  |-actionsheet/
  |-animation-group/
  |-backdrop/
  |-badge/
  |-button/
  |-helpers/
  |-index.js

首先将 dist/ 目录下对应组件（如 actionsheet）拷贝至 demo 目录；
其次看其对应目录下 index.json 是否存在依赖组件，若存在则一一拷贝；
然后看组件是否依靠 JavaScript 主动调用（查看对应文档可得知或存在 index.js 文件中），是则拷贝 index.js 文件，并删除不需要的组件引用；
最后查看组件目录下 index.js 是否存在对帮助方法的引用，若存在则拷贝 helpers 目录（抑或直接拷贝不管是否存在引用）。

预览

您可以扫描下方的小程序码体验或用微信web开发者工具打开 example 目录（请注意，是 example 目录，不是整个项目）。

讨论组

您可以扫描添加下方的小助手微信并备注 Wux Weapp 进交流群。

赞助

作者营养快线QQ:812144991@qq.com(`・ω・´)

贡献

有任何意见或建议都欢迎提 issue

License MIT

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

KeenTeam1990/wechatApp