微信小程序使用 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 的安装、配置和使用。如需更详细的示例或特定组件的用法，可查阅官方文档或参考相关教程。