微信小程序如何安装使用第三方包。

  🤹‍♀️潜意识起点:个人主页

🎙座右铭:得之坦然,失之淡然。

💎擅长领域:大前端

是的,我需要您的:

🧡点赞❤️关注💙收藏💛

是我持续下去的动力!


目录

一. 作者有话说

❤️二. 打开终端的命令界面

🧡2.1 打开项目

💛2.2 打开终端

💙三.  执行安装前的有关命令 

💚3.1 输入命名: npm init -y

❤️3.2 判断是否安装成功

 💜四. 安装需要的包

❤️4.1 终端中输入要安装的包的命令

💙4.2  微信小程序经用包的命令 

🧡五. 构建项目

💜5.1 如何构建项目

💛5.2 构建完成后的标志

💚5.3 去掉配置

💚六. 注意事项【重要】

❤️七. 总结 


 

🇨🇳一. 作者有话说

微信小程序下载包和引入包的方式和vscode的差距还是很大的。我们需要进行几个步骤:

  • 初始化项目
  • 安装第三方包
  • 使用npm模板
  • 引用构建第三方包
  • 调试运行

内容皆为原创,如果有认为有帮助,关注点一下可以吗。 


❤️二. 打开终端的命令界面


🧡2.1 打开项目

3cc8a911c5484907b5110750370f07e6.png


💛2.2 打开终端

在资源管理器空白处右键,点开外部终端窗口打开。

 a0dcce1aae7b425da776567770f64a06.png


💙三.  执行安装前的有关命令 


💚3.1 输入命名: npm init -y

这里打开部分可能会出现没有权限的情况,可以去csdn查询一下怎么赋予权限。

正常情况是不会出现没权限的情况的,部分学校的机房可能会出现权限情况。

0897d98a91604c6491e5e32bb41b5596.png

注意:这里如果显示没有权限

  1. 你可以去 csdn查一下如何更改权限
  2. 你可以不在小程序中打开终端,只要路径一样就可以了。

❤️3.2 判断是否安装成功

当输入 npm init -y 后会在文件夹中跳出来一个文件,有了pack.json说明成功了! 如下图所示:

7793a96cb3ca424e886d7954ebbf7f24.png


 💜四. 安装需要的包

到这一步没有结束,因为微信小程序的机制是安装完第三方包后还要进行构建项目才可以使用这个安装的第三方包


❤️4.1 终端中输入要安装的包的命令

 这里我举个例子:安装vant weapp

npm i @vant/weapp -S --production

1538fca7e2344286b4e019f8de78413b.png


💙4.2  微信小程序经用包的命令 

大家了解就可以了没必要是死记硬背 

 Vant Weapp - 轻量、可靠的移动端Vue组件库:

npm i @vant/weapp -S

Wx-Canvas - 微信小程序Canvas组件封装:

npm i wx-canvas -S

 Dayjs - 轻量级的时间和日期处理库:

npm i dayjs -S

 Axios - 基于promise的HTTP客户端,用于网络请求:

npm i axios -S

 Echarts - 基于JavaScript的开源可视化图表库:

npm i echarts -S

 Lodash - 一个一致性、模块化、高性能的JavaScript实用工具库:

npm i lodash -S

 Moment.js - 一个轻量级的时间和日期处理JavaScript库:

npm i moment -S

 Sentry - 错误监控和性能分析工具:

npm i @sentry/wechat-miniprogram -S

Wx-compute - 微信小程序计算属性: 

npm i wx-compute -S

小程序请求库 - 微信小程序中使用的请求库,类似于axios: 

npm i request -S


🧡五. 构建项目


💜5.1 如何构建项目

安装的npm在这个时候是不可以使用的,需要构建npm

4d8a855b84a349ccbdfbd55d40838930.png


💛5.2 构建完成后的标志

弹出框

73b88f715b39485b8127f846c92172c1.png


💚5.3 去掉配置

为什么要去掉配置呢,因为安装的包可能会与默认的数据产生冲突,从而影响了渲染效果,因此,一定要执行去掉配置这一项!!!

 1b27d44285934782b4b200439483844e.png

找到下面代码去掉 !!

 13de2ff24c54492788585536dc340128.png


💚六. 注意事项【重要】

🧖‍♂️如果安装一个第三方包构建成功后,安装第二个包

b3c2819e70194e1b8245d8bb52ab909b.png

🍓把上面的包卸载再重新构建,不然可能会出现一系列的问题。

虽然我不知道会出现什么问题,但是建议这么做。 


❤️七. 总结 

💜

在写本次文章的时候,我遇到了一些问题,如npm包版本不兼容、构建npm失败等。通过查阅文档、搜索社区论坛和尝试不同的解决方案,我逐步克服了这些问题。

💜


🧡

 建议初学者,建议先熟悉npm的基本使用,再尝试在小程序中应用。

🧡


💙

在引入第三方包时,注意检查版本兼容性,避免因版本问题导致的功能异常。

💙


💚

通过npm安装第三方包,我能够快速引入丰富的UI组件和工具库,极大提升了开发效率。这一点也是比较好的。

💚


  🤹‍♀️潜意识起点:个人主页

🎙座右铭:得之坦然,失之淡然。

💎擅长领域:大前端

是的,我需要您的:

🧡点赞❤️关注💙收藏💛

是我持续下去的动力!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值