微信小程序构建npm

简介: 微信小程序构建npm

一、官方文档

https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

npm 支持

从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。


此文档要求开发者们对 npm 有一定的了解,因此不会再去介绍 npm 的基本功能。如若之前未接触过 npm,请翻阅 官方 npm 文档 进行学习。


tips:在小程序中使用npm包前,需先构建 npm

使用 npm 包

1. 安装 npm 包

在小程序 package.json 所在的目录中执行命令安装 npm 包:

npm install

此处要求参与构建 npm 的 package.json 需要在 project.config.js 定义的 miniprogramRoot 之内。


tips:开发者工具 v1.02.1811150 版本开始,调整为根据 package.json 的 dependencies 字段构建,所以声明在 devDependencies 里的包也可以在开发过程中被安装使用而不会参与到构建中。如果是这之前的版本,则建议使用--production选项,可以减少安装一些业务无关的 npm 包,从而减少整个小程序包的大小。


tips: miniprogramRoot 字段不存在时,miniprogramRoot 就是 project.config.js 所在的目录

2. 构建 npm

点击开发者工具中的菜单栏:工具 --> 构建 npm

为何要有此步骤?

3. 勾选“使用 npm 模块”选项:

4. 构建完成后即可使用 npm 包。

js 中引入 npm 包:

const myPackage = require('packageName')
const packageOther = require('packageName/other')

使用 npm 包中的自定义组件:

{
  "usingComponents": {
    "myPackage": "packageName",
    "package-other": "packageName/other"
  }
}

tips:此处使用 npm 包时如果只引入包名,则默认寻找包名下的 index.js 文件或者 index 组件。

二、没有找到可以构建的NPM包解决方案

https://www.cnblogs.com/lml-lml/p/11346680.html

1.进入小程序根目录,打开cmd,输入:npm init

输入命令后一直点回车

2.输入命令:npm i miniprogram-sm-crypto --production

执行命令完之后,然后再去微信开发者中点工具-构建npm,然后就成功了,如下图:

分类: 微信小程序

相关文章
|
5月前
|
人工智能 自然语言处理 小程序
蚂蚁百宝箱 3 分钟上手 MCP:6 步轻松构建 Qwen3 智能体应用并发布小程序
本文介绍如何用6个步骤、3分钟快速构建一个基于Qwen3与蚂蚁百宝箱MCP的智能体应用,并发布为支付宝小程序。通过结合Qwen3强大的语言理解和生成能力,以及支付宝MCP提供的支付功能,开发者可轻松打造具备商业价值的“数字员工”。案例以“全球智能导游助手”为例,支持119种语言,不仅提供旅行建议,还能收取用户打赏。文章详细说明了从登录百宝箱、创建应用、添加插件到配置角色、发布上架及手机端体验的完整流程,同时提醒当前支付功能仅适用于测试环境。适合希望探索AI应用变现潜力的开发者尝试。
715 14
|
3月前
|
小程序 安全 JavaScript
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
185 1
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
使用npm,快速构建第一个vue项目
本文介绍了如何使用npm快速构建第一个Vue项目。步骤包括确保安装了Node.js并且配置了正确的环境变量,创建一个空文件夹并使用VSCode打开,通过VSCode的终端执行`npm init vue@latest`命令以初始化项目,选择默认配置即可。接着安装项目依赖并启动开发服务器,最后通过浏览器访问开发服务器提供的本地地址查看项目运行结果。文章还提供了相关代码和操作截图。
|
12月前
|
前端开发 JavaScript 开发工具
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
1944 0
|
小程序 定位技术
货拉拉货运小程序开发:构建便捷可靠的货运平台
货拉拉货运小程序整合物流服务,用户可录入货物详情、使用地图定位跟踪运输状态;订单管理功能便于查看进度和费用;支持多种支付方式及支付记录查询;评价系统提升服务质量;客服支持确保用户疑问得到解答,打造移动物流新时代。
|
敏捷开发 缓存 Java
阿里云云效产品使用合集之如何配置流水线里的npm构建
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
使用npm构建vite+vue+ts项目的两种方式
使用npm构建vite+vue+ts项目的两种方式
349 0
使用npm构建vite+vue+ts项目的两种方式
|
JavaScript 开发工具
支付系统----微信支付22------初始化Vue项目,npm run serve -- -- port 8888,Vue默认打开是8888的写法
支付系统----微信支付22------初始化Vue项目,npm run serve -- -- port 8888,Vue默认打开是8888的写法
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
514 12

热门文章

最新文章

推荐镜像

更多
  • NPM