Electron实战(一)：环境搭建/Hello World/打包exe
文章目录
- Electron
- 安装Node.js
- NodeJs推荐配置
- 开始Electron项目
- 创建index.js文件
- 创建src目录
- 运行
- 打包生成exe
- 生成安装包
- 踩坑
- 下一篇
- Electron实战(二)：将Node.js和UI能力（app/BrowserWindow/dialog)等注入html
Electron
Electron是一个使用JavaScript, HTML, CSS开发跨平台桌面应用程序的框架。
Electron整合Chromium浏览器（跨平台界面容器）和Node.js（跨平台系统能力），实现了一个使用JavaScript的全栈开发环境，逐渐成为开发跨平台桌面应用程序的有力竞争者。
2023年7月3日，腾讯正式上线 Windows QQ v9.9.0 体验版本。该版本基于 Electron 重构，实现了 Linux、macOS、Windows 三端架构统一。三个平台一套代码，多端运行，同步更新。三个平台的版本在外观、操作和性能上一致。
官方文档：https://www.electronjs.org/docs/latest/
安装Node.js
官网下载安装最新版NodeJs：
https://nodejs.org/en
安装到D:/env/nodejs/目录底下，安装成功后查看版本：
C:\Users\admin>node -v
v20.10.0C:\Users\admin>npm -v
10.2.3
NodeJs推荐配置
配置npm安装的全局模块的位置，以及缓存目录cache的位置。
如果不配置，后续执行
npm install xxx -g（g代表global全局安装的意思）安装语句时，会将安装的模块安装到C:\Users\用户名\AppData\Roaming\npm路径中，占用C盘空间。
可以在node安目录（比如D:\env\nodejs），下创建node_global目录和node_cache目录，然后执行命令：
npm config set prefix "D:\env\nodejs\node_global"
npm config set cache "D:\env\nodejs\node_cache"
npm config list #查看配置信息
检查设置是否成功：
C:\Users\admin>npm config get prefix
D:\env\nodejs\node_global
C:\Users\admin>npm config get cache
D:\env\nodejs\node_cache
开始Electron项目
创建项目目录，项目目录底下执行npm init，然后安装Electron。
# 进入新建的项目目录
cd D:\dev\web\work\LuckyTools
# 初始化npm项目
npm init
# 项目底下安装electron
npm install electron -S
package.json中记录了安装electron的版本：
"dependencies": {"electron": "^27.1.3"
}
npm安装命令的常用参数比较：
npm install xxx（简写：npm i xxx） 本地安装xxx包，但不将安装包的信息写入package.json（不推荐）
-–global/-g 全局安装，安装后可直接（全局）使用相应包里面提供的命令
–-save/-s/-S 本地安装，安装版本写入package.json的dependencies
–-save-dev/-d/-D 本地安装，安装版本写入package.json的devDependencies
创建index.js文件
项目目录底下创建index.js作为项目的入口文件，文件内容：
//app 模块，控制整个应用程序的生命周期和事件处理
//BrowserWindow 模块，它创建和管理程序的窗口。
const { app, BrowserWindow } = require('electron')
const path = require('path')const iconPath = path.join(__dirname, './src/res/icon.ico')
//在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口
app.on('ready', () => {//创建一个窗口const mainWindow = new BrowserWindow({icon: iconPath,});mainWindow.setMenu(null);//禁用默认的菜单栏//窗口加载html文件mainWindow.loadFile('./src/index.html')
})
创建src目录
里面存放前端页面，比如index.html。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link rel="stylesheet" href="css/xxx.css"/><style></style>
</head>
<body><div>Hello World</div><script src="js/xxx.js"></script><script></script>
</body>
</html>
编辑package.json，scripts属性下，增加start命令：
// package.json
"scripts": {"start": "electron .",
}
运行
npm start
打包生成exe
安装electron-packager后，可打包生成Windows可执行文件exe。
npm install electron-packager -g
添加打包package命令：
"scripts": {"start": "electron .","package":"electron-packager . needle-server --platform=win32 --arch=x64 --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules"},
执行打包命令：
PS D:\dev\web\work\LuckyTools> npm run package> lucky_tools@1.0.0 package
> electron-packager . needle-server --platform=win32 --arch=x64 --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modulesPackaging app for platform win32 x64 using electron v27.1.3
Wrote new app to: out\needle-server-win32-x64
生成安装包
可以使用electron-builder，由于没有实际测试，略过。
npm i electron-builder --D
踩坑
笔者安装的版本：
"devDependencies": {"electron-builder": "^24.9.1","electron-packger": "^24.9.1"}
由于electron-packager依赖较新的node版本。只好重装了node最新版本。但安装后发现npm不能用了，npm -v 报错：
D:\env\nodejs\node_modules\npm\lib\es6\validate-engines.js:31throw err^TypeError: Class extends value undefined is not a constructor or nullat Object.<anonymous> (D:\env\nodejs\node_modules\npm\node_modules\fs-minipass\lib\index.js:136:4)at Module._compile (node:internal/modules/cjs/loader:1376:14)at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)at Module.load (node:internal/modules/cjs/loader:1207:32)at Module._load (node:internal/modules/cjs/loader:1023:12)at Module.require (node:internal/modules/cjs/loader:1235:19)at require (node:internal/modules/helpers:176:18)at Object.<anonymous> (D:\env\nodejs\node_modules\npm\node_modules\cacache\lib\content\read.js:4:13)at Module._compile (node:internal/modules/cjs/loader:1376:14)at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)Node.js v20.10.0
无奈，遇到版本不兼容了！！
只好先卸载nodejs，删除nodejs/node_modules/npm整个目录，然后重新安装最新版的nodejs。
下一篇
Electron实战(二)：将Node.js和UI能力（app/BrowserWindow/dialog)等注入html
相关文章：
Electron实战(一)：环境搭建/Hello World/打包exe
文章目录 Electron安装Node.jsNodeJs推荐配置开始Electron项目创建index.js文件创建src目录运行打包生成exe生成安装包踩坑 下一篇Electron实战(二)：将Node.js和UI能力（app/BrowserWindow/dialog)等注入html Electron Electron是一个使用JavaScript, HT…...
【C++】运算符重载详解
💗个人主页💗 ⭐个人专栏——C学习⭐ 💫点击关注🤩一起学习C语言💯💫 目录 导读 1. 为什么需要运算符重载 2. 运算符重载概念 3. 运算符重载示例 3.1 运算符重载 3.2 >或<运算符 4. 运算符重…...
评论区功能的简单实现思路
评论区功能是社交类项目中的核心组成部分，它涉及到前端的交云和后端的数据处理。基于你的技术栈（前端 Vue3，后端 Java），下面是一个具体的实现思路和数据库设计建议，并探索一下知乎的评论系统。 数据库设计…...
Java自救手册
目录 访问地址 访问地址，发现不通，无法访问： 网络不通一般有两种情况： Maven 拿Maven 拿到Maven以后 Maven单独的报红 Git git注意： 目录 访问地址 访问地址，发现不通，无法访问&…...
ASM-HEMT参数提取和模型验证测试
参数提取程序 直流I-V参数提取 DC模型参数提取流程对于ASM-GaN-HEMT模型可以总结在下图中。 以下步骤描述了该流程： 在模型中设置物理参数，如L（沟道长度）、W（沟道宽度）、NF（栅指数…...
浅压缩、深压缩、双引擎、计算机屏幕编码……何去何从？
专业视听领域尤其显示控制和坐席控制领域，最近几年最激动人心的技术，莫过于分布式了。 分布式从推出之日就备受关注：担心稳定性的，质疑同步性能的，怀疑画面质量的…… 诚然，我们在此前见多了带着马赛克的…...
2020年通信工程师初级专业实务真题
文章目录 一、第1章 现代通信网概述：信令网、同步网、管理网。第10章 通信业务：通信产业链，通信终端的分类，通信业务的定义及分类二、第3章 接入网：无线接入网的优点，接入网的接口（UNIÿ…...
Linux常见面试题汇总
Linux上如何查询某个端口是否被占用？ 在Linux上，你可以使用以下几种方法来查询某个端口是否被占用： 使用netstat命令： netstat -tuln | grep <端口号>这个命令会列出当前正在运行的所有TCP和UDP端口，并过滤出指…...
C语言小游戏：贪吃蛇（游戏开发的环境和功能介绍）
❀❀❀ 文章由不准备秃的大伟原创 ❀❀❀ ♪♪♪ 若有转载，请联系博主哦~ ♪♪♪ ❤❤❤ 致力学好编程的宝藏博主，代码兴国！❤❤❤ 生命不停，学习不止。铁汁们，我是大伟，欢迎来到大伟的游戏时间，…...
ElementUI Form：InputNumber 计数器
ElementUI安装与使用指南 InputNumber 计数器 点击下载learnelementuispringboot项目源码 效果图 el-radio.vue （InputNumber 计数器）页面效果图 项目里el-input-number.vue代码 <script> export default {name: el_input_number,data() {re…...
apk反编译修改教程系列---修改apk的默认颜色 布局颜色 手机电脑同步演示【十】
往期教程： apk反编译修改教程系列-----修改apk应用名称 任意修改名称 签名【一】 apk反编译修改教程系列-----任意修改apk版本号 版本名 防止自动更新【二】 apk反编译修改教程系列-----修改apk中的图片 任意更换apk桌面图片【三】 apk反编译修改教程系列---简单…...
响应式开发如何设置断点，小屏幕界面该如何显示（有动图）
Hi，我是贝格前端工场，本期分享响应式开发，如何设置屏幕断点，pc页面布局到了移动端之后该如何布局的问题，微软也提供了设置屏幕断点的动图演示，非常直观。 一、什么是响应式开发，为何要设置屏幕断…...
Java基础 集合（二）List详解
目录 简介 数组与集合的区别如下： 介绍 AbstractList 和 AbstractSequentialList Vector 替代方案 Stack ArrayList LinkedList 前言-与正文无关 生活远不止眼前的苦劳与奔波，它还充满了无数值得我们去体验和珍惜的美好事物。在这个快节奏的世界…...
UE4运用C++和框架开发坦克大战教程笔记（十七）（第51~54集）
UE4运用C和框架开发坦克大战教程笔记（十七）（第51~54集） 51. UI 框架介绍UE4 使用 UI 所面临的问题以及解决思路关于即将编写的 UI 框架的思维导图 52. 管理类与面板类53. 预加载与直接加载54. UI 首次进入界面 51. UI 框架介绍 U…...
GaussDB新体验，新零售选品升级注入新思路【华为云GaussDB：与数据库同行的日子】
选品思维：低频VS高频 一个的商超，假设有50个左右的品类，每个品类下有2到10个不等的商品。然而如此庞大的商品，并非所有都是高频消费品。 结合自身日常的消费习惯，对于高频和低频的区分并不难。一般大型家电、高端礼盒…...
C语言问题汇总
指针 #include <stdio.h>int main(void){int a[4] {1,2,3,4};int *p &a1;int *p1 a1;printf("%#x,%#x",p[-1],*p1);} 以上代码中存在错误。 int *p &a1; 错误1：取a数组的地址，然后1，即指针跳过int [4]大小的字节…...
 的作用范围)
QT 的 blockSignals(true) 的作用范围
在 Qt 中，blockSignals 是一个用于控件的方法，它用于阻止控件发出的信号。如果你在一个 MainWindow 对象上调用 blockSignals(true)，它会阻止该 MainWindow 对象发出的所有信号。 这意味着，如果 MainWindow 上有任何子控件&#…...
【C++私房菜】类和对象万字详解
目录 一、类与对象 1、类是什么 二、类和对象的基础知识 2.1 定义类：成员变量和成员函数 2.2 创建对象：实例化一个类的对象。 2.3对象的生命周期：构造函数和析构函数。 a. 构造函数 b. 析构函数 c.小结： 三、成员变量和…...
PDF下载添加水印和访问密码
下载接口 ApiOperation(value "下载文件-pdf", notes "下载文件pdf版", httpMethod "GET", response WebResult.class)RequestMapping(value "/downloadPdf", method RequestMethod.GET)public void downloadFilePdf(RequestPar…...
基于SSM+MySQL的的新闻发布系统设计与实现
目录 项目简介 项目技术栈 项目运行环境 项目截图 代码截取 源码获取 项目简介 新闻发布系统是一款基于Servletjspjdbc的网站应用程序，旨在提供一个全面且高效的新闻发布平台。该系统主要包括后台管理和前台新闻展示两个平台，涵盖了新闻稿件的撰写…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
.Net框架，除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
在Ubuntu中设置开机自动运行（sudo）指令的指南
在Ubuntu系统中，有时需要在系统启动时自动执行某些命令，特别是需要 sudo权限的指令。为了实现这一功能，可以使用多种方法，包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法，并提供…...
HTML前端开发：JavaScript 常用事件详解
作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件 当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
.Net Framework 4/C# 关键字（非常用，持续更新...）
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...
【Go语言基础【12】】指针：声明、取地址、解引用
文章目录 零、概述：指针 vs. 引用（类比其他语言）一、指针基础概念二、指针声明与初始化三、指针操作符1. &：取地址（拿到内存地址）2. *：解引用（拿到值） 四、空指针&am…...
Selenium常用函数介绍
目录 一，元素定位 1.1 cssSeector 1.2 xpath 二，操作测试对象 三，窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四，弹窗 五，等待 六，导航 七，文件上传 …...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念（ACID） 事务是…...
uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）
UniApp 集成腾讯云 IM 富媒体消息全攻略（地理位置/文件） 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型，核心实现方式： 标准消息类型：直接使用 SDK 内置类型（文件、图片等）自…...