微信小程序使用 npm 包,举例图文详解

news2025/1/16 3:33:08

使用 npm 包前提条件:

下载安装,配置npm环境变量,不懂得可以上网查教程,本文不再描述

小程序使用 npm 包简述

1、初始化 package.json

2、勾选允许使用 npm(新版微信小程序开发工具忽略这一步)

3、下载 npm 包

4、构建 npm

不清楚的可以往下看详解

小程序使用 npm 包详解

1、初始化 package.json

在小程序开发工具"终端"输入:

npm init -y

执行命令成功后自动生成的package.json如下图所示:

2、勾选允许使用 npm (新版开发工具忽略此步骤,没有“使用npm模块”,默认可用npm下载)

 

 3、下载 npm 包

需求:使用PubSubJS完成两个小程序界面的通讯,PubSubJS在github上的链接如下:

GitHub - mroderick/PubSubJS: Dependency free publish/subscribe for JavaScript

用npm下载PubSubJS的命令如下:

npm install pubsub-js

结果:下载成功后如下图所示

 问题:出现报错日志如下图所示

解决方法: 往下看下一步(构建 npm)

4、构建 npm

状态栏  —>  工具  —>  构建npm 

执行成功后,报错消失,同时会将 node_modules 中的包打包到 miniprogram_npm 中,效果如下图所示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409603.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Auto.js的介绍

Auto.js 是一款无需root权限的javascript自动化软件 auto.js是一款安卓手机应用,和微信一样,安装在手机上使用 Auto.is是一款自动化软件,更根据脚本内容便可自动执行相关的操作,并且手机无需root Auto.js的脚本需要使用JavaScri…

Vue中的v-for循环,实现div块的循环生成

前言 大家好,这里是果力成,老规矩,学之!最近在做前端页面遇到一个小问题,说来也不难,但还是花费了我的好些时间,保持习惯记录一下。在前端学习中不免遇到一个div或者一个数组的循环产生,因为挨个儿传数据显然不是最优的。这里讲述…

强大的图片预览组件Viewer.js

​ 1、 Viewer.js简介 Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能,同时,这款优秀的插件配置操作起来也非常的方便。 Viewer.js分为2个版本,js版本和jquery版本,下载地址分别为 纯J…

uniapp组件uni-file-picker中对上传的图片进行压缩至1兆以内

我在做uniapp项目时,用的uni-file-picker组件,这是我做的一个项目实例,主要是将图片通过接口传至后台服务器 如果只是上传一张照片的话 还没有什么大问题,但是如果一连上传很多个图片,像我这个项目一样,而且…

一文搞懂ES6的Map

什么是Map Map是ECMAScript 6 的新增特性,是一种新的集合类型,为javascript带来了真正的键/值存储机 制。 Map 对象存有键值对,其中的键可以是任何数据类型。 Map 对象记得键的原始插入顺序。 Map 对象具有表示映射大小的属性。 Map的基…

海康视频WEB插件 V1.5.2 开发总结

文章目录前言一、效果图二、插件使用步骤总结三、具体步骤分析1.new 一个WebControl 插件实例2.启动插件服务3.创建视频播放窗口、绑定消息回调4.初始化参数,其中secret参数需要通过RSA加密,加密公钥通过WebControl.JS_RequestInterface获取5.通过WebCon…

前端使用html2canvas生成图片踩坑

前端使用html2canvas生成图片经验总结 前言 主要是总结一下html2canvas生成图片的基础用法,以及自己在使用html2canvas过程中踩过的坑和相应的解决思路 背景 近段时间接手一个项目,需要向设备下发某一个图片,为了该图片可以实时更改&…

vue实现tagsview多页签导航功能

文章目录前言一、效果图二、实现思路1. 新建 tags-view.js2. 在Vuex里面引入 tags-view.js3. 新建 tabsView 组件4. 新建 ScrollPane 组件5. 引入 tabsView 组件6. 使用 keep-alive 组件,进行页签的缓存总结前言 基本上后台管理系统都需要有多页签的功能&#xff0…

vue 城市选择器(省市区)的使用 element-china-area-data

一、Element UI 中国省市区级联数据 本文参考:Element UI 中国省市区级联数据 本文参考:根据此文做的整理 1. 安装 npm install element-china-area-data -S2. 使用 import { regionData, CodeToText, TextToCode } from element-china-area-datareg…

vue项目打包优化及配置vue.config.js文件(实测有用)

首先我们需要在根目录里创建一个vue.config.js 首先在文件中先写入 //打包配置文件 module.exports {assetsDir: static, // outputDir的静态资源(js、css、img、fonts)目录publicPath: ./, // 静态资源路径(默认/,如果不改打包后会白屏&#x…

HTML樱花飘落

樱花效果 FOR YOU GIRL 以梦为马&#xff0c;不负韶华 LOVE YOU FOREVER 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta http-equiv"…

【JavaScript-动画原理】如何使用js进行动画效果的实现

&#x1f482; 个人主页&#xff1a;Aic山鱼 个人社区&#xff1a;山鱼社区 &#x1f4ac; 如果文章对你有所帮助请点个&#x1f44d;吧!欢迎关注、点赞、收藏(一键三连)和订阅专哦目录 前言 1.动画原理 2.动画函数的封装 3.给不同元素添加定时器 4.缓动动画原理 5.给动…

原生JS实现FlappyBird游戏 超详细解析 快来做一个自己玩吧

目录​ 1.适配设备&#x1f43e; 2.背景滚动&#x1f490; 3.管道的创建与移动&#x1f338; 4.小鸟操作&#x1f337; 5.碰撞检测&#x1f340; 6.触屏事件&#x1f339; 7.制作开始与结束面板&#x1f33b; 8.得分统计&#x1f33a; 我们先来看看接下来我们要做的效果…

vue 路由报错

在进行如下路由跳转时 const edit (index: number) > { let row: any categoryData.value[index]; router.push({ name: “commodityedit”, query: { id: row.id, name: row.name } }); }; 遇到问题如下 TypeError: Failed to fetch dynamically imported module: http…

【uni-app】第三方ui组件推荐引入的方法

ui组件推荐 1. Muse-UI Muse UI 是一套 Material Design 风格开源组件库&#xff0c;旨在快速搭建页面。它基于 Vue 2.0 开发&#xff0c;并提供了自定义主题&#xff0c;充分满足可定制化的需求。material-design-icons 是谷歌定义的一套icontypeface 是谷歌定义的一套字体…

html+css+js制作LOL官网,web前端大作业(3个页面+模拟登录+链接)

文章目录一、效果图1.1首页1.2 模拟登录1.3 游戏资料页面1.4 商城页面二、代码2.1 首页2.2 资料页面2.3 商城页面三、链接一、效果图 1.1首页 1.2 模拟登录 1.3 游戏资料页面 1.4 商城页面 二、代码 2.1 首页 index.html <!doctype html> <html><head>&l…

JavaScript高级 |如何玩转箭头函数?

本文已收录于专栏⭐️ 《JavaScript》⭐️ 学习指南&#xff1a;箭头函数语法规则简写规则常见应用mapfilterreduce箭头函数中的this使用concatthis的查找规则完结散花参考文献箭头函数 在ES6中新增了函数的简写方式----箭头函数&#xff0c;箭头函数的出现不仅简化了大量代码…

Vue3自动引入组件,组件库

在做vue3项目中时&#xff0c;每次使用都需要先进行引入&#xff0c;用ts的还好&#xff0c;会有爆红提示&#xff0c;如果是使用js开发的很多时候都会等到编译的时候才发现哪里哪里又没有引入&#xff0c;就会很浪费时间&#xff0c;偶然发现一款好用的组件可以帮助我们很好的…

【你不知道的 CSS】你写的 CSS 太过冗余,以至于我对它下手了

:is() 你是否曾经写过下方这样冗余的CSS选择器: .active a, .active button, .active label {color: steelblue; }其实上面这段代码可以这样写&#xff1a; .active :is(a, button, label) {color: steelblue; }看~是不是简洁了很多&#xff01; 是的&#xff0c;你可以使用…

详细分析解决Uncaught SyntaxError: Cannot use import statement outside a module (at ...)的错误

文章目录1. 复现错误2. 分析错误3. 解决错误1. 复现错误 今天在学习es6时&#xff0c;启动页面后&#xff0c;却报出如下图错误&#xff1a; 即Uncaught SyntaxError: Cannot use import statement outside a module (at module.html?_ijtvfvtohb23jt1tj3r4ad3a0t82v:19:5)。 …