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

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


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

  1. 初始化 npm

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

    bash 复制代码
    npm init -y
  2. 安装 Vant Weapp

    执行以下命令安装 Vant Weapp:

    bash 复制代码
    npm i @vant/weapp -S --production

2. 修改项目配置

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

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

    json 复制代码
    {
      "style": "v2"  // 删除这一行
    }
  2. 调整 project.config.json(可选)

    确保 miniprogramRoot 正确指向小程序目录(如 ./),避免 npm 构建失败:

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

3. 构建 npm 并启用 npm 模块

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

    • 点击 工具构建 npm
    • 确保勾选 使用 npm 模块(新版本默认支持,已无此选项)
  2. 检查构建结果

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


4. 引入并使用 Vant 组件

  1. 全局引入(推荐少量高频组件)

    app.json 中配置:

    json 复制代码
    "usingComponents": {
      "van-button": "@vant/weapp/button/index"
    }
  2. 局部引入(按需引入)

    在页面的 index.json 中配置:

    json 复制代码
    "usingComponents": {
      "van-button": "@vant/weapp/button/index"
    }
  3. 在 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 的安装、配置和使用。如需更详细的示例或特定组件的用法,可查阅官方文档或参考相关教程。

相关推荐
说私域3 小时前
技术赋能与营销创新:开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化路径研究
人工智能·小程序·开源
游戏开发爱好者816 小时前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld17 小时前
代驾小程序系统开发:引领出行行业数字化转型
小程序
Python大数据分析19 小时前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
yzx99101321 小时前
JS与Go:编程语言双星的碰撞与共生
java·数据结构·游戏·小程序·ffmpeg
说私域1 天前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的私域流量池用户运营研究
人工智能·小程序·开源
一只一只妖1 天前
uniapp小程序上传图片并压缩
小程序·uni-app
zkmall1 天前
小程序卡顿到丝滑体验:ZKmall开源商城性能优化与兼容修复实战指南
性能优化·小程序
CodeUp.1 天前
校园二手交易小程序的设计与实现
小程序
菜鸟起航ing1 天前
SaaS型小程序自动化发布解决方案
运维·小程序·自动化