前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序支持npm包

微信小程序支持npm包

作者头像
OECOM
发布于 2020-07-01 09:11:21
发布于 2020-07-01 09:11:21
1.7K00
代码可运行
举报
文章被收录于专栏:OECOMOECOM
运行总次数:0
代码可运行

在8月30号的时候,微信开发者工具进行了一次升级,在升级日志中我们看到微信小程序开始支持npm包管理了。但是小程序的基础版本库是从2.2.1版本开始支持,很遗憾的是在2.2.1以前的版本上则会报错。

和其他前端框架一样,首先得进行的是npm init,然后才是安装依赖包。在这里我们采用base64的一个包进行测试。

1.安装

个人比较倾向使用cnpm来进行安装,比较快,而且不用去修改npm的镜像位置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
cnpm install --production -S js-base64

关于“--production”,在官方文档上有说明

此处并没有强制要求 node_modules 必须在小程序根目录下(即 project.config.js 中的 miniprogramRoot 字段),也可以存在于小程序根目录下的各个子目录中。但是不允许 node_modules 在小程序根目录外。请务必使用--production选项,可以减少安装一些业务无关的 npm 包,从而减少整个小程序包的大小。

2.在程序中引入

我们在首页的index中进行引入,

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const Base64 = require('js-base64').Base64;

然后再onload函数中调用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
onLoad: function () {
    console.log(Base64.encode("haha"));
    }

3.构建npm

点击开发者工具中的菜单栏:工具 --> 构建 npm 在工具栏最下方有一个选项就是构建npm,然后点击开发者工具右上角的详情,勾选上使用npm模块

这里的勾选npm模块和小程序版本都要选择正确了,否则会提示:找不到模块如module "pages/npm/js-base64" is not defined

以上就是在小程序中使用npm的方法。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-09-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
TUICallKit 小程序包体积优化方案
HBuilder 中 运行 > 运行到小程序模拟器 > 勾选 运行时是否压缩代码,具体参考下图:
jonyttang
2023/10/30
2.2K4
Taro——安装和使用
Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 / RN 等应用。
思索
2024/08/15
1890
Taro——安装和使用
微信小程序引入UI组件库
3、安装完成后,在微信开发者工具中的菜单栏:详情-----使用npm模块-----工具 ------ 构建 npm :
江一铭
2022/06/16
1K0
微信小程序引入UI组件库
微信小程序(二)使用npm安装weui
作为一个不专业的前端,在开发前端的时候我喜欢用一些UI库。HTML页面一般习惯用bootstarp,layui等。VUE项目一般习惯用iview,elementui等。
用户6256742
2024/07/16
5730
微信小程序(二)使用npm安装weui
微信小程序本地调试云函数配置
在云函数中我们可以引入第三方依赖来帮助我们更快的开发。云函数的运行环境是 Node.js,因此我们可以使用 npm 安装第三方依赖。比如除了使用 Node.js 提供的原生 http 接口在云函数中发起网络请求,我们还可以使用一个流行的 Node.js 网络请求库 request 来更便捷的发起网络请求。
用户6808043
2022/02/25
2.9K0
京东小程序CI工具实践
Tech 导读 本文从整体介绍了京东小程序CI工具的用途及工作流程,读者可以通过本文了解到一种全新的京东小程序上传方式,同时结合构建脚本和流水线,可大大提高小程序的部署和发布效率。
京东技术
2023/09/21
4010
京东小程序CI工具实践
手把手带你学微信小程序 —— 如何开发属于自己的第三方微信小程序组件库
前言:大家可能见惯了各种 Vue,React 等前端组件库的开发教程,但是 微信小程序组件库的 开发教程可能就很少见到了,今天我将从自己踩的各种坑,总结出如下最佳开发实践
Gorit
2022/05/18
1.2K0
手把手带你学微信小程序 —— 如何开发属于自己的第三方微信小程序组件库
腾讯在线教育小程序开发实践之路
前言: 小程序是一种新的开放能力, 开发者可以快速地开发一个小程序,便可以在微信内被便捷得获取和传播,同时具有出色的使用体验。随着近两年来小程序风口的爆发,越来越多的开发者、企业开始接入小程序,那么在在线教育领域,我们可以通过小程序玩出什么花样呢?本文将介绍腾讯在线教育的小程序矩阵,以及如何进行框架选型设计,工程化探索,性能优化等实践。 一、 腾讯在线教育小程序矩阵 首先介绍下腾讯在线教育下的3个主要业务: 面向成人职业化,兴趣化学习的腾讯课堂 面向小学,初高中k12领域的企鹅辅导 面向少儿英语学
腾讯技术工程官方号
2019/07/04
2K0
腾讯在线教育小程序开发实践之路
微信小程序mpvue+Vant Weapp初始化
运行成功之后,可以看到本地多了个 dist 目录,这个目录里就是生成的小程序相关代码。 Vue开发环境已经搭建好,接下来打开微信开发者工具,打开我们的项目my-project
青梅煮码
2023/02/18
3210
如何进行小程序云函数开发
在以前的文章中,我们给大家介绍了小程序的基本使用,近期微信团队联合腾讯云合作开发了一项新的产品,不用服务器就可以在小程序端进行服务端开发。为开发者提供完整的云端支持,弱化后端和运维操作,使用平台原生 API 进行核心业务开发,实现快速上线和迭代。
英特奈特
2019/01/28
8.7K2
如何进行小程序云函数开发
【腾讯课堂】基于Kbone使用React同构小程序开发实践总结
导语:Kbone 是微信推出的 Web 与小程序同构解决方案,该方案现已支持 Vue、React 等同构 本文目录一览: 1. 背景 2. 框架选择 3. React-Kbone-Miniprogram 过程 4. 接入现有工程     4.1 构建配置         4.1.1 Babel         4.1.2 Tree Shaking         4.1.3 与小程序代码复用     4.2 代码编写          4.2.1 小程序、H5 公共库适配         4.2.2 op
用户1097444
2022/06/29
7520
【腾讯课堂】基于Kbone使用React同构小程序开发实践总结
「基础」十分钟上手webpack 包教包会
作者:马达--腾讯开发工程师 @IMWeb前端社区 前沿 最近有一个项目使用了Vue框架,组件开发是Vue里面的重要思想之一,而官方文档上推荐的最佳实践是通过webpack+vue构建工程,所以在使用Vue之前,我们需要了解webpack这个打包工具。 在此之前,笔者稍微从requirejs的r.js领略了一点点打包思想,因为只需要简单的打包功能,网上很多文章说了一大堆,什么ES6,什么AMD、CMD,什么shimming、公共模块,相信对于什么都不知道的初学者,说到后面就会蒙蔽,所以本文主要介绍webpa
用户1097444
2022/06/29
5520
「基础」十分钟上手webpack 包教包会
10天从入门到精通Vue(五)Webpack打包
webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;
共饮一杯无
2022/11/28
5330
10天从入门到精通Vue(五)Webpack打包
微信小程序组件化开发框架WePY
版本init新生成的代码包会在根目录包含project.config.json文件
达达前端
2019/07/28
6850
基于云开发的小程序海报功能的实现
其实在最早之前的小程序中已经实现了一次,具体可以参考利用云开发优化博客小程序(三)——生成海报功能,主要还是使用原生的cavans进行组装,原本想代码copy过来改改就行了,但总觉得原来的代码写的不是特别好。
Bug生活2048
2019/05/16
1.3K0
基于云开发的小程序海报功能的实现
教你从零写一个nodejs包,然后发布至npm源上
随着前端技术发展,现在的前端体系基本离不开nodejs来构建,而nodejs强大的背后,肯定是离不开其开放生态下所诞生的开源库和包,今天主要谈谈这些开源库包的一些知识。
用户1462769
2019/08/12
3.2K0
教你从零写一个nodejs包,然后发布至npm源上
微信小程序wepy框架入门教程-搭建开发环境(一)
端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,WePY借鉴了Vue.js(后文简称Vue)的语法风格和功能特性,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。
王小婷
2025/05/18
340
微信小程序wepy框架入门教程-搭建开发环境(一)
vant weapp 在小程序中的使用
Vant 是有赞前端团队开源的移动端组件库,于 2016 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。
万少
2025/02/08
4460
vant weapp 在小程序中的使用
微信小程序使用npm
1.初始化npm:在你所建项目的根目录下,执行npm init 2.微信开发者工具开启"使用npm模块"(右上角详情-本地设置-勾选使用npm模块) 3.在项目的根目录下执行npm install miniprogram-datepicker --production 4.微信开发者工具点开左上角工具->选中构建npm 5.成功后会在目录中生成一个miniprogram_npm目录
似水的流年
2020/10/27
1.3K0
干货|以Vue为例,如何提升小程序开发效率?
一般小程序从 idea 到发布,安装小程序开发者工具→新建模板小程序→开发→编译→发布,且整个过程为可视化操作,只需写核心逻辑代码即可。小程序框架本身所具有的快速加载和快速渲染能力,加之配套的云能力、运维能力和数据汇总能力,可以释放开发者的精力。且在语言上,小程序的前端开发学习成本较低。
用户10245619
2023/02/01
4710
相关推荐
TUICallKit 小程序包体积优化方案
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验