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

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

 目录

一. 作者有话说

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

🧡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 编辑

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

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



相关文章
|
9月前
|
JSON 小程序 数据格式
微信小程序默认的文字内容在左上角怎么办?带你0基础快速了解skyline渲染模式。
本文主要介绍微信小程序开发中遇到的问题及其解决方法。问题通常由微信小程序自带的Skyline渲染模式引起,而非代码编写错误。解决步骤包括:1. 找到全局配置文件app.json;2. 去掉相关配置项;3. 修改后的配置示例。通过这些步骤可以有效解决文字内容顶格或覆盖的问题。文中还提供了进一步了解Skyline渲染模式的链接,帮助开发者深入理解其原理和应用。
805 59
|
9月前
|
Java 数据安全/隐私保护 开发者
【潜意识Java】深入理解 Java 面向对象编程(OOP)
本文介绍了Java中的面向对象编程(OOP)核心概念,包括封装、继承、多态和抽象。封装通过访问控制保护数据,提高安全性;继承支持代码复用,减少冗余;多态实现灵活的行为调用;抽象则隐藏细节,简化接口设计。掌握这些概念有助于编写高效、灵活且易于维护的代码。文章通过实例详细讲解了每个概念在Java中的应用,并总结了它们的优势。
357 3
|
小程序 IDE 开发工具
新建微信小程序Ts模版构建npm错误 ,没有找到可以构建的 NPM 包,NPM packages not found。
新建微信小程序Ts模版构建npm错误 ,没有找到可以构建的 NPM 包,NPM packages not found。
1327 0
|
JSON 小程序 前端开发
终于搞懂了!微信小程序的渲染机制及组件使用
【8月更文挑战第8天】微信小程序的渲染机制及组件使用
778 3
终于搞懂了!微信小程序的渲染机制及组件使用
|
9月前
|
JSON 小程序 JavaScript
原生微信小程序笔记完整总结
原生微信小程序笔记完整总结
257 1
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,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属性的说明
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
小程序 前端开发 JavaScript
微信小程序实现微信支付(代码和注释很详细)
微信小程序实现微信支付(代码和注释很详细)
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
|
12月前
|
JavaScript 前端开发 安全
轻松上手Web Worker:多线程解决方案的使用方法与实战指南
轻松上手Web Worker:多线程解决方案的使用方法与实战指南
297 0

热门文章

最新文章