<p align="center">
<img alt="logo" src="https://img.yzcdn.cn/vant/logo.png" width="120" style="margin-bottom: 10px;">
</p>
<h3 align="center">轻量、可靠的小程序 UI 组件库</h3>
<p align="center">
<img src="https://img.shields.io/npm/v/@vant/weapp.svg?style=for-the-badge" alt="npm version" />
<img src="https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge&color=#4fc08d" />
<img src="https://img.shields.io/npm/dt/@vant/weapp.svg?style=for-the-badge&color=#4fc08d" alt="downloads" />
<img src="https://img.shields.io/npm/dm/@vant/weapp.svg?style=for-the-badge&color=#4fc08d" alt="downloads" />
</p>
<p align="center">
🔥 <a href="https://vant-contrib.gitee.io/vant-weapp">文档网站(国内)</a>
🌈 <a href="https://youzan.github.io/vant-weapp">文档网站(GitHub)</a>
🚀 <a href="https://github.com/youzan/vant" target="_blank">Vue 版</a>
</p>
---
### 介绍
Vant 是**有赞前端团队**开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。
目前 Vant 官方提供了 [Vue 2 版本](https://vant-contrib.gitee.io/vant)、[Vue 3 版本](https://vant-contrib.gitee.io/vant/v3)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp),并由社区团队维护 [React 版本](https://github.com/mxdi9i7/vant-react)和[支付宝小程序版本](https://github.com/ant-move/Vant-Aliapp)。
## 预览
扫描下方小程序二维码,体验组件库示例:
<img src="https://img.yzcdn.cn/vant-weapp/qrcode-201808101114.jpg" width="200" height="200" style="margin-top: 10px;" >
## 使用之前
使用 Vant Weapp 前,请确保你已经学习过微信官方的 [小程序简易教程](https://developers.weixin.qq.com/miniprogram/dev/framework/) 和 [自定义组件介绍](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)。
## 安装
### 方式一. 通过 npm 安装 (推荐)
小程序已经支持使用 npm 安装第三方包,详见 [npm 支持](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm)
```bash
# 通过 npm 安装
npm i @vant/weapp -S --production
# 通过 yarn 安装
yarn add @vant/weapp --production
# 安装 0.x 版本
npm i vant-weapp -S --production
```
### 方式二. 下载代码
直接通过 git 下载 Vant Weapp 源代码,并将 `dist` 目录拷贝到自己的项目中。
```bash
git clone https://github.com/youzan/vant-weapp.git
```
## 使用组件
以按钮组件为例,只需要在 json 文件中引入按钮对应的自定义组件即可
```json
{
"usingComponents": {
"van-button": "/path/to/vant-weapp/dist/button/index"
}
}
```
接着就可以在 wxml 中直接使用组件
```html
<van-button type="primary">按钮</van-button>
```
## 在开发者工具中预览
```bash
# 安装项目依赖
npm install
# 执行组件编译
npm run dev
```
打开[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html),把`vant-weapp/example`目录添加进去就可以预览示例了。
PS:关于 `van-area` Area 省市区选择组件,地区数据初始化可以直接在云开发环境中导入`vant-weapp/example/database_area.JSON` 文件使用。
## 基础库版本
Vant Weapp 最低支持到小程序基础库 2.6.5 版本。
## 链接
- [更新日志](https://github.com/youzan/vant-weapp/blob/dev/docs/markdown/changelog.md)
- [意见反馈](https://github.com/youzan/vant-weapp/issues)
- [加入我们](https://job.youzan.com)
- [Vant Vue 版](https://github.com/youzan/vant)
## 核心团队
以下是 Vant 和 Vant Weapp 的核心贡献者们:
| [![chenjiahan](https://avatars.githubusercontent.com/u/7237365?s=80&v=4)](https://github.com/chenjiahan/) | [![cookfront](https://avatars.githubusercontent.com/u/4829465?s=80&v=4)](https://github.com/cookfront/) | [![w91](https://avatars.githubusercontent.com/u/2599455?s=80&v=4)](https://github.com/w91/) | [![pangxie1991](https://avatars.githubusercontent.com/u/5961240?s=80&v=4)](https://github.com/pangxie1991/) | [![rex-zsd](https://avatars.githubusercontent.com/u/8767877?s=80&v=4)](https://github.com/rex-zsd/) | [![nemo-shen](https://avatars.githubusercontent.com/u/13480805?s=80&v=4)](https://github.com/nemo-shen/) | [![Lindysen](https://avatars.githubusercontent.com/u/33708359?s=80&v=4)](https://github.com/Lindysen/) | [![nemo-shen](https://avatars.githubusercontent.com/u/16181940?s=80&v=4)](https://github.com/JakeLaoyu/) |
| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
| [chenjiahan](https://github.com/chenjiahan/) | [cookfront](https://github.com/cookfront/) | [wangnaiyi](https://github.com/w91/) | [pangxie](https://github.com/pangxie1991/) | [rex-zsd](https://github.com/rex-zsd/) | [nemo-shen](https://github.com/nemo-shen/) | [Lindysen](https://github.com/Lindysen/) | [JakeLaoyu](https://github.com/JakeLaoyu/) |
## 贡献者们
感谢以下小伙伴们为 Vant Weapp 发展做出的贡献:
<a href="https://github.com/youzan/vant-weapp/graphs/contributors">
<img src="https://opencollective.com/vant-weapp/contributors.svg?width=890&button=false" alt="contributors">
</a>
## 开源协议
本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)协议,请自由地享受和参与开源。
没有合适的资源?快使用搜索试试~ 我知道了~
资源详情
资源评论
资源推荐
收起资源包目录
微信小程序01-实现了首页,还有分类,用的微信小程序vant组件库 (1582个子文件)
01956a79dd4545bdaaf2f09b03c978824264ee 53B
02add20b581be471b8d17f887b8e8337070546 194B
0351f5d14f9eb567bddef409cd15c5614862c2 5KB
06c08a115df32ba0aec6ef11c3c1837304c9f0 299B
0993fa122f47d9f120ec550a8477519bd531a4 508B
0aa8ca42b8f06c8f1289182cf08a669c0a52ac 3KB
0f933e567fe0c014ef8c37613dfe0a527d562d 46B
10aee956e48e136de4bb238275ae06114ebb75 44B
1780e74c53992e2b32bdd7365e2dea69176c86 379B
1ade59b0daf737b1b54298085235bdc5109368 116B
1ae7e685d7c16c21fe2a22ed520cdcab84b771 550B
2070884c617c58f604ffcccc3fda912e3fe835 3KB
217caf4e8072385a1f69efdbc305c5277c4177 134B
2207c8e612eda1077d76566a608c934d490479 49B
22276b8d864ac46afb887e8e9d0d5609d67ad8 62B
23b246633fb8c0de84b0da48e363389655e631 60B
2478a7827c91fea41f283c69f8b1c6dfd6537d 207B
27227cc528cb06e1163c6b149408348e2f10c1 50B
2731e06ce3a47a4f41b3e138a9b7f909d18954 134B
2a590c6b39fed38739414d2c44f3338338b211 135B
2a8ca42966f892c7e6469e70c7b5991647fd91 154B
2dbd4f1bfa56d77a392197b6d6efa3db020b2c 57B
2eba5f98e835cb8f2c243de6d93b6b53c84726 701B
2ff7b46993577334c224346b9076e2b4943099 85B
33dd9c51c91fcd68c3a3648f013ff6e3528d5a 58B
35af0699ccec004cbe685ef938cd2d63ea7037 43B
38dfdf0b2dead74d1f65ea713696a0d691b220 62B
3ccb2052757a93b5c920816acb8ff98193b712 58B
41d6aac449fd2aaa9976d28ef285b88e311d9d 135B
431e18ec807cf0fb4596ef26cd2db0bca691cd 403B
45a1efcf6913d65499defb219d9d7f13c0e561 74B
4699885a7fc36b4e1b4c34f75d1393fc664a7a 47B
490d1d74ae10784c032d06f0b145d022904056 198B
49c0ec50bae4c0bea56f9bb72401ab89e2d5ba 212B
4bc2ce26ab9b55a21cbb069dcf084a8418dffd 261B
4c5e446203978103f0e700b5406a826eb223c5 169B
4d3a74ef97065165d1e89261e64129a09baabc 189B
54cd554283f2f171e09c96c94470bc84c8b2ee 59B
56be339cc296da762439a428472574b64cddb6 221B
5887ded459f2ca7042f2056c25b0f22234730b 644B
593ab32c4451868beb957715228ab446bfb704 134B
594efaac6af1700be71ea1893336e700fdcb0b 134B
5d0defca3f5dd4f62e039973844a554e4a73a9 378B
5fdc733fa71a09058b5c367099e39f9b509eda 43B
60ee51e113d87440a9dd03208dcc5d2a17512e 135B
616dd5346895721e6c3696823938bfc0296567 52B
66f014567620d5ebdd33fbc4e74b53a9b73761 59B
68f93b0b22ed8d1cb3f1e98bd812dd6ca6d0e6 65B
6b03930f6dcdd2774aa8c725ce3f1345f12f8c 376B
6cf353dd2fee55f947e35c44cdc2a7557cd77b 91B
6d68dfc37a0044696d7783ab8e9a30392e2040 7KB
7393fa01be5225ea449ebd1e25c1be54dcad62 376B
787bea4a5d98ffb6e60e232673a9cd38c9407e 43B
7cca5324af7f0ec6a97f0de405bde45465dda8 3KB
80b8d7b863112b2deeefd92aa97dad0a1a895d 403B
810944cf5c23ef4cb389895c314366f716f55b 376B
818180a47c3c60ef18a22ec816a95b9fb68058 44B
86c5f46ec2ad58eb6320a1c82a3dfb82952935 162B
88df8cbf4c0f34755e20eb136646517dd01e2f 85B
906fc0f24db09ab088ca8c6c6e99f5b2515411 117B
97c8c07871774110bd1a8bb88e9ffd36542846 134B
9bfd5cd93644d64e31e450d04fdc45c247cf1b 380B
9ffda6fd89f23c0fbf4e295b24cb9fedf2fe92 159B
a23de58697729a65e1e5f21b71f7a05b230bf6 58B
a59dc7cce91ee0ea229d89964d754ea59cb881 379B
ac051e1de0cc29b2fb68959c8b2c96b926e730 257B
ad41d8df115cd02339dbe1e145c3c0505bd1df 135B
ad49a6aab9ed4a157b469950a0b358de7ba831 43B
adaa0b67c478fe9f97a475127406ac7be70ce6 376B
b314afbbbfdb781e06738ba895c753a6810b47 403B
b371a9b18b7a25955c580aa0832e6d989555f0 487B
b3bdf8c82d5cf86c9cf847cffce1d16e9eb230 42B
b4948d986f77623438f4c38859f7913f349ff7 381B
b6d1bb8654281fd76ac7fb1cd7d47c2d19fc03 47B
b80f2ef516c6eff59a8328c8e291582e2df980 6KB
b83b08859355b01d0d6e88174a1009d785bd3b 377B
b904118410c10fe98fbfc15d35f98fa0e2cf71 8KB
b93e71784796b18d189ef86f350ec5e1820e56 142B
bedc7c89aff2bfdfab8c00345ce60566d488af 135B
c21c2edde4ae4a54eb9ccd2290310be984347e 162B
c574796d8e15936db600510e7fe94cd91bdd11 134B
c574aa7c9381c93b3bd935b7d26bd049679fa7 376B
c9103790ddcf6baffc9626867bae632df1e43d 8KB
c9b1b2f500db8dc69bd6a5582b73c7dc231748 134B
cae0dd472166638747e04fb8779b7d1e83beb3 58B
ce3eabc2483f8d6e51397d4fd238bcee60540e 133B
cfaaf80c404eb97d3cf8b6277ec15f37e6905e 54B
config 309B
d1ac8ff142a420acf5a9ebc556f29fc722958f 53B
d2aae006bccea715e1ee7ca9ddd01b8c91c67e 64B
d3b3d88ef800eb831f7aff9c90419cb074e1d2 186B
d516551489604aa69d7341fd592f4a5eeb1829 548B
d59ddb6466323f2f8609b5d84d425da49343ed 78B
da4d26c0601e4e3a18d0cc432e0632cc608df9 377B
db28e66a02c17b36647d0c48b846bada1dd2f0 366B
description 73B
e6d2e1234b9aee856df8782923dcadb98beaf5 45B
e7e314c3765aca58e7f913af6c63db8a2abc24 333B
exclude 240B
f07620ae1f1229e3e10814c61edc8cb06c1b56 61B
共 1582 条
- 1
- 2
- 3
- 4
- 5
- 6
- 16
JSONP$
- 粉丝: 37
- 资源: 50
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0