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

简介: 本文档详细介绍了微信小程序开发中引入和使用第三方包的步骤。

 目录

一. 作者有话说

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

🧡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 打开项目

image.gif 编辑


💛2.2 打开终端

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

image.gif 编辑


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


💚3.1 输入命名: npm init -y

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

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

image.gif 编辑

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

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

❤️3.2 判断是否安装成功

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

image.gif 编辑


💜四. 安装需要的包

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


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

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

npm i @vant/weapp -S --production

image.gif

image.gif 编辑


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

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

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

npm i @vant/weapp -S

image.gif

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

npm i wx-canvas -S

image.gif

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

npm i dayjs -S

image.gif

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

npm i axios -S

image.gif

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

npm i echarts -S

image.gif

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

npm i lodash -S

image.gif

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

npm i moment -S

image.gif

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

npm i @sentry/wechat-miniprogram -S

image.gif

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

npm i wx-compute -S

image.gif

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

npm i request -S

image.gif


🧡五. 构建项目


💜5.1 如何构建项目

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

image.gif 编辑


💛5.2 构建完成后的标志

弹出框

image.gif 编辑


💚5.3 去掉配置

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

image.gif 编辑

找到下面代码去掉 !!

image.gif 编辑


💚六. 注意事项【重要】

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

image.gif 编辑

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

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



相关文章
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
|
小程序
微信小程序 | 吐血整理的日历及日程时间管理
微信小程序 | 吐血整理的日历及日程时间管理
4694 0
微信小程序 | 吐血整理的日历及日程时间管理
|
小程序 JavaScript 前端开发
微信小程序安装和使用 Vant Weapp 组件库
本文介绍了如何在微信小程序中安装和使用Vant Weapp组件库,包括通过npm安装、构建npm、修改配置文件以及在小程序中使用Vant Weapp提供的组件。
微信小程序安装和使用 Vant Weapp 组件库
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
小程序 前端开发 JavaScript
微信小程序实现微信支付(代码和注释很详细)
微信小程序实现微信支付(代码和注释很详细)
|
JavaScript 前端开发 API
谈谈我对Vue 3 中的 Composition、Composition API 和 Composables 之间的区别的理解
谈谈我对Vue 3 中的 Composition、Composition API 和 Composables 之间的区别的理解
|
小程序
微信小程序之weui.wxss不能引用查找的解决方案
微信小程序之weui.wxss不能引用查找的解决方案
449 0
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。

热门文章

最新文章