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

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

---

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

1. 初始化 npm

   在项目根目录下运行以下命令，生成 package.json：

   npm init -y

2. 安装 Vant Weapp

   执行以下命令安装 Vant Weapp：

   npm i @vant/weapp -S --production

---

2. 修改项目配置

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

   避免小程序基础组件样式冲突：

   {
     "style": "v2"  // 删除这一行
   }

2. 调整 project.config.json（可选）

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

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

---

3. 构建 npm 并启用 npm 模块

1. 在微信开发者工具中构建 npm

   • 点击 工具 → 构建 npm
   • 确保勾选 使用 npm 模块（新版本默认支持，已无此选项）

2. 检查构建结果

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

---

4. 引入并使用 Vant 组件

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

   在 app.json 中配置：

   "usingComponents": {
     "van-button": "@vant/weapp/button/index"
   }

2. 局部引入（按需引入）

   在页面的 index.json 中配置：

   "usingComponents": {
     "van-button": "@vant/weapp/button/index"
   }

3. 在 WXML 中使用

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

---

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

• Toast 组件 需要在 wxml 中添加节点：

  <van-toast id="van-toast" />

  并在 JS 中调用：

  Toast('提示内容');

---

6. 其他注意事项

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

---

总结

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