微信小程序使用 Vant Weapp 组件库教程

不老刘2025-04-03 10:55

在微信小程序项目中使用 Vant 组件库（Vant Weapp）主要包括以下几个步骤：

1. 初始化项目并安装 Vant Weapp

初始化 npm

在项目根目录下运行以下命令，生成 package.json：
bash 复制代码
```
npm init -y
```
安装 Vant Weapp

执行以下命令安装 Vant Weapp：
bash 复制代码
```
npm i @vant/weapp -S --production
```

2. 修改项目配置

移除 app.json 中的 "style": "v2"

避免小程序基础组件样式冲突：
json 复制代码
```
{
  "style": "v2"  // 删除这一行
}
```

调整 project.config.json（可选）

确保 miniprogramRoot 正确指向小程序目录（如 ./），避免 npm 构建失败：

json 复制代码

{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}

3. 构建 npm 并启用 npm 模块

在微信开发者工具中构建 npm
- 点击工具 → 构建 npm
- 确保勾选 使用 npm 模块（新版本默认支持，已无此选项）
检查构建结果

构建成功后，项目目录下会生成 miniprogram_npm 文件夹，包含 Vant 组件。

4. 引入并使用 Vant 组件

全局引入（推荐少量高频组件）

在 app.json 中配置：
json 复制代码
```
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
```
局部引入（按需引入）

在页面的 index.json 中配置：
json 复制代码
```
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
```

在 WXML 中使用

html 复制代码

<van-button type="primary">主要按钮</van-button>

5. 特殊组件（如 Toast、Dialog）的注意事项

Toast 组件 需要在 wxml 中添加节点：
html 复制代码
```
<van-toast id="van-toast" />
```
并在 JS 中调用：
javascript 复制代码
```
Toast('提示内容');
```

6. 其他注意事项

版本兼容性：确保微信开发者工具版本 ≥ 2.2.10。
样式覆盖 ：使用 externalClasses 定义外部样式类。
官方文档 ：详细 API 参考 Vant Weapp 官方文档。
温馨提示：如果构建npm 始终不成功，可以在微信开发者工具中，先清除缓存(工具->清除缓存)，重新打开项目，重新构建 npm。

总结

以上步骤涵盖了 Vant Weapp 的安装、配置和使用。如需更详细的示例或特定组件的用法，可查阅官方文档或参考相关教程。