初识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…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
华为云AI开发平台ModelArts
华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...
Appium+python自动化（十六）- ADB命令
简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
MVC 数据库
MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...
江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下，江苏艾立泰以一场跨国资源接力的创新实践，重新定义了绿色供应链的边界。 跨国回收网络：废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点，将海外废弃包装箱通过标准…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
Python爬虫（一）：爬虫伪装
一、网站防爬机制概述 在当今互联网环境中，具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类： 身份验证机制：直接将未经授权的爬虫阻挡在外反爬技术体系：通过各种技术手段增加爬虫获取数据的难度…...
根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：
根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见 模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...