Electron学习+打包
1. 什么是 Electron？
2. Electron 的优势
3. Electron 技术架构
3.1. 技术架构
3.2. 进程模型
4. 搭建⼀个⼯程
{"name": "test","version": "1.0.0","main": "main.js","scripts": {"start": "electron ." //start命令⽤于启动整个应⽤},"author": "tianyu", //为后续能顺利打包，此处要写明作者。"license": "ISC","description": "this is a electron demo", //为后续能顺利打包，此处要编写描述。
}npm i electron -D在 main.js 中编写代码，创建⼀个基本窗⼝
/*main.js运⾏在应⽤的主进程上，⽆法访问Web相关API，主要负责：控制⽣命周期、显示界⾯、
控制渲染进程等其他操作。
*/
const { app, BrowserWindow } = require('electron')
// ⽤于创建窗⼝
function createWindow() {const win = new BrowserWindow({width: 800, // 窗⼝宽度height: 600, // 窗⼝⾼度autoHideMenuBar: true, // ⾃动隐藏菜单栏alwaysOnTop: true, // 置顶x: 0, // 窗⼝位置x坐标y: 0 // 窗⼝位置y坐标})// 加载⼀个远程⻚⾯win.loadURL('http://www.atguigu.com')
}
// 当app准备好后，执⾏createWindow创建窗⼝
app.on('ready',()=>{createWindow()
})npm start
Electron
客户端，桌面应用，安装在电脑里面用的，而不是手机里面用的，比如视频编辑和头像处理软件
这两个需要补全，否则无法打包
- 入口点 应当是
main.js(您很快就会创建它) - author、license 和 description 可以是任何值，但在稍后的packaging中是必需的。
初次打开项目，会有默认的文件
autoHideMenuBar: true //自动隐藏菜单栏
alwaysOnTop: true
一打开页面从左面的x:0,y:0开始
ctrl+shift+i 调出控制台
5. 加载本地⻚⾯
创建 pages/index.html 编写内容：
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>index</title></head><body><h1>你好啊！</h1></body>
</html>修改 mian.js 加载本地⻚⾯
// 加载⼀个本地⻚⾯
win.loadFile('./pages/index.html')<meta http-equiv="Content-Security-Policy" content="default-src 'self'; st
yle-src 'self' 'unsafe-inline'; img-src 'self' data:;">6. 完善窗⼝⾏为
// 当所有窗⼝都关闭时
app.on('window-all-closed', () => {// 如果所处平台不是mac(darwin)，则退出应⽤。if (process.platform !== 'darwin') app.quit()
})// 当app准备好后，执⾏createWindow创建窗⼝
app.on('ready',()=>{createWindow()// 当应⽤被激活时app.on('activate', () => {//如果当前应⽤没有窗⼝，则创建⼀个新的窗⼝if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})7. 配置⾃动重启
npm i nodemon -Dscripts": {"start": "nodemon --exec electron ."
},{"ignore": ["node_modules","dist"],"restartable": "r","watch": ["*.*"],"ext": "html,js,css"
}8. 主进程与渲染进程
下图是 Chrome 浏览器的程序架构，图来⾃于Chrome 漫画。
Electron 应⽤的结构与上图⾮常相似，在 Electron 中主要控制两类进程：主进程、渲染器进程。
8.1. 主进程
8.2. 渲染进程
9. Preload 脚本
const {contextBridge} = require('electron')
// 暴露数据给渲染进程
contextBridge.exposeInMainWorld('myAPI',{n:666,version:process.version
})const win = new BrowserWindow({/*******/webPreferences:{preload:path.resolve(__dirname,'./preload.js')}/*******/
})<body><h1>你好啊！</h1><button id="btn">在⽤户的D盘创建⼀个hello.txt</button><script type="text/javascript" src="./render.js"></script>
</body>btn.addEventListener('click',()=>{console.log(myAPI.version)document.body.innerHTML += `<h2>${myAPI.version}</h2>`
})
渲染进程（n个）与主进程（1个，node环境下运行）
预加载脚本是在渲染进程执行的，只能执行一部分api
预加载先执行，渲染进程后执行
preload.js
contextBridge.exposeInMainWorld('abc',{
xyz:100
})
预加载脚本不能访问__dirname，会报错
preload.js
contextBridge.exposeInMainWorld('myAPI',{
version: process.version,
xyz: __dirname
})
render.js
btn1.onclick = () =>{
// alert('你点我了',process.version)
console.log(myAPI.xyz); //报错如下
}
10. 进程通信（IPC）
- IPC 全称为： InterProcess Communication ，即：进程通信。
- IPC 是 Electron 中最为核⼼的内容，它是从 UI 调⽤原⽣ API 的唯⼀⽅法！
- Electron 中，主要使⽤ ipcMain和 ipcRenderer来定义“通道”，进⾏进程通信。
10.1. 渲染进程➡️主进程（单向）
渲染进程向主进程单向通信
1. ⻚⾯中添加相关元素， render.js 中添加对应脚本
index.html
<input id="content" type="text"><br><br>
<button id="btn">在⽤户的D盘创建⼀个hello.txt</button>render.js
const btn = document.getElementById('btn')
const content = document.getElementById('content')
btn.addEventListener('click',()=>{console.log(content.value)myAPI.saveFile(content.value)
})2. preload.js 中使⽤ ipcRenderer.send('信道',参数) 发送消息，与主进程通信。
preload.js
const {contextBridge,ipcRenderer} = require('electron')
contextBridge.exposeInMainWorld('myAPI',{/*******/saveFile(str){// 渲染进程给主进程发送⼀个消息ipcRenderer.send('create-file',str)}
})// ⽤于创建窗⼝
function createWindow() {/**********/// 主进程注册对应回调ipcMain.on('create-file',createFile)// 加载⼀个本地⻚⾯win.loadFile(path.resolve(__dirname,'./pages/index.html'))
}
//创建⽂件
function createFile(event,data){fs.writeFileSync('D:/hello.txt',data)
}写入成功
10.2. 渲染进程↔主进程（双向）
<button id="btn">读取⽤户D盘的hello.txt</button>render.js
const btn = document.getElementById('btn')
btn.addEventListener('click',async()=>{let data =document.body.innerHTML += `<h2>${data}</h2>`
})const {contextBridge,ipcRenderer} = require('electron')
contextBridge.exposeInMainWorld('myAPI',{/*******/readFile (path){return ipcRenderer.invoke('read-file')}
})// ⽤于创建窗⼝
function createWindow() {/**********/// 主进程注册对应回调ipcMain.handle('read-file',readFile)// 加载⼀个本地⻚⾯win.loadFile(path.resolve(__dirname,'./pages/index.html'))
}
//读取⽂件
function readFile(event,path){return fs.readFileSync(path).toString()
}10.3. 主进程到➡️渲染进程
window.onload = ()=>{myAPI.getMessage(logMessage)
}
function logMessage(event,str){console.log(event,str)
}const {contextBridge,ipcRenderer} = require('electron')
contextBridge.exposeInMainWorld('myAPI',{/*******/getMessage: (callback) => {return ipcRenderer.on('message', callback);}
})// ⽤于创建窗⼝
function createWindow() {/**********/// 加载⼀个本地⻚⾯win.loadFile(path.resolve(__dirname,'./pages/index.html'))// 创建⼀个定时器setTimeout(() => {win.webContents.send('message','你好啊！')}, 6000);
}11. 打包应⽤
npm install electron-builder -D备注：json ⽂件不⽀持注释，使⽤时请去掉所有注释
{"name": "video-tools", // 应⽤程序的名称"version": "1.0.0", // 应⽤程序的版本"main": "main.js", // 应⽤程序的⼊⼝⽂件"scripts": {"start": "electron .", // 使⽤ `electron .` 命令启动应⽤程序"build": "electron-builder" // 使⽤ `electron-builder` 打包应⽤程序，⽣成
安装包},"build": {"appId": "com.atguigu.video", // 应⽤程序的唯⼀标识符// 打包windows平台安装包的具体配置"win": {"icon":"./logo.ico", //应⽤图标"target": [{"target": "nsis", // 指定使⽤ NSIS 作为安装程序格式"arch": ["x64"] // ⽣成 64 位安装包}]},"nsis": {"oneClick": false, // 设置为 `false` 使安装程序显示安装向导界⾯，⽽不是⼀
键安装"perMachine": true, // 允许每台机器安装⼀次，⽽不是每个⽤户都安装"allowToChangeInstallationDirectory": true // 允许⽤户在安装过程中选择
安装⽬录}},"devDependencies": {"electron": "^30.0.0", // 开发依赖中的 Electron 版本"electron-builder": "^24.13.3" // 开发依赖中的 `electron-builder` 版本},"author": "tianyu", // 作者信息"license": "ISC", // 许可证信息"description": "A video processing program based on Electron" // 应⽤程
序的描述
}3. 执⾏打包命令
npm run build12. electron-vite
扩展
渲染进程与渲染进程通信借助于主进程
总体代码：
main.js
console.log('main');
// BrowserWindow ⽤于创建窗⼝
const { app, BrowserWindow, ipcMain } = require("electron");
const path = require('path')
const fs = require('fs')function writeFile(_,data){console.log(_,data);fs.writeFileSync('D:/hello.txt',data)
}
function readFile(){const res = fs.readFileSync('D:/hello.txt').toString()// console.log('###', res);return res
}
const createWindow = () => {// ⽤于创建窗⼝const win = new BrowserWindow({width: 800,height: 600,autoHideMenuBar: true,// x: 0,// y: 0,// alwaysOnTop: true,webPreferences:{preload:path.resolve(__dirname,'./preload.js')}});ipcMain.on('file-save', writeFile),ipcMain.handle('file-read', readFile),//win.loadURL('http://www.atguigu.com')win.loadFile("./pages/index.html");
};
// console.log(process.version); //node
// console.log(process.versions.chrome); //chrome
// console.log(process.versions.node); //node
// console.log(process.versions.electron); //electron
// 当app准备好后，执⾏createWindow创建窗⼝
app.on("ready", () => {console.log('应用准备完毕了');createWindow()// 当应⽤被激活时app.on("activate", () => {// 如果当前应⽤没有窗⼝，则创建⼀个新的窗⼝if (BrowserWindow.getAllWindows().length === 0) createWindo();});
});
// 当所有窗⼝都关闭时(Windows & Linux)
app.on("window-all-closed", () => {// // 如果所处平台不是mac(darwin)，则退出应⽤， app.quit()if (process.platform !== "darwin") app.quit();
});preload.js
// 预加载教程，作为主进程与渲染进程的桥梁
console.log('preload',process.version);
const {contextBridge,ipcRenderer} = require('electron')contextBridge.exposeInMainWorld('myAPI',{version: process.version,// xyz: __dirname //报错saveFile:(data)=>{// ipcRenderer.send(信道, 数据)ipcRenderer.send('file-save', data) //对应主进程的on},readFile(){// invoke的返回值永远是promise// let x = await ipcRenderer.invoke('file-read') //对应主进程的handle// console.log('@@@@@@',x);return ipcRenderer.invoke('file-read') //对应主进程的handle}
})nodemon.json
{"ignore": ["node_modules","dist"],"restartable": "r","watch": ["*.*"],"ext": "html,js,css"}package.json
{"name": "electron_test","version": "1.0.0","main": "main.js","scripts": {"start": "nodemon --exec electron .","test": "echo \"Error: no test specified\" && exit 1","build": "electron-builder"},"build": {"appId": "com.atguigu.video","win": {"icon": "./logo.ico","target": [{"target": "nsis","arch": ["x64"]}]},"nsis": {"oneClick": false,"perMachine": true,"allowToChangeInstallationDirectory": true}},"author": "wen","license": "ISC","description": "this is a electron demo","devDependencies": {"electron": "^36.1.0","electron-builder": "^26.0.12","nodemon": "^3.1.10"}
}
pages/render.js
console.log('render');
const btn1 = document.getElementById('btn1')
const btn2 = document.getElementById('btn2')
const btn3 = document.getElementById('btn3')
const input = document.getElementById('input')
btn1.onclick = () =>{// alert('你点我了',process.version)console.log(myAPI.version);
}
btn2.onclick = () =>{// 文件内容是input.value,输入什么就是什么// 调用之后就找主进程，通过预加载脚本来找myAPI.saveFile(input.value)
}
btn3.onclick = async () =>{let data = await myAPI.readFile(input.value)alert(data)
}
pages/index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"><link rel="stylesheet" href="./index.css"><title>index</title>
</head>
<body><h1>欢迎学习Electron开发!!!!!</h1><button id="btn1">点我</button><br/><br/><hr><input id="input" type="text"><button id="btn2">向D盘写入hello.txt</button><br><br><hr><button id="btn3">读取D盘中的hello.txt</button><script type="text/javascript" src="./render.js"></script>
</body>
</html>pages/index.css
h1{background-color: gray;color: orange;
}打包之后文件
双击.exe文件可以安装
安装之后的文件
相关文章：
Electron学习+打包
1. 什么是 Electron？ Electron 是⼀个 跨平台桌⾯应⽤ 开发框架，开发者可以使⽤：HTML、CSS、JavaScript 等 Web 技术来构建桌⾯应⽤程序，它的本质是结合了 Chromium 和 Node.js ，现在⼴泛⽤于桌⾯应 ⽤程序开发&a…...
NumPy线性代数功能全解析：矩阵运算与方程求解实用指南
NumPy 是线性代数领域中高效的工具。它可以帮助完成矩阵运算和方程求解。本文将介绍 NumPy 中用于线性代数的常用函数。 矩阵乘法 矩阵乘法会根据两个矩阵生成一个新矩阵。具体做法是将第一个矩阵的每一行与第二个矩阵的每一列相乘，并将乘积相加，得到新…...
《RabbitMQ 全面解析：从原理到实战的高性能消息队列指南》
一、RabbitMQ 核心原理与架构 1. 核心组件与工作流程 RabbitMQ 基于 AMQP 协议，核心组件包括 生产者（Producer）、交换机（Exchange）、队列（Queue） 和 消费者（Consumer）。…...
jenkins slave节点打包报错Failed to create a temp file on
jenkins slave节点打包报错 一、报错信息 FATAL: Unable to produce a script file Also: hudson.remoting.Channel$CallSiteStackTrace: Remote call to slave-83at hudson.remoting.Channel.attachCallSiteStackTrace(Channel.java:1784)at hudson.remoting.UserRequest$…...
计算机视觉——通过 OWL-ViT 实现开放词汇对象检测
介绍 传统的对象检测模型大多是封闭词汇类型，只能识别有限的固定类别。增加新的类别需要大量的注释数据。然而，现实世界中的物体类别几乎无穷无尽，这就需要能够检测未知类别的开放式词汇类型。对比学习（Contrastive Learning）使用成对的图像和语言数据，在这一挑战中备受…...
Android Framework学习二：Activity创建及View绘制流程
文章目录 Window绘制流程Window Manager Service（WMS）SurfaceSurfaceFlinger 安卓View层次结构ActivityPhoneWindowActivity与PhoneWindow两者之间的关系ViewRootImplDecorViewDecorView 的作用DecorView 的结构总结 Activity创建流程View invalidate调用…...
python如何在深度学习框架目标检测算法使用Yolov8训练道路汽车漆面车漆缺陷数据集 建立基于YOLOv8道路汽车漆面缺陷（划痕）检测系统
基于YOLOv8道路汽车漆面缺陷（划痕）检测系统 文章目录 1. 安装依赖2. 数据集准备与划分3. 数据预处理4. 配置YOLOv85. 训练和评估模型6. 推理与可视化7. 构建GUI应用程序 道路汽车漆面车漆缺陷检测数据集1221张 1类 汽车漆面缺陷检测YOLO数据集 1221张…...
高性能、云原生的对象存储服务MinIO 详细介绍与案例应用
什么是MinIO？ MinIO是一个高性能、云原生的对象存储服务，采用Apache License v2.0开源协议发布。它与Amazon S3云存储服务API兼容，适合构建高性能、可扩展的存储基础设施。支持大规模非结构化数据的存储，适合图片、视频、日志、备…...
Tailwind CSS 响应式设计解析（含示例）
本文内容： Tailwindcss V4 中如何使用响应式设计功能，包括默认断点、自定义断点、断点范围控制以及容器查询的各种技巧，帮助你在不离开 HTML 的前提下优雅构建响应式页面。 🌟 默认断点用法（移动优先） Tail…...
Arduino按键开关编程详解
一、按键开关的基本原理与硬件连接 1.1 按键开关的工作原理 按键开关是一种常见的输入设备，其核心原理基于机械触点的闭合与断开。当用户按下按键时，内部的金属片会连接电路两端，形成通路；松开按键后，金属片在弹簧作…...
鸢尾花（Iris）数据集的多模型分类与可视化分析工具
该程序是一个鸢尾花（Iris）数据集的多模型分类与可视化分析工具，主要功能如下： 1. 数据加载与预处理 功能说明： 使用sklearn.datasets.load_iris()加载经典的鸢尾花数据集。将数据转为pandas.DataFrame，并将类别数字标签映射为中文类别名（山鸢尾、变色鸢尾、维吉尼亚鸢尾…...
【软件设计师：复习】上午题核心知识点总结（一）
一、数据结构与算法（高频） 1. 线性数据结构 数组与链表 数组：随机访问（O(1)）、插入/删除（O(n)）、内存连续。链表：单向链表、双向链表、循环链表；插入/删除（O(1)）、随机访问（O(n)）。典型问题： 合并两个有序链表（LeetCode 21）。链表反转（迭代/递归实现）。栈与…...
[蓝桥杯 2023 国 Python B] 划分 Java
import java.util.*;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int[] arr new int[41];int sum 0;for (int i 1; i < 40; i) {arr[i] sc.nextInt();sum arr[i];}sc.close();int target sum / 2; // 最接近的两…...
Node.js 应用部署：镜像体积优化与安全的多阶段构建探索
Node.js 应用部署：镜像体积优化与安全的多阶段构建探索 在开发 Node.js 应用时，部署过程中的镜像体积优化和安全性保障是至关重要的环节。本文将通过两种不同的 Docker 部署方式，深入探讨如何实现高效的镜像体积优化和安全的部署环境。 传统的单阶段构建方式 许多开发者在…...
【Java面试笔记：进阶】23.请介绍类加载过程，什么是双亲委派模型？
Java的类加载机制是JVM的核心组成部分，其过程分为三个阶段，并采用双亲委派模型来保证类加载的安全性和一致性。 1.类加载过程 1.加载阶段（Loading） 核心任务：查找并加载类的二进制字节流（如.class文件）。具体行为： 将字节码数据从不同数据源（如文件系统、网络等）读…...
25.4.30数据结构|并查集 路径压缩
书接上回 上一节：数据结构|并查集 前言 （一）理论理解： 1、在QuickUnion快速合并的过程中，每次都要找根ID，而路径压缩让找根ID变得更加迅速直接。 2、路径压缩 针对的是findRootIndex()【查找根ID】进行的压…...
MATLAB R2024a安装教程
安装步骤： 软件大小：约12.08G 安装环境：Win10~Win11或更高 下载好安装包，可以在网上找个安装包，比如我用国内镜像matlab地址github.com/futureflsl/matlab-chinese-mirror，这样下载稍微快点 1.开始安装…...
ag-grid-react 列表导出csv列表getDataAsCsv （自定义导出列表配置）自定义新增，修改导出内容
1.ag-grid-react getDataAsCsv 新增导出字段 方法：临时添加列再导出 你可以通过 columnApi.setColumnDefs() 临时添加需要导出的字段，然后再调用 getDataAsCsv，导出后再恢复原来的列。 import { useRef } from react; import { AgGridReac…...
WEB安全--社会工程--SET钓鱼网站
1、选择要钓鱼的网站 2、打开kali中的set 3、启动后依次选择： 4、输入钓鱼主机的地址（kali）和要伪装的网站域名： 5、投放钓鱼网页（服务器域名:80） 6、获取账号密码...
Java学习手册：Spring 数据访问
一、Spring JDBC JdbcTemplate ：Spring JDBC 提供了 JdbcTemplate 类，它简化了数据库操作，提供了丰富的 API 来执行数据库访问任务。JdbcTemplate 可以自动处理数据库连接的获取、释放，SQL 语句的执行，结果集的处理等…...
linux 使用nginx部署next.js项目，并使用pm2守护进程
前言 本文基于：操作系统 CentOS Stream 8 使用工具：Xshell8、Xftp8 服务器基础环境： node - 请查看 linux安装node并全局可用pm2 - 请查看 linux安装pm2并全局可用nginx - 请查看 linux 使用nginx部署vue、react项目 所需服务器基础环境&…...
阿里云服务迁移实战: 07-其他服务迁移
概述 当完成了服务器、数据库、IP、OSS等迁移后，剩下的就是其他服务了。 短信网关 短信模板只能一个个创建，不能批量操作。但是可以使用以下方式优化操作。 在原账号导出模板列表 概述 当完成了服务器、数据库、IP、OSS等迁移后，剩下的…...
uniapp 实现低功耗蓝牙连接并读写数据实战指南
在物联网应用场景中，低功耗蓝牙（BLE）凭借其低能耗、连接便捷的特点，成为设备间数据交互的重要方式。Uniapp 作为一款跨平台开发框架，提供了丰富的 API 支持，使得在多个端实现低功耗蓝牙功能变得轻松高效。本…...
【Java学习笔记】递归
递归（recursion） 思想：把一个复杂的问题拆分成一个简单问题和子问题，子问题又是更小规模的复杂问题，循环往复 本质：栈的使用 递归的注意事项 （1）需要有递归出口，否者就…...
DigitalOcean推出Valkey托管缓存服务
今天我们激动地宣布推出DigitalOcean的Valkey托管缓存服务，这是我们全新的托管数据库服务，能够无缝替换托管缓存（此前称为托管Redis）。Valkey托管缓存服务在你一直依赖的功能基础上，还提供了增强工具来支持你的开发需求…...
ASP.NET MVC 入门指南四
21. 高级路由配置 21.1 自定义路由约束 除了使用默认的路由约束，你还可以创建自定义路由约束。自定义路由约束允许你根据特定的业务逻辑来决定一个路由是否匹配。例如，创建一个只允许特定年份的路由约束： csharp public class YearRouteCo…...
使用vue的插值表达式渲染变量，格式均正确，但无法渲染
如图，作者遇到的问题为，输入以下代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...
leetcode 977. Squares of a Sorted Array
题目描述 双指针法一 用right表示原数组中负数和非负数的分界线。 nums[0,right-1]的是负数，nums[right,nums.size()-1]是非负数。 然后用合并两个有序数组的方法。合并即可。 class Solution { public:vector<int> sortedSquares(vector<int>&…...
Mysql常用函数解析
字符串函数 CONCAT(str1, str2, …) 将多个字符串连接成一个字符串。 SELECT CONCAT(Hello, , World); -- 输出: Hello WorldSUBSTRING(str, start, length) 截取字符串的子串（起始位置从1开始）。 SELECT SUBSTRING(MySQL, 3, 2); -- 输出: SQ…...
llamafactory-cli webui启动报错TypeError: argument of type ‘bool‘ is not iterable
一、问题 在阿里云NoteBook上启动llamafactory-cli webui报错TypeError: argument of type ‘bool’ is not iterable This share link expires in 72 hours. For free permanent hosting and GPU upgrades, run gradio deploy from the terminal in the working directory t…...