微信小程序使用vant组件及注意事项!

使用vant 小程序版本时,官方的文档有些步骤不用

1、npm安装:(minprogram 文件夹点击右键:外部终端窗口打开,粘贴下面的就行)
npm i @vant/weapp -S --production

2、将 app.json 中的 “style”: “v2” 删除,切记:清除全部缓存,否则会出现不生效的现象

3、官方的第三步:修改 project.config.json ,这一步不用操作也可以!

4、构建npm包 这样就可以了

5、然后按照文档的使用即可!

注意:
1、样式显示:不知道是我电脑的问题还是其他什么问题,每次都要清除缓存,样式才能正常显示!
2、引入组件:这个要注意一下,官方文档引入组件时有时仅仅是引入使用的中某一个,如:日期

<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" />
<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />

只引入 calendar 时不显示

"usingComponents": {
  "van-calendar": "@vant/weapp/calendar/index"
}

仔细观察还有一个cell,所以必须同时引入

"usingComponents": {
  "van-calendar": "@vant/weapp/calendar/index",
  "van-cell": "@vant/weapp/cell/index"
}

到此,才能正常显示!

一直踩坑!

2023.03.18

你可能感兴趣的:(微信小程序,前端)