npm 支持
1. 构建 npm
目前小程序已经支持使用 npm 安装第三方包,但是这些 npm 包在小程序中不能够直接使用,必须得使用小程序开发者工具进行构建后才可以使用。
为什么得使用小程序开发者工具需要构建呢❓
因为 node_modules
目录下的包,不会参与小程序项目的编译、上传和打包,因此。在小程序项目中要想使用 npm 包,必须走一遍 构建 npm 的过程。
在构建成功以后,默认会在小程序项目根目录,也就是 node_modules
同级目录下生成 miniprogram_npm
目录,里面存放这构建打包后的 npm 包,也就是小程序运行过程中真正使用的包

微信开发者工具如何构建❓
我们以使用 Vant Weapp 小程序 UI 组件库为例,来说明小程序如何安装和构建 npm,构建 npm 的步骤如下:
- 初始化
package.json
- 通过
npm
安装项目依赖 - 通过微信开发者工具构建
npm
📌 注意事项:
小程序运行在微信内部,因为运行环境的特殊性,这就导致 并不是所有的包都能够在小程序使用
我们在小程序中提到的包指专为小程序定制的 npm 包,简称小程序 npm 包,在使用包前需要先确定该包是否支持小程序
开发者如果需要发布小程序包,需要参考官方规范:https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html#发布-npm-包
构建的详细步骤:
-
初始化
package.json
,这一步至关重要,要不然后续的步骤都很难进行下去shellnpm init -y
-
通过 npm 安装
@vant/weapp
包shellnpm i @vant/weapp -S --production
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
-
构建 npm
-
修改 app.json
到这一步 npm 的构建已经完成了,但是
Vant
组件库,会和基础组件的样式冲突,因此我们需要继续往下配置将 app.json 中的
"style": "v2"
去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。 -
在页面中使用
vant
提供的小程序组件,这里以Button
按钮组件为例- 在
app.json
或index.json
中引入组件 - 在
app.json
中注册的组件为全局注册,可以在任意组件中进行使用 - 在
index.json
中注册组件为组件组件,只能在当前组件中进行使用 - 按照组件提供的使用方式,在页面中使用即可
json"usingComponents": { "van-button": "@vant/weapp/button/index" }
html<van-button type="default">默认按钮</van-button> <van-button type="primary">主要按钮</van-button> <van-button type="info">信息按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button>
- 在
-
页面预览效果

2. 自定义构建 npm
在实际的开发中,随着项目的功能越来越多、项目越来越复杂,文件目录也变的很繁琐,为了方便进行项目的开发,开发人员通常会对目录结构进行调整优化,例如:将小程序源码放到 miniprogram 目录下。
但是在调整目录以后,我们按照上一小节 Vant Weapp
的构建流程进行构建,发现没有构建成功,并且弹出构建失败的弹框

错误提示翻译意思是\] :没有找到可以构建的 npm 包
\[解决方式\]:
1. 请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内
2. 配置 `project.config.json` 的 `packNpmManually` 和 `packNpmRelationList` 进行构建
产生这个错误的原因是因为小程序的构建方式有两种:
1. 默认构建 `npm`
2. 自定义构建 `npm`
**`默认构建 npm`**
默认情况下,不使用任何模版,`miniprogramRoot` 是小程序项目根目录,在 `miniprogramRoot` 内正确配置了 `package.json` 并执行 `npm install` 之后,在项目的根目录下就有 `node_modules` 文件夹,然后对 `node_modules` 中的 `npm` 进行构建,其构建 npm 的结果是,为 `package.json` 对应的 `node_modules` 构建一份 `miniprogram_npm`,并放置在对应 `package.json `所在目录的子目录中
**`自定义构建 npm`**
与`默认的构建 npm 方式`不一样,自定义构建 npm 的方式为了更好的优化目录结构,更好的管理项目中的代码。
需要开发者在 `project.config.json` 中指定 `node_modules` 的位置 和 目标 `miniprogram_npm` 的位置
在`project.config.json`中详细的配置流程和步骤如下:
1. 新增 `miniprogramRoot` 字段,指定调整后了的小程序开发目录
2. 新增 `setting.packNpmManually`设置为 `true`,开启指定`node_modules` 的位置以及构建成功后文件的位置
3. 新增 `setting.packNpmRelationList` 项,指定 `packageJsonPath` 和 `miniprogramNpmDistDir` 的位置
* `packageJsonPath` 表示 `node_modules` 源对应的 `package.json`
* `miniprogramNpmDistDir` 表示 `node_modules` 的构建结果目标位置
```json
{
// 指定调整后了的小程序开发目录
"miniprogramRoot": "miniprogram/",
"setting": {
// 开启自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式
"packNpmManually": true,
// 指定 packageJsonPath 和 miniprogramNpmDistDir 的位置
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram"
}
]
}
}
```
**落地代码:**
1. 将小程序核心源码放到 miniprogram 目录下
2. 在`project.config.json`中进行配置
```json
{
"compileType": "miniprogram",
+ "miniprogramRoot": "miniprogram/",
+ "setting": {
+ "packNpmManually": true,
+ "packNpmRelationList": [
+ {
+ "packageJsonPath": "./package.json",
+ "miniprogramNpmDistDir": "./miniprogram"
+ }
+ ]
+ }
// coding... 其他配置项
}
```
#### 3. Vant 组件的使用方式
Vant Weapp 是有赞前端团队开源的小程序 UI 组件库,基于微信小程序的自定义组件开发,可用来快速搭建小程序项目。
在使用 Vant 提供的组件时,只需要两个步骤:
1.将组件在 app.json 中进行全部注册 或者 index.json 中进行局部注册
2.在引入组件后,可以在 wxml 中直接使用组件
在前面我们以 `image` 组件为例,讲解 `Vant` 组件库的基本使用方式
首先还是需要将先将组件进行引入,这里我们进行全局引入
```json
// app.json
"usingComponents": {
"van-image": "@vant/weapp/image/index"
}
```
引入组件后,可以在 wxml 中直接使用组件
```html