目录

1 软件版本与安装

1.1 微信开发者工具

 1.2 Node.js

2 npm安装

2.1 npm初始化

2.2 npm安装

2.3 构建npm

3 组件的引入与使用

3.1 引入组件

3.2 引用组件时可能遇到的报错

1.地址引用错误报错

 2.初学者未给组件引入语句的前一段代码最后加上逗号

3.3 使用组件库

        Vant Weapp里的组件种类很多、而且设计的都很简约大气，制作微信小程序时如果能使用这个图标库（或者其他组件），又方便、效果又美观。

         不过因为微信开发者工具版本不断更新后，网上很多教程都已经不适用了，所以本人安装后简单写了个教程，供有需要的各位参考。

        本人只是一个大学生，做微信小程序是学校的任务罢了；JavaScript也是为了写小程序新学的，还不熟练。如果有哪些地方写的不太恰当，欢迎各位友善指出。

        本教程只能保证对下述版本的微信开发者工具有效；后续版本更新后可能会失效，但也可供参考。

        本人使用的微信开发者工具版本为稳定版 (1.06.2306020)。不同版本的微信开发者工具内的页面略有不同，如果是旧版本可以去网上找其他已有教程。

        之前为了弄清图标库无法正常使用和路径引用是否有关，我把微信开发者工具重装到默认路径（C盘）了。安装在D盘应该也不会有问题？想保险一点的话可以和我一样使用默认安装路径，因为我这样安装之后是没问题的。

        安装网址：微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)

        本人使用的Node.js版本为长期支持版本18.16.1（页面点进去默认的那个版本直接下载了）。根据个人的电脑配置选择合适版本即可，这个应该问题不大。

        安装npm组件包需要先下载并安装Node.js。本人在过程中参考了B站视频“微信小程序组件库Vant weapp的使用与weui零基础入门课程 【新视觉实训】” （BV18V411C7VV，UP主“新视觉实训”），为了避免后续修改调用路径的麻烦，安装Node.js时选用默认安装路径（一路点“下一步”Next，直到安装完成）。

        安装网址：下载 | Node.js 中文网 (nodejs.cn)

        Windows用户以管理员身份运行微信开发者工具。打开程序，在下图框出的空白区域点击鼠标右键，选择“在外部终端窗口打开”。Mac用户没有“以管理员身份运行”，但是可以直接打开终端，所以问题不大；只要能打开终端就行。

        如果没有这个选项，可能是因为没有以管理员身份运行、而是直接打开了微信开发者工具。此时关闭软件，在桌面右键微信开发者工具、选择“以管理员身份运行”后再次尝试即可。

        输入“npm init -y”，进行npm初始化。

        初始化完成后，显示界面如下，文件夹中多了“package.json”文件。

        在之前打开的控制窗口中，按照Van Weapp快速上手中的指示，输入“npm i vant-weapp -S --production”进行npm安装。（不确定后续是否会更改，保险起见可以去Vant Weapp官网复制；不过直接在下面复制应该也没有问题？）

         显示如下内容，则npm安装完成。

        在上方菜单栏中，选择“工具-构建npm”。构建完成后会有弹窗提示。同时小程序文件内多了一个“miniprogram_npm”的文件夹，这个就是我们后面使用组件库时需要的文件。

        为了方便全局使用组件库，建议将引用的语句写入app.json文件中。

        后文举例的是使用图标库的引用语句。使用其他组件库时，可以去Vant Weapp官网找到他们提供的对应语句，然后将路径进行修改即可。

        Vant Weapp官网的相关内容：

        需要注意的是，我一开始根据官方代码去寻找了“vant-weapp”文件夹、修改引用路径，但是报错了，因为现在我们的程序里有两个名为“vant-weapp”的文件夹：一个在“node_modules”文件夹中，一个在“miniprogram_npm”文件夹中。我们需要将路径修改为“miniprogram_npm”文件夹中的“vant-weapp”文件夹内的路径。如果没有正确设置引用路径，就会报错。

        图标库的引用语句：

        对于像我这样的JavaScript初学者，需要注意在前一段代码的最后加上一个逗号（,），否则会编译出错。

        对应的解决方法在3.1中有详细说明，如果遇到下文的对应报错可以去3.1找解决方案。

        [ app.json 文件内容错误] app.json: ["usingComponents"]["van-icon"] 未找到(env:

        Windows,mp,1.06.2306020; lib: 2.19.4)

        [ app.json.json 文件错误] app.json: app.json        Expecting 'EOF','}',':',',',']', got STRING

        在Vant Weapp官网选中需要的组件，在右侧点击对应的图标，对应内容会直接复制到剪切板。之后将语句写入对应位置即可。

        官方网站下方还有修改图标大小、颜色的操作说明，我就不在此赘述了。

         如果在使用的过程中，出现了“渲染层网络层错误”的报错，可以在app.json中删除“style”:"v2",语句。这是确定微信小程序内部组件样式的语句，但是可能和Vant Weapp内的组件冲突，导致调用时出现报错。

        我不删“style”:"v2",直接编译会报错，删去这一句后再编译不会提示报错。不过成功编译过一次后再将这一句加回去并编译，倒又不会报错了。本人对此知识不足，也不知道为什么（可能和图标库的使用优先级有关？），没办法给出详细原理说明；不过遇到问题的各位这样操作应该可以解决问题。

        正常使用组件库的效果如下：