初识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…...
Unity Timeline实战：除了过场动画，你的Signal Track和Control Track用对了吗？
Unity Timeline实战：Signal Track与Control Track的高级应用指南 在Unity开发者的工具箱中，Timeline常被视为制作过场动画的专属工具。但当我们深入挖掘其潜力时，会发现它实际上是一个强大的游戏逻辑编排系统。本文将带您突破基础应用&#x…...
Configor 自动重载功能深度解析：实现配置热更新的终极指南
Configor 自动重载功能深度解析：实现配置热更新的终极指南 【免费下载链接】configor Golang Configuration tool that support YAML, JSON, TOML, Shell Environment 项目地址: https://gitcode.com/gh_mirrors/co/configor Configor 是 Golang 生态系统中一…...
一小时搞懂Python函数：原理+实践
目录 🙄什么是Python函数（了解函数的概念） 🤔为什么需要它？（背景和痛点） 😮函数的分类（函数有哪些？） 内置函数 标准库函数 第三方库函数 定…...
从黑盒到白盒：Testbench验证机制与FPGA/ASIC开发实践
1. 从“黑盒”到“白盒”：理解Testbench的本质在数字电路设计，尤其是FPGA和ASIC开发领域，我们常常把设计好的硬件描述语言（HDL）模块，比如一个Verilog写的加法器或者一个VHDL写的状态机，称为“待…...
SuperRDP完整指南：一键解锁Windows远程桌面多用户并发连接限制
SuperRDP完整指南：一键解锁Windows远程桌面多用户并发连接限制 【免费下载链接】SuperRDP Super RDPWrap 项目地址: https://gitcode.com/gh_mirrors/su/SuperRDP SuperRDP是基于RDPWrap技术的智能工具，专为突破Windows系统远程桌面功能限制而设计…...
基于RP2040与CircuitPython的互动声光按钮：从硬件到代码的完整实现
1. 项目概述：一个能听会“说”的互动按钮几年前，我第一次接触嵌入式开发时，被那些能感知物理世界并做出回应的“智能”小玩意儿深深吸引。从简单的闪烁LED，到能根据环境光调整亮度的灯带，再到能播放声音的互动装置&…...
FFXIV TexTools：如何用3个步骤打造你的专属艾欧泽亚冒险形象
FFXIV TexTools：如何用3个步骤打造你的专属艾欧泽亚冒险形象 【免费下载链接】FFXIV_TexTools_UI 项目地址: https://gitcode.com/gh_mirrors/ff/FFXIV_TexTools_UI 想象一下，你站在艾欧泽亚的冒险广场上，周围的玩家都穿着独特的装备…...
C语言变量与运算符详解：从内存管理到高效编程实践
1. 从零到一：为什么C语言是程序员的“内功心法”？如果你刚看完系列的第一篇，对C语言有了一个模糊的印象，觉得它古老、复杂，甚至有点“过时”，那太正常了。我刚开始接触编程时，也这么想。为什么放…...
生态数据分析避坑指南：你的Mantel检验结果可靠吗？聊聊距离算法选择与共线性控制
生态数据分析避坑指南：你的Mantel检验结果可靠吗？聊聊距离算法选择与共线性控制 生态数据分析中，Mantel检验作为一种常用的空间相关性分析方法，被广泛应用于物种分布与环境因子关系的研究。然而，许多研究者在实际操作中…...
Python实战：基于InsightFace构建实时人脸识别系统
1. 环境准备与InsightFace初探 第一次接触人脸识别系统开发时，我被各种算法和框架搞得晕头转向，直到发现了InsightFace这个宝藏库。它就像瑞士军刀一样集成了人脸检测、对齐、识别全套功能，而且对Python开发者特别友好。记得当时用OpenCVDlib…...