微信小程序使用组件vant

微信小程序使用组件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="onClickButton"
  />
  <van-goods-action-button text="立即购买" bind:click="onClickButton" />
</van-goods-action>

效果：
这是怎么回事呢？

注意

在app.json中删除"style": "v2",即可

  "style": "v2",

效果图：