小程序接入vant Weapp组件的详细步骤

红太狼 2022-12-18 07:56 225阅读 0赞

大家好，我是[小佑@小佐：https://blog.csdn.net/Smell\_rookie][https_blog.csdn.net_Smell_rookie]，是一名页面仔工程师，我会不定时在CSDN更新我的博客，有兴趣的可以点个关注来逛逛我的主页。  
刚创建的项目的文件结构  
![在这里插入图片描述][20201026104706624.png_pic_center]  
首先在你项目的根目录下打开终端，输入npm init 对项目初始化  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center]

这时会生成pachage.json文件。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 1]  
继续在终端运行以下命令

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 2]  
我这里用这个：

> npm i vant-weapp -S --production

运行完如图所示：

![在这里插入图片描述][20201026105444601.png_pic_center]  
安装成功后 回到小程序开发工具 点击 工具 => 构建npm

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 3]  
运行完截图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 4]  
完成后在编辑器右边的详情把红框内的打勾上

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 5]  
使用组件

在你想使用组件库的的json文件内引入组件。比如你想在fundIncome页面内使用button组件。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 6]  
效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 7]  
上面的代码就参照vant的[官网文档][Link 1]了。

## 注意坑点： ##

我们先来看以下我们下载的vant weapp的版本：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 8]  
是0.5.28的老版本了。而官网使用的版本是：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 9]  
默认1.5.2的文档了。所以当你遇到以下这情况时：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 10]  
纠正：截图引入组件的路径写错，但这个报错不是引入路径写错的原因，写对了也对报这样的错。

> 报错：Component is not found in path

可以看到文档写的calendar的组件在构建好的文件中并没有，这种的时候多半就是你的旧版本（0.5.28）没有下新版本（1.5.2）的内容。

## 解决坑点： ##

首先删掉构建好的 注意是构建好的文件minprogram\_npm下的vant weapp下的所有组件内容：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 11]  
然后去[官网源代码][Link 2]的dist文件下载所有组件文件：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 12]  
里面展开是这样的：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 13]

将下载好的组件文件拷贝到minprogram\_npm下的vant weapp文件夹中，我们再来看使用组件的效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 14]  
可以看到不管是构建好的文件里面有calendar组件，使用也不会报错了。

[https_blog.csdn.net_Smell_rookie]: https://blog.csdn.net/Smell_rookie
[20201026104706624.png_pic_center]: /images/20221122/8a9a6ac72f3d4084b24c454b1037175d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/13bad935785b4d45b49740354635d483.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/50e112226485436b91eef02aba3b5158.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221122/042bc9ea2d65426a8645e00d745844bd.png
[20201026105444601.png_pic_center]: /images/20221122/e2bbf1b1b1f242e6945e6efd43041410.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221122/0b9a5503714a4c6181c0b3199fdd32d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221122/aa039b8e20074b37bf808f44823230e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221122/394215777fbf4cfcb680e5caf31eaea6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221122/238b71728d5745cb954397c04d3a77af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221122/8d2b387c9d8b41eb9dd493b8b9d679b5.png
[Link 1]: https://vant-contrib.gitee.io/vant-weapp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221122/1b34a1cd5aa74e1081cd2bb498453fab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221122/6a2dccdc4baa49bd9b9bcd07622c60ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221122/9cde9d80773b455b8e82c0137a542502.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221122/a2e01e169f15404a98799c089d30477a.png
[Link 2]: https://github.com/youzan/vant-weapp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221122/ae1e1bc559484c409d29e342ef307d83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221122/05ea7897c8da4e638937d93debfb0a34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NtZWxsX3Jvb2tpZQ_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221122/4fb6749727504cdeaa4f4cb204629625.png