从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。
直接创建小程序,从 工具>构建npm,会弹出没有找到node_modules目录,因此以引入vant组件为例。
1,创建普通项目后在右上角详情中,打开使用npm模块。
2,鼠标放在目录上右键,打开终端,切换到根目录
3,直接使用npm安装vant组件(使用淘宝镜像安装速度更快)
cnpm i vant-weapp -S --production
4,安装成功后,点开 工具>构建npm
5,完成构建(如果控制台出现报错,再构建一次即可)
此时硬盘中已经存在node_modules目录,只是开发工具默认隐藏了
接下来就开始引用vant组件
1,在想要引入组件的 json 文件中配置(在app.json里配置更方便管理)
测试引入vant中的button组件
{
"usingComponents": {
"van-button": "/miniprogram_npm/_vant-weapp@0.5.11@vant-weapp/button/index"
}
}
在对应的wxml文件中,直接引入vant组件代码,保存即可(如果出现报错,检查json中的文件路径是否正确,重新构建一下npm)