当前位置: 首页 > news >正文

微信小程序【构建npm】使用记录

:: 问题

使用原生微信小程序开发时,通过官方 typescript 模板构建的小程序无法正确执行 构建npm 成功,从而导致我想通过 npm 安装并使用第三方库出现问题

:: 开发环境(可参照)

设备macOS Ventura 13.0

微信开发者工具Stable 1.06.2303060

创建模板typescript + sass 【这里使用的官方推荐模板创建,可参照使用,不必纠结】

:: 错误呈现

  • 无法 构建npm
NPM packages not found. Please confirm npm packages which need to build are belong to `miniprogramRoot` directory. Or you may edit project.config.json's `packNpmManually` and `packNpmRelationList` [1.06.2303060][darwin-arm64]
message: NPM packages not found. Please confirm npm packages which need to build are belong to `miniprogramRoot` directory. Or you may edit project.config.json's `packNpmManually` and `packNpmRelationList`
appid: wx9074bfadbd205d93f
openid: o6zAJs_Iljsdw1hbEAnsDZ3HdgoIzY
ideVersion: 1.06.2303060
osType: darwin-arm64
time: 2023-04-02 10:56:01

:: 解决方案

【微信官方建议】npm 支持

关键的地方就是需要在 project.config.json 文件中的 setting 对象下配置如下内容,在此之前请确保已初始化【npm init】项目

"packNpmManually": true,
"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./app/"}
],

但是,【这很重要‼️】,若你也使用了 typescript 构建项目的话,完成上面这一步依旧无法成功,你需要尝试在 setting 配置下先将 typescript 相关去除,【重启编辑器】后 再次尝试

"setting": {..."typescript"	// 删除 -> 保存更改 -> 清除缓存 -> 编译 -> 构建npm
}

这是可能又会出现【模拟器启动失败】的情况,这是因为,项目使用 typescript 创建,而插件被删除了,无法匹配到入口文件,错误如下:

[ app.json 文件内容错误] app/app.json: 未找到 ["pages"][0] 对应的 pages/index/index.js 文件(env: macOS,mp,1.06.2303060; lib: 2.30.3)

直接一点的方式,就是通过调整 app.json 文件让其自动为你创建一个 xxx.js 的文件,这里其实不用修改什么,随便删除一个引号再加回来就行,目的是要让编辑器知道这个文件被改动了,它就会重新生成文件,保存后依次执行 【清缓存 -> 编译】,然后就可以看到项目中多了一个xxx.js的文件了,如下事例

├── logs
│   ├── logs.js
│   ├── logs.json
│   ├── logs.ts
│   ├── logs.wxml
│   ├── logs.wxss

此时模拟器报错将消失,但屏幕上没有内容?不用担心,别忘了做这些的核心是解决什么问题【构建npm】,接下来就是见证奇迹的时刻,依次做如下操作【如果不行,请记得 重启开发者工具 ,try again】

工具栏中找到【工具】 -> 找到【构建npm】 并用力点击它

💡然后,然后你就会****,是的,没错,你做到了,构建成功了,此时不出意外的话,你的项目里面应该会有这样一个目录【miniprogram_npm

接下来,就需要将之前的内容补全,然后奇迹再次发生,幸运再次降临,项目正常启动【酷炫的页面重获新生】,当然,刚刚生成的 xxx.js 文件可删也可不删并没有什么大的影响,存储空间当然会占用,介意的话就用力删除吧,留下来呢也是兼容上文 typescript 被删除后模拟器无法运行的情况

"setting": {..."typescript"	// 加回来
}

:: 重要提醒‼️

修改配置后,没效果或是出现报错,请记得【重启编辑器

:: 更多内容 ::

> 开发过程中踩坑经验记录

相关文章:

微信小程序【构建npm】使用记录

:: 问题 使用原生微信小程序开发时,通过官方 typescript 模板构建的小程序无法正确执行 构建npm 成功,从而导致我想通过 npm 安装并使用第三方库出现问题 :: 开发环境(可参照) 设备:macOS Ventura 13.0 微信开发者工…...

mybatis入门的环境搭建及快速完成CRUD(增删改查)

又是爱代码的一天 一、MyBatis的介绍 ( 1 ) 背景 MyBatis 的背景可以追溯到 2002 年,当时 Clinton Begin 开发了一个名为 iBATIS 的持久化框架。iBATIS 的目标是简化 JDBC 编程,提供一种更直观、易用的方式来处理数据库操作。 在传统的 JDBC 编程中&…...

《HeadFirst设计模式(第二版)》第九章代码——组合模式

上一章链接: 《HeadFirst设计模式(第二版)》第九章代码——迭代器模式_轩下小酌的博客-CSDN博客 前面说到,当一个菜单里面出现了子菜单的时候,前面的迭代器模式得换成组合模式。 组合模式: 允许将对象组合成树形结构来表现部分-整…...

iOS17 widget Content margin

iOS17小组件有4个新的地方可以放置分别是:Mac桌面、iPad锁屏界面、 iPhone Standby模式、watch的smart stack Transition to content margins iOS17中苹果为widget新增了Content margin, 使widget的内容能够距离边缘有一定的间隙,确保内容显示完整。这…...

计网第四章(网络层)(一)

前面学习了数据链路层,我们可以实现一个网络的内部通信,可是要把这些网络互连起来形成更大的互连网,就需要用网络层互联设备路由器。而有了路由器的参与,就有不同网络、跨网络的概念诞生。 这时候我想大家也能理解为什么叫网络层…...

【前端】vue3 接入antdv表单校验

1/🍕背景 1、表单校验是非常常见的需求,能够有效的拦截大部分的错误数据,提升效率。 2、快速的给使用者提示和反馈,用户体验感非常好。 3、成熟的表单校验框架,开发效率高,bug少。 最近使用的是vue3antdv的…...

CY3-COOH在蛋白质定位的特点1251915-29-3星戈瑞

​欢迎来到星戈瑞荧光stargraydye!小编带您盘点: CY3-COOH是一种橙红色荧光标记试剂,可以用于蛋白质定位研究。**以下是CY3-COOH在蛋白质定位的特点和应用: 细胞定位:**将CY3-COOH标记到特定蛋白质上,可以…...

数据采集:selenium 获取某网站CDN 商家排名信息

写在前面 工作中遇到,简单整理理解不足小伙伴帮忙指正 对每个人而言,真正的职责只有一个:找到自我。然后在心中坚守其一生,全心全意,永不停息。所有其它的路都是不完整的,是人的逃避方式,是对大…...

5.从头跑一个pipeline

1.安装torch pip install torchvision torch PyTorch的torchvision.models模块中自带的很多预定义模型。torchvision 是PyTorch的一个官方库,专门用于处理计算机视觉任务。在这个库中,可以找到许多常用的卷积神经网络模型,包括ResNet、VGG、…...

leetcode原题: 堆箱子(动态规划实现)

题目: 给你一堆n个箱子,箱子宽 wi、深 di、高 hi。箱子不能翻转,将箱子堆起来时,下面箱子的宽度、高度和深度必须大于上面的箱子。实现一种方法,搭出最高的一堆箱子。箱堆的高度为每个箱子高度的总和。 输入使用数组…...

Java中数组和集合的对比,以及什么情况下使用数组更合适,什么情况下使用集合更合适。集合的基本介绍和集合体系图。

在Java中,数组和集合(Java集合框架)都用于存储多个元素。它们各自有不同的特点和适用场景。下面我会对数组和集合进行对比,并解释何时使用集合更好,以及何时使用数组更合适。 数组和集合的对比: 数组&…...

STM32之17.PWM脉冲宽度调制

一LED0脉冲宽度调制在TIM14_CHI&#xff0c;先将LED&#xff08;PF9&#xff09;代码配置为AF推挽输出模式&#xff0c;将PF9引脚连接到TIM14&#xff0c; #include <stm32f4xx.h>static GPIO_InitTypeDef GPIO_InitStruct;void Led_init(void) {//打开端口F的硬件时钟&a…...

VS2015打开Qt的pro项目文件 报错

QT报错&#xff1a;Project ERROR: msvc-version.conf loaded but QMAKE_MSC_VER isn‘t set 解决方法&#xff1a; 找到本机安装的QT路径&#xff0c;找到“msvc-version.conf”文件&#xff0c;用记事本打开&#xff0c; 在其中添加版本“QMAKE_MSC_VER 1900”保存即可。 …...

骨传导耳机会头疼吗?骨传导耳机会对身体不好吗

一般情况下&#xff0c;骨传导耳机不会引起头疼。由于骨传导耳机的工作原理是通过将声音传导到颞骨和耳部周围的骨骼来传达音频信号&#xff0c;而不是直接进入耳道&#xff0c;因此不会对耳朵造成压力或产生耳疼的感觉。 然而&#xff0c;每个人的感受和体验可能不同&#xff…...

【面试题系列】(一)

Redis有哪些数据结构&#xff1f;其底层是怎么实现的&#xff1f; Redis 系列&#xff08;一&#xff09;&#xff1a;深入了解 Redis 数据类型和底层数据结构 字符串&#xff08;String&#xff09;&#xff1a; 用于存储文本或二进制数据。可以执行字符串的基本操作&#xf…...

vscode C++17便捷配置教程(懒人版)

环境链接 以上是已经配置好的c17环境链接&#xff0c;直接下载解压即可&#xff08;注意文件路径上不要带有中文&#xff09; 下载解压之后按照msys64-mingw64-bin路径打开 然后单击该路径右方空白区域可直接复制路径 然后点击开始菜单搜索“环境变量“并打开&#xff08;如…...

动态数组实现链地址法哈希表

通常情况下哈希函数的输入空间远大于输出空间&#xff0c;因此理论上哈希冲突是不可避免的。比如&#xff0c;输入空间为全体整数&#xff0c;输出空间为数组容量大小&#xff0c;则必然有多个整数映射至同一数组索引。 解决哈希冲突方法常见有&#xff1a;链地址法、开放寻址…...

Eclipse(STS):pom.xml 报错:Multiple markers at this line

pom.xml 报错&#xff1a;Multiple markers at this line STS中&#xff0c;项目能够正常运行&#xff0c;但是 pom.xml 报错&#xff1a;Multiple markers at this line 项目本身没有任何修改&#xff0c;之前不报错的&#xff0c;突然报错了。 Multiple markers at this li…...

CSerialPort教程4.3.x (3) - CSerialPort在MFC中的使用

CSerialPort教程4.3.x (3) - CSerialPort在MFC中的使用 环境&#xff1a; 系统&#xff1a;windows 10 64位 编译器&#xff1a;Visual Studio 2008前言 CSerialPort项目是一个基于C/C的轻量级开源跨平台串口类库&#xff0c;可以轻松实现跨平台多操作系统的串口读写&#x…...

2022版 的IDEA创建一个maven项目(超详细)

一.设置idea中指定的maven的位置以及本地存储仓库 开发中一般我们使用自己下载的maven&#xff0c;不使用IDEA工具自带的&#xff0c;这就需要将我们下载的maven配置到IDEA工具中&#xff0c;配置如下图所示&#xff1a; 或者直接 快捷键 CtrlAltS 直接进入设置 maven home pa…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;采用DevEco Studio实现&#xff0c;包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...