微信小程序使用组件vant

最新推荐文章于 2024-09-08 10:03:03 发布

js-纪梵希

最新推荐文章于 2024-09-08 10:03:03 发布

阅读量502

点赞数 1

CC 4.0 BY-SA版权

文章标签：小程序

本文链接：https://blog.youkuaiyun.com/jfx_jfx/article/details/119908648

本文介绍了如何在微信小程序中使用 vant 组件库。首先通过 npm 安装 vant for weapp，然后将 vant 的 lib 文件夹放入小程序的 component 目录，最后在需要使用 vant 的页面 JSON 文件中引入组件。注意在 app.json 中可能需要做相应的配置调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序使用组件vant

首先下载vant

eg:在桌面新建一个文件夹vant，打开终端 npm init 回车…
接着npm install @vant/weapp
下载后在桌面找到vant文件夹打开，点击node_modules 、@vant 、 weapp、lib 即可
（vant\node_modules@vant\weapp\lib）

使用vant
在需要使用的页面中引入
eg:将lib 放入项目文件夹component中，

需使用vant的文件的json :

**json **
{
  "usingComponents": {
    "van-goods-action": "../../../component/van/goods-action/index",
    "van-goods-action-icon": "../../../component/van/goods-action-icon/index",
    "van-goods-action-button": "../../../component/van/goods-action-button/index"
  }
}

**wxml**
<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />
  <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" />
  <van-goods-action-button
    text="加入购物车"
    type="warning"
    bind:click="onCli