【小程序】引入并使用第三方组件

“加速”

---

今天在改小程序的时候，需要使用Vant组件，由于之前对小程序引入并使用第三方组件的过程不太熟悉，导致这个过程比较艰辛，记录下来，希望对你有帮助。

---

方式有很多，这里我只记录我目前在用的

npm安装第三方组件

// 在项目根目录执行
>>> npm init

将会在根目录生成package.json文件

// 在项目根目录执行
>>> npm install -S --production

• -S或–save意为将安装的组件版本名及版本号更新在package.json文件中的dependencies（生产环境依赖的组件）内
• –production意为仅安装package.json文件中的dependencies（生产环境依赖的组件）内的组件，不加则默认安装devDependencies（开发环境依赖的组件）内的组件

参考：
https://blog.csdn.net/lydia_liuY/article/details/80816267
https://segmentfault.com/a/1190000012099112
安装完成后会在根目录生成package-lock.json以及node_modules目录

小程序构建npm

将会在根目录生成miniprogram_npm目录

使用

声明自定义组件

usingComponents

使用自定义组件

xxxx.wxml

xxxx.js

import Toast from '@vant/weapp/toast/toast';
onShow: function(e) {
    Toast('测试!')
}

参考：https://blog.csdn.net/J080624/article/details/106186352

注：
不要引入vant-weapp
而是@vant/weapp

---

2022-04-25更新

在npm install xxxx会自动在package.json中添加记录
比如：

>>> npm install @lucky-canvas/mini@latest

再重新在小程序中“构建npm”，这个组件就会出现在miniprogram_npm目录中