# weapp-components-showcase

**Repository Path**: bluepspower/weapp-components-showcase

## Basic Information

- **Project Name**: weapp-components-showcase
- **Description**: 微信小程序 - 自定义 UI 组件 整理集合，只整理收录高质量的组件，所有组件代码已经压缩过达到最小化大小，可以直接使用。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-11-29
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# weapp-components-showcase

## 项目介绍
微信小程序 - 自定义 UI 组件 整理集合，只整理收录高质量的组件，所有组件代码已经压缩过达到最小化大小，可以直接使用。

# 快速上手

## 使用之前

在开始使用之前，你需要先阅读 [微信小程序自定义组件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/) 的相关文档。

## 如何使用

1. 通过码云 [Gitee](https://gitee.com/bluepspower/weapp-components-showcase) 下载 `weapp-components-showcase` 的代码，然后 将`dist/` 目录拷贝到自己的项目中。按照如下的方式使用组件，以 odometer 数字滚动动画组件 为例，其它组件在对应的文档页查看：

### 在 page.json 中引入组件

```json
"usingComponents": {
    "odometer": "/dist/odometer/index"
}
```

### 在 page.wxml 中使用组件

```html
<odometer id="odometer" odometer-class="odometer" value-class="odometer-value" />
```

## 赞助

如有帮助，欢迎赞助。收到赞助款后，我会及时更新赞助墙

<p>
  <img src="https://nikoni.top/images/alipay-qrcode.png" width="200" height="220" style="display:inline;"/>
  <img src="https://nikoni.top/images/wechatpay-qrcode.png" width="200" height="220" style="display:inline;"/>
  <img src="https://nikoni.top/images/wechat-reward-qrcode.png" width="200" height="220" style="display:inline;"/>
</p>

## 贡献

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

## License

MIT