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

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

使用 npm 初始化项目

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

npm init

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

在开发工具中选择 npm 构建

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

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

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

引用案例

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

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

npm i @vant/weapp -S --production

或者

yarn add @vant/weapp --production

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

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

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

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

在 app.json 中加入:

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

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

在 index.wxml 中加入:

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