微信小程序使用 npm 包一、前言在微信小程序开发中，随着项目复杂度的提升和功能需求的多样化，我们往往需要引入一些

一、前言

在微信小程序开发中，随着项目复杂度的提升和功能需求的多样化，我们往往需要引入一些第三方库或工具函数来提高开发效率。而 npm 是 JavaScript 社区中最流行的包管理平台，拥有大量成熟的开源库。

尽管微信小程序运行环境与浏览器不同，但它从基础库版本 2.2.1 开始，支持在开发者工具中使用 npm 包。

本文将手把手教你如何：

✅ 在微信小程序中引入并使用 npm 包
✅ 配置小程序对 npm 的支持
✅ 使用 vant-weapp 示例讲解实际集成过程
✅ 常见问题及解决方案

并通过完整代码示例帮助你掌握如何在小程序中高效使用 npm 生态资源。

二、为什么要在小程序中使用 npm？

优势	描述
提高开发效率	直接复用成熟模块，避免重复造轮子
丰富功能支持	如日期处理、正则校验、加密算法等
统一编码风格	使用如 `lodash`、`dayjs` 等标准库
易于维护更新	依赖版本可控，便于升级维护

三、微信小程序使用 npm 的限制

由于小程序运行环境是自研的 JS 引擎，并非完整的 Node.js 环境，因此：

❌ 不支持以下特性：

Node.js 内置模块（如 fs、path）
有 DOM 操作的包（如 jQuery）
依赖浏览器全局变量（如 window、document）

✅ 支持的包类型：

纯 JavaScript 工具类库（如 lodash, dayjs, uuid）
专为小程序优化的组件库（如 vant-weapp, weui-miniprogram）

四、配置小程序支持 npm

✅ 步骤1：初始化 npm 环境

在小程序项目根目录下执行：

npm init -y

这会生成一个 package.json 文件。

✅ 步骤2：安装所需 npm 包

例如安装 dayjs 时间处理库：

npm install dayjs

✅ 步骤3：开启 npm 构建支持

打开微信开发者工具 → 菜单栏 “工具” → “构建 npm”

微信开发者工具会将 npm 包进行适配打包，并输出到 miniprogram_npm 目录。

✅ 步骤4：配置 project.config.json（可选）

确保 project.config.json 中包含如下配置：

{
  "useCompilerPlugins": ["npm"],
  "scripts": {}
}

五、使用 npm 包的实战案例

🧪 实战1：使用 `dayjs` 格式化时间

1. 安装依赖

npm install dayjs

2. 构建 npm（开发者工具操作）

点击菜单：工具 → 构建 npm

3. 页面中使用

// index.js
const dayjs = require('../../miniprogram_npm/dayjs/index');

Page({
  onLoad() {
    const now = dayjs().format('YYYY-MM-DD HH:mm:ss');
    console.log('当前时间：', now);
  }
});

🧪 实战2：使用 `vant-weapp` 组件库

1. 安装 vant-weapp

npm install @vant/weapp -S --production

2. 构建 npm

微信开发者工具 → 工具 → 构建 npm

3. 在页面中引入组件

编辑 index.json 或 app.json：

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

4. 在 WXML 中使用

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>

六、注意事项与常见问题

❗️问题1：找不到 miniprogram_npm 目录

原因：未执行“构建 npm”
解决方法：点击开发者工具中的【工具】→【构建 npm】

❗️问题2：require 路径错误

正确路径应为：

const dayjs = require('../../miniprogram_npm/dayjs/index');

如果项目层级不同，请根据实际情况调整路径。

❗️问题3：构建失败或报错

可能原因：
- 包含不兼容的语法（如 ES6+ 模块）
- 使用了小程序不支持的 API（如 process.env）
解决建议：
- 使用小程序兼容的版本（如 dayjs 可用）
- 查看官方文档是否提供小程序适配说明

七、推荐常用 npm 包清单

包名	功能描述
`dayjs`	轻量级时间处理库
`lodash`	实用工具函数库
`uuid`	生成唯一标识符
`axios-miniprogram-adapter`	小程序适配 axios 请求
`js-base64`	Base64 编码/解码
`validator`	数据校验（需部分裁剪）
`vant-weapp`	有赞小程序 UI 库
`weui-miniprogram`	微信官方 WeUI 组件库

八、总结对比表：npm 使用流程一览

步骤	操作内容
初始化	`npm init -y`
安装包	`npm install 包名`
构建 npm	微信开发者工具 → 工具 → 构建 npm
引入方式	`require('../../miniprogram_npm/包名')`
组件引入	在 JSON 中配置 `"usingComponents"`
注意事项	不支持 Node.js 模块和 DOM 操作

九、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！

微信小程序使用 npm 包