<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/vant-ui/vant" target="_blank">Vue 版</a>
</p>
---
### 介绍
Vant 是一个**轻量、可靠的移动端组件库**,于 2017 年开源。
目前 Vant 官方提供了 [Vue 2 版本](https://vant-contrib.gitee.io/vant/v2)、[Vue 3 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp),并由社区团队维护 [React 版本](https://github.com/3lang3/react-vant)和[支付宝小程序版本](https://github.com/ant-move/Vant-Aliapp)。
## 预览
扫描下方小程序二维码,体验组件库示例。注意:因微信审核机制限制,目前示例小程序不是最新版本,可以 clone 代码到本地开发工具预览
<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/issues)
- [设计资源](https://vant-contrib.gitee.io/vant/#/zh-CN/design)
- [更新日志](https://vant-contrib.gitee.io/vant-weapp/#/changelog)
- [官方示例](https://github.com/vant-ui/vant-demo)
## 核心团队
以下是 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/) |
| :-: | :-: | :-: | :-: | :-: | :-: |
| [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://avatars.githubusercontent.com/u/33708359?s=80&v=4)](https://github.com/Lindysen/) | [![JakeLaoyu](https://avatars.githubusercontent.com/u/16181940?s=80&v=4)](https://github.com/JakeLaoyu/) | [![landluck](https://avatars.githubusercontent.com/u/27060081?s=80&v=4)](https://github.com/landluck/) | [![wjw-gavin](https://avatars.githubusercontent.com/u/19986739?s=80&v=4)](https://github.com/wjw-gavin/) | [![inottn](https://avatars.githubusercontent.com/u/18509404?s=80&v=4)](https://github.com/inottn/) | [![zhousg](https://avatars.githubusercontent.com/u/15833290?s=80&v=4)](https://github.com/zhousg/) |
| :-: | :-: | :-: | :-: | :-: | :-: |
| [Lindysen](https://github.com/Lindysen/) | [JakeLaoyu](https://github.com/JakeLaoyu/) | [landluck](https://github.com/landluck/) | [wjw-gavin](https://github.com/wjw-gavin/) | [inottn](https://github.com/inottn/) | [zhousg](https://github.com/zhousg/) |
## 贡献者们
感谢以下小伙伴们为 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)协议,请自由地享受和参与开源。
没有合适的资源?快使用搜索试试~ 我知道了~
微信小程序-竖向步骤条组件
共1479个文件
js:294个
ts:291个
wxss:237个
需积分: 0 0 下载量 119 浏览量
2024-01-26
14:16:10
上传
评论
收藏 827KB ZIP 举报
温馨提示
功能比Vant Weapp的更丰富,并提供插槽使步骤条内容更丰富。
资源推荐
资源详情
资源评论
收起资源包目录
微信小程序-竖向步骤条组件 (1479个子文件)
0081a5788b82e2d681e6b7e0ca1cfd60387f81 343B
10443c93df190ae8b78b377121d6ef1199fea7 132B
10de0f70bcf712a11d46253273d106aed6eae6 182B
11997bdb98f3eaa2f92e30359dfea06c4983b4 46B
132817a339e20b55bc0574a1a07c5816cbc1a2 49B
1969cfaab3a0dd7ed4d27281c0d6fcfef5211f 132B
2eaa08125365dfc1a1036c3a25a1a033f77497 198B
35af0699ccec004cbe685ef938cd2d63ea7037 43B
36e402a02621635cb93c4faf79a1a7551073c0 631B
3b11425cc0f880cfae942988e533ce895a5a1d 160B
3e16c84607bee27fc23b45d49b2360b505087d 200B
42b9d8c86b946f8072cff6759fb4174ad03580 161B
46ecdd8d858a34a83dff7ada438730c142db70 38B
4c08dee142d701f68aae1ad6ae536b1de7746b 163B
505cee92afd10f48078d22b1bc4dc37ddc6e9e 350B
580d317132f8a992a5ea5dd935cc9328801ebe 188B
5cf29b733d8be0d8323b4ef21f8362f0bdffc2 81B
60ecef410dc13b39bdcb0cce61c183f5e6553c 351B
7b3397f4f0e7989c7749797ba884d80922ff6c 681B
8c5646b1352a7f24ab641b12ea7cfbe307dcfb 68B
8e4f9de978f7e47942e4dfbc83568aeacb52c2 294B
9869387535359850dbd703da8904596facdb82 137B
9d32a175f662bcc3e923a3fca98617338797a9 67B
9dd556bae8a9a7ccd2af2adf3285d44132a1e6 319B
9f107fa9097bcc5666da6f112df6a45b5eba4f 341B
ad3842ffca7ffe62b5ac20e4e67c5b92782e6a 193B
b8de77e44548a64e757597deb76f4550d883ab 68B
be492149f7b0519c1e901759e35617893cb919 73B
c6fc9ce35b7d02e031b1e8f4636147321dedc1 161B
COMMIT_EDITMSG 6B
config 237B
d57c47fc86716c337dee0e196bdbbac27abfe5 289B
db4bd29642772c4977f2d2cf2e5ec75e49cadd 362B
dd35e48cf77688245dd6ccee54a018930dfa19 91B
description 73B
e0a59dd1849d0c58609a7bf788c31e7de938d5 177B
exclude 240B
fd5eabefdec476b5de8aaeb122e500333454fe 440B
FETCH_HEAD 0B
.gitignore 31B
HEAD 489B
HEAD 23B
index 2KB
index.js 13KB
index.js 13KB
index.js 12KB
index.js 12KB
index.js 12KB
index.js 12KB
index.js 12KB
index.js 10KB
index.js 10KB
index.js 9KB
index.js 9KB
index.js 8KB
index.js 8KB
index.js 8KB
index.js 8KB
index.js 8KB
index.js 8KB
index.js 7KB
index.js 7KB
index.js 7KB
index.js 7KB
index.js 7KB
index.js 7KB
index.js 7KB
index.js 6KB
index.js 6KB
index.js 6KB
index.js 6KB
index.js 6KB
index.js 6KB
index.js 6KB
index.js 6KB
transition.js 5KB
transition.js 5KB
index.js 5KB
index.js 5KB
index.js 5KB
index.js 5KB
index.js 5KB
index.js 5KB
transition.js 5KB
utils.js 5KB
utils.js 5KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
共 1479 条
- 1
- 2
- 3
- 4
- 5
- 6
- 15
资源评论
又是江滨
- 粉丝: 0
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功