官网：https://vant-contrib.gitee.io/vant-weapp/#/intro
Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。
具体使用，参考官网的"快速上手"，下面的步骤在官网的基础上有些改进，完全按官网走，会跳坑
vant weapp使用步骤
步骤一： 通过npm安装
在小程序根目录打开终端
npm init -y
npm i @vant/weapp -S --production
步骤二： 修改 app.json
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
步骤三： 修改project.config.json
在setting选项中，找到"packNpmManually" 和"packNpmRelationList",并修改为
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
]
步骤四 构建npm包
- 打开微信开发者工具，点击 工具 -> 构建 npm，
- 开发者工具-> 详情->本地设置->勾选"使用npm模块"
官网引导的使用步骤（有坑）
以Picker选择器为例，找到官网相应组件的文档如下
- 引入
在app.json或index.json中引入组件
有的组件示例引入地址为"@vant/weapp/dist/picker/index",会报错，要把dist去掉
"usingComponents": {
"van-picker": "@vant/weapp/picker/index"
}
- 基础用法中文档的坑
下面官网的代码一定要分清楚，组件标签的部分是要放在wxml中，import及后面代码放在js中
import的地址不加修改会错
用了Toast组件，但引入的方式不完善
<van-picker columns="{{ columns }}" bind:change="onChange" />
import Toast from 'path/to/@vant/weapp/dist/toast/toast';
Page({
data: {
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
},
onChange(event) {
const { picker, value, index } = event.detail;
Toast(`当前值：${value}, 当前索引：${index}`);
},
});
正确的使用步骤
- 在index.json中引入所有相关组件,van-toast也要引入
{
"usingComponents": {
"van-picker": "@vant/weapp/picker/index",
"van-toast": "@vant/weapp/toast/index"
}
}
- wxml
除了<van-picker>,也要引入<van-toast>
<van-picker
show-toolbar
title="标题"
columns="{{ columns }}"
bind:cancel="onCancel"
bind:confirm="onConfirm"
/>
<van-toast id="van-toast" />
- js
import的地址要改为下面的地址
import Toast from '@vant/weapp/toast/toast';
Page({
data: {
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
},
onConfirm(event) {
const { picker, value, index } = event.detail;
Toast(`当前值：${value}, 当前索引：${index}`);
},
onCancel() {
Toast('取消');
},
});
