微信小程序使用组件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",
效果图: