uni-app中使用vant-weapp,记录

5,925 阅读2分钟

最近,要做一个小程序的项目。这个小程序是基于 微信小程序原生+vant-weapp,但是自己对微信小程序不熟悉,而且,也不想专门花时间去学微信的那一套,于是网上找了找,很多都是建议使用uni-app来进行微信小程序的开发。

在uni-app中使用vant-weapp,遇到了一些问题,记录下。

第一:在uni-app中引入vant-weapp

方式1: 在vant-weapp-github 下载最新的代码,并引入使用

参照链接:uni-app中使用vant-weapp

image.png

这种'报错1',网上一般都是这样处理:

image.png

  • 2、处理这个‘报错1’之后,现在报错如下(简称报错2):

image.png

image.png

image.png

4、将‘报错3’处理之后,果然成功了

将图中的代码注释掉,项目就正常启动了

image.png

方式2:略

第二:uni-app中不能修改 vant-weapp的样式,存在部分无效的情况?

在浏览器和hbuilderx 中样,已经生效了。 image.png 但是,在微信开发者工具中,样式没有生效???

清除了微信开发者工具的缓存,样式还是没有生效??

image.png

  • 解决办法: 在父组件中,修改子组件的样式。

为了减少对 vant-weapp的改动,不在全局去改变vant-weapp的样式,如下修改样式,是可以的

image.png

第三: 后续问题反馈

  • vant-weapp 在h5上,微新小程序、以及在hbuilder上的效果

image.png

从这篇文章中 关于uni-app的ui库、ui框架、ui组件,可以看出,vant-weapp是支持 h5 的,为啥,到了我这里,在浏览上点击没有效果呢??

image.png