写过小程序的都有体会：业务逻辑没写几行，时间全耗在按钮、弹窗、表单这些基础件上。Vant Weapp 就是来解决这件事的——有赞开源的微信小程序组件库，18.4k Star，60 多个组件，MIT 协议，小程序圈子里的「标配 UI 库」。
这次我把整个源码仓库从头跑了一遍：一千来个开发依赖装完，官方全量单测 55 个套件全部通过，然后把 39 个常用组件的演示页逐个真实渲染出来截了图。好不好用，看完整篇你自己判断。
Vant Weapp 是什么来头
一句话：给微信小程序用的 UI 组件库，相当于网页开发里的 Element UI。
- 项目名：Vant Weapp（npm 包名
@vant/weapp） - 版本：v1.11.7（本文实测版）
- 协议：MIT，商用、改代码、闭源项目里用都行
- 出品方：有赞（Vant 家族还有 Vue 版、React 版、支付宝小程序版）
- GitHub：18.4k Star
- 文档：vant.pro/vant-weapp（全中文）
- 组件数：60+
2017 年 Vant 开源，现在已经是国内移动端组件库的第一梯队。小程序版最值钱的一点：它是微信原生自定义组件，不是框架。你不用改技术选型，原生小程序项目直接引进来就能用——这一点比什么功能都重要。
Vant Weapp 能干什么
对号入座：
- 正在写小程序：按钮、弹窗、表单、日历、上传这些基础件不用自己造了
- 赶工期/接外包：界面快速拼装，省下来的时间全花在业务逻辑上
- 团队协作：一套组件库全员使用，UI 风格天然统一
- 想学小程序自定义组件写法：Vant Weapp 的源码本身就是很好的学习范本，很多人是读它源码入门的
组件实拍
口说无凭。我把 39 个常用组件的演示页在本机真实渲染了一遍（不是官网截图，是跑起来截的），挑重点看：
先看全貌——组件库演示站的首页，所有组件按「基础 / 表单 / 反馈 / 展示 / 导航 / 业务」六大类归好：
Button 按钮：用得最多的组件。基础/朴素/圆角/细边框/危险/禁用/加载中，一个组件全状态覆盖：
Cell 单元格：列表页的骨架。带图标、带箭头、带跳转，做设置页、个人中心页全靠它：
Field 输入框：表单核心。自带校验、字数统计、清除按钮：
Calendar 日历：这个组件做得讲究，支持单选日期、选日期区间，能嵌在页面里也能当弹层用：
Dialog 对话框：确认/取消场景，标题、内容、按钮都可自定义：
ShareSheet 分享面板：底部弹出，用在「分享到微信/朋友圈」这类场景：
Uploader 文件上传：图片预览、删除、上传中/失败状态全都有：
Card 商品卡片：电商场景直接拿来用，当信息卡片也行：
Steps 步骤条：下单流程、进度引导的标配：
Tabbar 标签栏：底部导航，支持徽标、自定义图标：
Icon 图标：两三百个图标类，箭头、勾选、社交、编辑这些常用的都在：
实测过程
说明一下：我是从源码仓库测的（不是 npm 装一下那么简单），因为想验证这个组件库到底稳不稳。
实测环境：Windows + Node 22 + yarn。
- 安装依赖：一千来个开发依赖，官方源卡了几下（部分包 502），换成 npmmirror 源后一分多钟装完
- 品牌改名：把演示站的站名改成我自己的站「源码湾」——首页标题、logo、导航栏标题、分享标题 4 处。改完重新渲染，全部生效。这也侧面说明演示工程结构清晰，改起来不费劲
- 跑全量单测：官方用 miniprogram-simulate + jest 做组件测试，我完整跑了一遍——55 个测试套件、56 个用例、55 个快照，全部通过，耗时 41 秒
- 渲染截图：用官方测试基建把 39 个组件的演示页真实渲染成页面再截图，共 40 张
单测全过的意义：这项目在持续维护，改一个组件会跑全套测试，回归有保障——不是那种扔在那没人管的「开源弃坑」。
怎么用到自己的小程序里
两种方式，推荐第一种：
方式一：npm 安装（推荐）
- 在小程序项目根目录执行：
npm i @vant/weapp -S --production- 微信开发者工具顶部菜单：工具 → 构建 npm
- 在页面的 json 里引入要用的组件：
{
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
}- wxml 里直接用：
<van-button type="primary">按钮</van-button>方式二：不用 npm
把源码包里的 dist 目录拷贝到小程序项目里，json 里把路径指向它（路径按你自己项目结构写）：
{ "usingComponents": { "van-button": "/libs/vant/dist/button/index" } }我们整理的包里 dist 是构建好的，拷过去就能用。
几个实操提醒：
- 用哪个组件引哪个，不会把 60 个组件全打进包里，体积不用太担心
- 想换主题色：组件支持 CSS 变量，比如主按钮的颜色是
--button-primary-background-color；单个组件微调样式用组件的custom-class - icon 组件的字体文件走阿里 CDN（wxss 里能看到 at.alicdn.com 的地址）。正常联网无感，纯内网/离线环境需要自己把字体本地化
实话实说
优点：
- 组件覆盖全，日常界面需求九成能拼出来，不用自己造轮子
- 原生自定义组件，不改技术栈，原生小程序项目拿来就用
- MIT 协议商用免费，全中文文档，国内开发者友好
- 社区大、资料多：踩的坑基本都被人踩过，一搜就有答案——这可能是它最大的护城河
缺点也得说：
- 深度定制样式有点绕：小改用 CSS 变量还行，想把组件改成完全不一样的一套设计，不如自己写痛快
- 1.x 和 2.x 的混乱期：网上不少教程还是 0.x 时代的写法（那时候 npm 包名还叫
vant-weapp），照抄会报错——认准@vant/weapp和 v1 的文档 - icon 字体依赖 CDN，内网环境要自己处理
- 冷门组件的文档示例没有高频组件写得细，用到时可能得翻源码
常见问题
源码获取
上面测试用的完整包我整理好放夸克网盘了，免费取：
- 完整源码（Vant Weapp v1.11.7），含构建好的 dist——不想走 npm 的话，拷进项目直接用
- 原版 LICENSE（MIT）+ 免责声明 + 跳转文件
- 不含 node_modules，包体 1.3MB
上面记的这些坑，你自己走一遍也都会遇到。环境、依赖、配置、目录结构，一个都省不了。包里是我这边全部跑通之后才打的——要跳过这几步，直接拿下面这个。
两个小提醒：
- 建议先「转存到自己网盘」再下载——直接下载的链接容易失效，转存后就是你自己的了，随时能下；
- 手机上操作：点开链接 → 右下角「保存到网盘」→ 回夸克 App 的「我的网盘」里下载。
装之前先确认两件事：微信开发者工具（要预览组件必须有）、小程序基础库版本别太老（2.10 以上稳妥）。组件库本身不用数据库、不用服务器。
