微信小程序中使用 npm 安装第三方依赖库

从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。 本文简单的演示在项目中使用 npm 安装第三方依赖库的过程。

使用 npm 初始化项目

在使用微信开发工具建立一个新的小程序后,在项目目录中并不会存在 npm 需要的项目管理文件 package.json,因此我们首先需要手动建一个或是使用 npm 命令对项目进行初始化. 执行:

1
npm init

按照命令行的提示,全部选择默认选项。完成后就可以看到在项目根目录中增加了一个 package.json 文件。

在开发工具中选择 npm 构建

  1. 打开微信开发工具的菜单,选择 “设置” -> “项目设置”, 在弹出的框中选择 “本地设置” Tab, 然后勾选 “使用 npm 模块”。

  2. 选择菜单 “工具” -> “构建 npm “

通过以上步骤就完成了在微信小程序项目通过 npm 来管理第三方包的设置。 接下来试试引用 Vant Weapp 包。

引用案例

Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。

要在项目中引用 Vant Weapp, 需要打开命令行(终端窗口),在项目目录中执行以下命令:

1
npm i @vant/weapp -S --production

或者

1
yarn add @vant/weapp --production

命令执行完成后,可以看到在项目目录中新增了两个目录: “miniprogram_npm” 和 “node_modules”, 新安装的第三方包就是放在这里面的。

再执行一次: 选择菜单 “工具” -> “构建 npm “

接下来就可以在项目程序中使用 Vant Weapp 的组件了。当然,安装官方指引,因为 Vant Weapp 的样式和小程序 v2 版的样式有冲突,所以需要在项目的 app.json 文件中去掉 “style”: “v2” 这一行。

下面是在小程序 page 中使用 button 的代码片段:

在 app.json 中加入:

1
2
3
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}

因为是全局引入的 vant-button , 所以项目中的页面可以直接使用,

在 index.wxml 中加入:

1
<van-button type="primary">开始</van-button>

本文标题:微信小程序中使用 npm 安装第三方依赖库

文章作者:梅老师

发布时间:2020年06月12日 - 20:06

最后更新:2020年06月14日 - 15:06

原始链接:https://www.mls-tech.info/weapp/weapp-use-npm/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。