微信小程序 -- npm 支持

目录

npm 支持

1. 构建 npm

2. 自定义构建 npm

3. Vant 组件的使用方式

4. Vant 组件的样式覆盖

---

npm 支持

1. 构建 npm

目前小程序已经支持使用 npm 安装第三方包，但是这些 npm 包在小程序中不能够直接使用，必须得使用小程序开发者工具进行构建后才可以使用。

为什么得使用小程序开发者工具需要构建呢❓

因为 node_modules 目录下的包，不会参与小程序项目的编译、上传和打包，因此。在小程序项目中要想使用 npm 包，必须走一遍 构建 npm 的过程。

在构建成功以后，默认会在小程序项目根目录，也就是 node_modules 同级目录下生成 miniprogram_npm目录，里面存放这构建打包后的 npm 包，也就是小程序运行过程中真正使用的包

 

微信开发者工具如何构建❓

我们以使用 Vant Weapp 小程序 UI 组件库为例，来说明小程序如何安装和构建 npm，构建 npm 的步骤如下：

1. 初始化 package.json
2. 通过 npm 安装项目依赖
3. 通过微信开发者工具构建 npm

📌 注意事项：

1. 小程序运行在微信内部，因为运行环境的特殊性，这就导致 并不是所有的包都能够在小程序使用

2. 我们在小程序中提到的包指专为小程序定制的 npm 包，简称小程序 npm 包，在使用包前需要先确定该包是否支持小程序

3. 开发者如果需要发布小程序包，需要参考官方规范：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html#发布-npm-包

构建的详细步骤：

初始化 package.json，这一步至关重要，要不然后续的步骤都很难进行下去

npm init -y

 

npm i @vant/weapp -S --production

 

构建 npm

 

修改 app.json

到这一步 npm 的构建已经完成了，但是 Vant 组件库，会和基础组件的样式冲突，因此我们需要继续往下配置

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

在页面中使用 vant 提供的小程序组件，这里以 Button 按钮组件为例

• 在app.json或index.json中引入组件
• 在 app.json 中注册的组件为全局注册，可以在任意组件中进行使用
• 在 index.json 中注册组件为组件组件&