初识Electron，创建桌面应用
历史小剧场
呜呼！古有匈奴犯汉，晋室不纲，铁木夺宋，虏清入关，神舟陆沉二百年有余，中国之见灭于满清初非满人能灭之，能有之也因有汉奸以作虎怅，残同胞媚异种，始有吴三桂洪承畴，继有曾国藩袁世凯以为厉。今率堂堂之师，征讨汉贼袁氏筑共和之体，或免于我子子孙孙被异族奴役。---- 《讨汉贼袁世凯檄文》
基本使用
1、初始项目
注意：main: 改为 main.js
npm init
2、安装electron
npm install --save-dev electron
3、修改package.json
{"name": "electron-app-cycle","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "nodemon --watch main.js --exec npm run build","build": "electron ."},"author": "","license": "ISC","devDependencies": {"electron": "^30.0.1"}
}
4、编写main.js
const { app, BrowserWindow, ipcMain } = require('electron')// 创建窗口
let mainWin = null;
function createWindow() {mainWin = new BrowserWindow({x: 100,y: 100,show: false,width: 1000,height: 600,maxWidth: 1000,maxHeight: 800,minWidth: 400,minHeight: 200,resizable: false, // 可缩放movable: true, // 可移动frame: true, // 无边框title: "Electron 学习",icon: "logo.png",// transparent: true, // 透明autoHideMenuBar: true, // 隐藏菜单栏webPreferences: {nodeIntegration: true, // 集成 NodejscontextIsolation: false, // 隔离上下文}})mainWin.loadFile('index.html')mainWin.on("ready-to-show", () => {mainWin.show()})mainWin.webContents.on('dom-ready', () => {console.log("22222 ---> dom-ready")})mainWin.webContents.on('did-finish-load', () => {console.log("33333 ---> did-finish-load")})// 当前窗口关闭时触发mainWin.on("closed", () => {console.log("88888 ---> this window is closed")mainWin = null;})
}// 监听来自渲染进程的 openListWindow 事件
ipcMain.on("openListWindow", () => {const chidlWin = new BrowserWindow({x: 400,y: 300,width: 400,height: 200,parent: mainWin,webPreferences: {nodeIntegration: true,}})chidlWin.loadFile('list.html')chidlWin.on("closed", () => {chidlWin = null})
})app.on('ready', () => {console.log("11111 ---> app is ready")createWindow()
})app.on('window-all-closed', () => {console.log("44444 ---> all windows are closed")app.quit()
})app.on('before-quit', () => {console.log("55555 ---> before-quit")
})app.on('will-quit', () => {console.log("66666 ---> will-quit")
})app.on('quit', () => {console.log("77777 ---> quit")
})
补充知识：Electron 生命周期
- ready: app 初始化完成
- dom-ready: 一个窗口中的文本加载完成
- did-finish-load: 导航完成时触发
- window-all-closed: 所有窗口都被关闭时触发
- before-quit: 在关闭窗口之前触发
- will-quit: 在窗口关闭并且应用退出时触发
- quit: 当所有窗口被关闭时触发
- closed: 当窗口关闭时触发，此时应删除窗口引用
5、编写主窗口页面 index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title>
</head>
<body><h2>Electron生命周期</h2><button id="open-list-window">点击打开新窗口</button><script src="index.js"></script>
</body>
</html>
index.js
const { ipcRenderer } = require('electron')window.addEventListener("DOMContentLoaded", () => {const btn = document.getElementById("open-list-window");btn.onclick = () => {// 当按钮被点击时，发送消息到主进程ipcRenderer.send('openListWindow')}
})
补充知识
- DOMContentLoaded事件：此时浏览器已经完全加载了HTML文件，并且DOM树已经生成好了。但是其他外部资源，比如样式文件、图片、字体等并没有加载好；
- Load事件：此时浏览器已经将所有的资源都加载完毕，可以正确读取页面中的资源。
6、编写子窗口 list.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新窗口</title>
</head>
<body><div>新窗口</div>
</body>
</html>
运行
npm run start
Electron案例
相关文章：
初识Electron，创建桌面应用
历史小剧场 呜呼！古有匈奴犯汉，晋室不纲，铁木夺宋，虏清入关，神舟陆沉二百年有余，中国之见灭于满清初非满人能灭之，能有之也因有汉奸以作虎怅，残同胞媚异种，始有吴三桂洪承…...
AI编码时代到来？实现编程梦想的利器—Baidu Comate测评
文章目录 Comate智能编码是什么？Comate支持的环境 Comate应用安装实际操作对话式生成代码生成代码注释智能单测项目测试调优功能 总结 Comate智能编码是什么？ 在如今这个拥抱AI的时代，市面上已经产出了很多Ai代码助手，如果你还没…...
去中心化自治组织（DAO）
文章目录 一、DAO (Decentralized Autonomous Organization) 去中心化自治组织 二、举例说明 1、例子1 2、例子2 总结 一、DAO (Decentralized Autonomous Organization) 去中心化自治组织 DAO是一种基于区块链平台上的组织结构，它通过智能合约来实现组织的…...
MySQL之多表查询
1. 前言 多表查询，也称为关联查询.指两个或两个以上的表一起完成查询操作.前提条件 : 这些一起查询的表之间是有关系的(一对一/一对多).他们之间一定是有关联字段，这个关联字段可能建立了外键，也可能没有建立外键. 2. 笛卡尔积现象(交叉连接…...
极端天气频发，我们普通人如何保全自己
随着全球气候变暖的加剧，极端天气事件如同一位不请自来的“不速之客”，频繁地闯入我们的生活。暴风雨、暴风雪、台风、干旱、热浪等极端天气现象，不仅给人们的生命和财产安全带来了前所未有的挑战，更对社会的正常秩序构成了严重威…...
直面市场乱价，品牌商家该如何解决？
在当今的商业世界中，品牌商面临着一系列严峻挑战，其中如何有效管理经销商价格是一个关键难题。经销商随意调整价格的行为，不仅会损害品牌的信誉与形象，还可能导致市场秩序混乱，使品牌利润大幅缩水。因此，采…...
Spring中的Bean相关理解
在Spring框架中，Bean是一个由Spring IoC容器实例化、配置和管理的对象。Bean是一个被Spring框架管理并且被应用程序各个部分所使用的对象。Spring IoC容器负责Bean的创建、初始化、依赖注入以及销毁等生命周期管理。 注：喜欢的朋友可以关注公众号“JAVA学…...
操作系统实战（二）（linux+C语言）
实验内容 通过Linux 系统中管道通信机制，加深对于进程通信概念的理解，观察和体验并发进程间的通信和协作的效果 ，练习利用无名管道进行进程通信的编程和调试技术。 管道pipe是进程间通信最基本的一种机制,两个进程可以通过管道一个在管道一…...
哪些情况下会触发MySQL的预读机制？
MySQL的预读机制主要与其底层存储引擎的实现有关，尤其是InnoDB存储引擎。预读（Pre-reading）或预取（Prefetching）是一种性能优化技术，其中数据库系统主动读取可能很快就会被查询到的数据页到缓冲池ÿ…...
react使用谷歌人机验证
在项目中，需要对请求验证，防止被爆破，这里使用的是谷歌的recaptcha-v3。 1.申请谷歌人机验证的api 申请链接,申请完后需要将两个谷歌颁发的key分别写入前，后端的配置环境中，后面会使用. 2.前端部分 前端使用的是viteC…...
java JMH 学习
JMH 是什么？ JMH（Java Microbenchmark Harness）是一款专用于代码微基准测试的工具集，其主要聚焦于方法层面的基准测试，精度可达纳秒级别。此工具由 Oracle 内部负责实现 JIT 的杰出人士编写，他们对 JIT 及…...
本地运行AI大模型简单示例
一、引言 大模型LLM英文全称是Large Language Model，是指包含超大规模参数（通常在十亿个以上）的神经网络模型。2022年11月底，人工智能对话聊天机器人ChatGPT一经推出，人们利用ChatGPT这样的大模型帮助解决很多事情&am…...
图像处理：时域、空域、频率的滤波介绍
首先要搞清楚为什么会呈现出不同域的维度，来理解和处理图像，原因是图像的构成有多个维度的信息特点。比如一段视频从时间顺序来看，相邻的2个图像帧绝大部分信息是相同的，这就构成了前向预测的理论基础；比如一帧图像从空…...
TC8002D 是一颗带关断模式的音频功放IC
一、一般概述 TC8002D是一颗带关断模式的音频功放IC。在5V输入电压下工作时，负载(3Ω)上的平均功率 为3 W，且失真度不超过10%。而对于手提设备而言，当VDD作用于关断端时，TC8002D将会进入关断模式，此时的功耗极…...
深度学习之基于Vgg19预训练卷积神经网络图像风格迁移系统
欢迎大家点赞、收藏、关注、评论啦 ，由于篇幅有限，只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 在数字艺术和图像处理领域，图像风格迁移技术一直备受关注。该技术可以将一幅图像的内容和…...
MySQL：多表查询练习
#1.出版社信息 与 图书信息 交叉连接 select * from 出版社信息 cross join 图书信息; #2.从“客户信息”和“订单信息”两张数据表中查询购买了商品的客户信息，要求查询结果显示客户姓名、订单编号、订单状态。 select 客户信息.客户姓名,订单信息.订单编号,订单…...
# 从浅入深 学习 SpringCloud 微服务架构（八）Sentinel（1）
从浅入深 学习 SpringCloud 微服务架构（八）Sentinel（1） 一、sentinel：概述 1、前言 – 服务熔断 Hystrix 的替换方案。 1）2018年底 Netflix 官方宣布 Hystrix 已经足够稳定，不再积极开发 Hys…...
[微信小程序] 入门笔记2-自定义一个显示组件
[微信小程序] 入门笔记2-自定义一个显示组件 0. 准备工程 新建一个工程,删除清空app的内容和其余文件夹.然后自己新建pages和components创建1个空组件和1个空页面. 设定 view 组件的默认样式,使其自动居中靠上,符合习惯.在app.wxss内定义,作用做个工程. /**app.wxss**/ /* 所…...
YOLO代码复现
睿智的目标检测66——Pytorch搭建YoloV8目标检测平台_pytorch_quantization yolov8-CSDN博客 Mask rcnn代码实现_pytorch版_适用30系列显卡_mask rcnn 30显卡-CSDN博客 完整且详细的Yolov8复现训练自己的数据集-CSDN博客...
使用fitten code插件（vscode），替换通义千问，识别需求中的输入输出
今天我们介绍一个工具，具体介绍可以参考我的这篇文章的介绍，支持vs code 插件，Fitten Code是一款由非十科技开发的AI代码助手，旨在通过大模型驱动来提升编程效率和体验-免费神器-CSDN博客https://blog.csdn.net/lijigang100/article/details/137833223?spm=1001.2014.3001…...
vue使用pdfjs-dist在电脑上展示PDF文件
安装 安装的时候一定要带上版本号，这里采用的是2.0.943（因为这个版本对于我目前的项目比较合适可以正常使用，其他版本大概率会报错），当前项目使用的是vue2，vue的版本是2.5.10 npm install pdfjs-dist@2.0.943 查看版本发现这玩意版本非常之多 使用 在使用pdfjs-dist库…...
【网站项目】戒烟网站
🙊作者简介：拥有多年开发工作经验，分享技术代码帮助学生学习，独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件，帮助大学选题。赠送开题报告模板ÿ…...
慢性软组织疼痛如何使用DMS深层肌肉刺激仪进行治疗？
使用DMS深层肌肉刺激仪治疗慢性软组织疼痛，可以遵循以下步骤： 准备工作：首先，确保DMS设备已经充电或插上电源，并根据需要调整振动强度和频率。DMS深层肌肉刺激仪是通过快速连续的振动和打击来刺激深层肌肉的设备&#…...
自动化测试常用工具
自动化测试工具是非常重要的。自动化测试工具可以帮助程序员提高工作效率，减少重复劳动和人为错误，提高产品质量。下面我将介绍几个常用的自动化测试工具。 Selenium：Selenium是一个开源的自动化测试框架，用于Web应用程序的自动化…...
【Osek网络管理测试】[TG4_TC4]tWaitBusSleep
🙋♂️ 【Osek网络管理测试】系列💁♂️点击跳转 文章目录 1.环境搭建2.测试目的3.测试步骤4.预期结果5.测试结果1.环境搭建 硬件：VN1630 软件：CANoe 2.测试目的 验证DUT的tWBS时间参数是否符合NM标准 本处规定tWBS在[1350ms,1650ms]范围内符合要求 3.测试步骤…...
java08基础(值传递和引用传递 类和对象)
目录 一. 值传递和引用传递 1. 值传递 2. 引用传递 二. 面向对象思想 三. 类和对象 1. 类 2. 对象 2.1 使用 2.2 成员变量和局部变量区别 2.3 操作成员方法 2.4 this关键字(初识) 2.5 构造方法 (见java09) 一. 值传递和引用传递 1. 值传递 值传递是指在调用函数时将…...
高级数据结构与算法习题（9）
一、判断题 1、Let S be the set of activities in Activity Selection Problem. Then the earliest finish activity am must be included in all the maximum-size subset of mutually compatible activities of S. T F 解析：F。设S是活动选择问题中的一…...
Linux的vim下制作进度条
目录 前言： 回车和换行有区别吗？ 回车和换行的区别展示（这个我在Linux下演示） 为什么会消失呢? 回车和换行的区别 为什么\r和\n产生的效果不同？ 打印进度条： （1）打印字符串 …...
C++学习笔记2
T1 奇怪的教室 题目背景 LSU 的老师有个奇怪的教室，同学们会从左到右坐成一个横排，并且同一个位置可以坐多个同学。这天，入学考试的成绩下来了。同学们想根据入学考试的成绩，找出班里学霸扎堆的区域“学霸区”。 题目描述 共有…...
细数：智能物流装备界的并购案~
导语 大家好，我是智能仓储物流技术研习社的社长，老K。专注分享智能仓储物流技术、智能制造等内容。 新书《智能物流系统构成与技术实践》 近年来，随着智能仓储物流行业的快速发展，全球范围内的并购活动日益频繁，各大企…...