微信小程序开发引用vant中的Toast失败

在校秃头读书人

已于 2022-08-09 11:14:06 修改

阅读量2k

点赞数 1

文章标签：微信小程序 javascript 小程序

于 2022-08-08 20:18:11 首次发布

本文链接：https://blog.csdn.net/qq_51632935/article/details/126235193

版权

一开始按照官方文档的步骤来引用

现在.json文件中引入组件

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

然后在js文件中引入和使用

import Toast from '@vant/weapp/toast/toast';

Toast('我是提示文案，建议不超过十五字~');

！！很多人忘记在页面中引入，导致报错

<van-toast id="van-toast" />

但是，我在wxml中引入了也一样报错，也找不到解决方法，但是用这个方法就可以成功，且不需要在wxml中写入标签。icon是可选项。

wx.showToast({
  title: `要显示的内容`,
  icon: 'passed',
});

..............后续

因为用了最后的方法，没想到图标不能修改，无论如何都是这个的图标，如果我想要提示失败的信息，用这个打钩图标就很奇怪！

于是我又一次尝试使用vant，没想到这次竟然可以使用。。。

我想之前失败可能和网络不好有关，也可能和我组件引入的页面有关，因为我使用了tabs，分成了两个部分，可能我在第二个页面点击，但是使用toast却在第一个页面。

。。。。

vant的toast在我这里好难用啊，一会儿出的来一会儿出不来。最后还是选择了微信自带的。学习了一下，如果需要改变打钩的图标，只需要改icon就行。

icon:'error'

关注