微信小程序中使用vant UI组件所踩的坑

女爷i 2022-04-13 08:17 1036阅读 0赞

"[Vant Weapp][] 是有赞移动端组件库 [Vant][] 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。"

以上是在vant UI官网对vant UI的描述；

官网地址：[https://youzan.github.io/vant-weapp/\#/intro][https_youzan.github.io_vant-weapp_intro]

在我注册完成小程序后，我就准备通过微信开发者工具来进行开发，之前并没有在微信小程序中引入第三方插件的经验，因此，我小心翼翼的按照官网的提示一步一步的进行，可是说真的，官网的使用步骤真的太粗略了，以至于我只能边看边摸索；

### 第一种方法      下载vant源码 ###

1.直接通过 git 下载 Vant Weapp 源代码，并将`dist`目录拷贝到自己的项目中

git clone https://github.com/youzan/vant-weapp.git

我在我的项目根目录下新建了一个文件夹  vant-weapp,然后我把下载下来的dist文件夹拷贝的vant-weapp文件夹下

2.在需要使用的page中的json文件内引入组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70][]

### 注意：引用路径以自己项目的实际路径为准 ###

3.在index.wxml文件中使用组件

我将首页中获取用户授权的按钮换成了vant UI样式的按钮

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 1][]

第一种方法结束；

## ##

### 第二种方法     通过npm安装； ###

这种方法也是官方推荐的，可是这条路我却没有走通，在此我讲我的方法和遇到的问题列举出来，希望有能人志士可以为我指路；

1.新建小程序项目，我新建的项目名称为vantTest；

2.在小程序项目的更目录执行以下命令，来安装vant weapp

npm i vant-weapp -S --production

3.在微信开发者工具中->详情->项目设置中选中"使用npm模块"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 2][]

4.在微信开发者工具->工具->构建npm

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 3][]

此时，控制台报错了，并且页面无法显示；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 4][]

错误信息如下：

thirdScriptError   
 sdk uncaught third Error   
 module "miniprogram\_npm/vant-weapp/common/utils" is not defined   
 Error: module "miniprogram\_npm/vant-weapp/common/utils" is not defined  
    at require (http://127.0.0.1:44143/appservice/\_\_dev\_\_/WAService.js:1:718604)  
    at http://127.0.0.1:44143/appservice/\_\_dev\_\_/WAService.js:1:718354  
    at http://127.0.0.1:44143/appservice/miniprogram\_npm/vant-weapp/badge-group/index.js:5:14  
    at require (http://127.0.0.1:44143/appservice/\_\_dev\_\_/WAService.js:1:718745)  
    at <anonymous>:25:7  
    at HTMLScriptElement.scriptLoaded (http://127.0.0.1:44143/appservice/appservice?t=1543388690933:3727:23)

此错误暂未解决，希望大神提供帮助；

[Vant Weapp]: https://youzan.github.io/vant-weapp
[Vant]: https://github.com/youzan/vant
[https_youzan.github.io_vant-weapp_intro]: https://youzan.github.io/vant-weapp/#/intro
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70]: /images/20220413/30ed787e93b548abb2a8285a95004659.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 1]: /images/20220413/13967b2fe8cb409a95d12ca910436a12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 2]: /images/20220413/c527dbd9b9054a83a2283dabe8c97424.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 3]: /images/20220413/9a211f989cf04a08b8ed62f1ddcfc57b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 4]: /images/20220413/ea420d86e6af496688947d5af41de037.png