2020-12-27微信小程序使用npm引用第三方包

1. 在微信小程序根目录miniprogram文件夹右键,选择“在内建终端中打开”

image.png

2. 在调试器窗口就会打开一个终端,在这里输入npm init,然后所有配置都按默认配置进行,只需点击回车键即可。当提示“Is this OK?<yes>”时,我们只需点击回车即可。

image.png

此时就会生成一个package.json文件

image.png

3. 执行npm install --production xxx,这个xxx就是你想使用的npm 包。此时在当前文件夹下会生成一个node_modules文件夹。PS:此处请务必使用--production选项,可以减少安装一些业务无关的 npm 包,从而减少整个小程序包的大小。

比如在这里安装wux-weapp包。

npm i wux-weapp -S --production
image.png

执行之后,新增了一个node_modules文件夹,并且多了一个package-lock.json文件,原先的package.json增加了dependencies字段。

image.png

4.在微信开发者工具-->工具-->构建npm,此时会生成一个miniprogram_npm文件夹。

image.png
image.png

5. 构建完成后就可以使用 npm 包了。首先把使用npm模块勾起来,然后在js文件中引入即可。

image.png

在js文件中引用方式:


image.png

在这里由于使用的是wux-weapp组件,引用方式为


image.png

参考资料:从0开始,手把手教你开发并部署上线一个知识测验微信小程序

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容