当前位置： 首页 > news >正文

Electron 安装以及搭建一个工程

news 2025/7/6 22:34:50

安装Node.js

在使用Electron进行开发之前，需要安装 Node.js。 官方建议使用最新的LTS版本。
检查 Node.js 是否正确安装：

# 查看node版本
node -v
# 查看npm版本
npm -v

注意
开发者需要在开发环境安装 Node.js 才能编写 Electron 项目，但是 Electron 应用程序 不使用系统本地的 Node.js 环境来运行它的代码。
Electron 应用程序 使用它内置的 Node.js 运行时。 这意味着 终端用户 不需要安装 Node.js 环境也可以运行Electron 应用程序。

安装Electron

Electron 应用程序遵循与其他 Node.js 项目相同的结构。

首先创建一个文件夹my-electron-app并在vscode 编译器中打开文件夹。

初始化 npm 包：

npm init

init 初始化命令会提示开发者在项目初始化配置中设置一些值，有几条规则需要遵循：

  • entry point 应为 main.js。
  • author 与 description 可为任意值，但对于应用打包是必填项。

生成的 package.json 文件应该像这样：

{"name": "my-electron-app","version": "1.0.0","description": "一个测试用的electron项目","main": "main.js","author": "zhangSan", "license": "ISC"
}

在项目中安装electron：

npm install --save-dev electron# 可以简写
npm i electron -D

注意 ：electron是开发依赖。

electron依赖非常难下载，总是下载到中途就失败了。

查看官方文档：

在运行 npm install electron 时，有些用户会偶尔遇到安装问题。
在大多数情况下，这些错误都是由网络问题导致，而不是因为 electron npm 包的问题。 如 ELIFECYCLE、EAI_AGAIN、ECONNRESET 和 ETIMEDOUT 等错误都是此类网络问题的标志。 最佳的解决方法是尝试切换网络，或是稍后再尝试安装。

fine，意思是网络问题咯，千M网下载不下来也是离谱啊…

解决方案

  1. 如果通过 npm 安装失败，你也可以尝试通过从 electron/electron/release 直接下载 Electron

  2. 如果安装失败并报错EACCESS，可能需要修复npm权限。

  3. 如果上述报错持续出现，unsafe-perm 标志可能需要被设置为 true:

npm install electron --unsafe-perm=true
  1. 在较慢的网络上, 最好使用 --verbose 标志来显示下载进度:
npm install --verbose electron
  1. 如果需要强制重新下载文件, 并且 SHASUM 文件将 force_no_cache 环境变量设置为 true。

我直接使用了第3点和第4点：

npm install electron -D --unsafe-perm=true --verbose

历时半个小时，这个依赖终于下载成功了！ 感天动地！！

在 package.json 配置文件中的scripts字段下增加一条start命令：

{"scripts": {"start": "electron ."}
}

package.json 文件应该像这样：

{"name": "my-electron-app","version": "1.0.0","description": "一个测试用的electron项目","main": "main.js","scripts": {"start": "electron ."},"author": "zhangSan","license": "ISC","devDependencies": {"electron": "^32.1.2"}
}

执行start命令能在开发模式下打开应用：

npm start

执行命令直接就报错了：
没有找到模块main.js，请确认 package.json 中的 main 入口是合法的。
在这里插入图片描述

运行主进程

任何 Electron 应用程序的入口都是 main 文件。 这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程。

执行 npm start 期间，Electron 将依据应用中 package.json配置下main字段中配置的值查找此文件。

在项目的根目录下创建一个名为 main.js 的空文件。

再次执行 npm start ，不再报错，应用成功启动。但是，它不会做任何事，开发者也看不到启动的应用窗口，因为 main.js 是空白文件，没有添加任何代码！

在 main.js 中编写代码，创建⼀个基本窗⼝：

// main.js运⾏在应⽤的主进程上，⽆法访问Web相关API
// main.js主要负责：控制⽣命周期、显示界⾯、控制渲染进程等其他操作。
// 从electron中引入app、BrowserWindow
// app模块: 控制应用程序的事件生命周期。
// BrowserWindow模块: 创建和管理应用程序 窗口
const { app, BrowserWindow } = require('electron')function createWindow() {const win = new BrowserWindow({width: 500, // 窗口宽度height: 300  // 窗口高度})
}
// 在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。 
app.on('ready', () => {// 当app准备好以后，创建窗口createWindow()
})

注意
可以通过使用 app.whenReady() API来监听 app 模块的 ready 事件：

app.whenReady().then(() => {createWindow()
})

再次执行 npm start ，应用启动成功，并且能看到应用窗口：

下图是应用自带的菜单：
在这里插入图片描述
如果不要菜单，需要在创建窗口时配置：autoHideMenuBar: true

修改 main.js，在窗口中展示一个远程页面：

const { app, BrowserWindow } = require('electron')function createWindow() {const win = new BrowserWindow({width: 500,height: 300,autoHideMenuBar: true})// 展示一个远程页面win.loadURL('https://lol.qq.com/main.shtml')// 可以在这里添加窗口的其他配置和事件处理
}
app.on('ready', () => {// 当app准备好的时候，创建窗口createWindow()
})

执行npm start，查看效果：
在这里插入图片描述


关于BrowserWindow的更多配置项，请参考官网：BrowserWindow实例属性

加载本地页面

在Electron中，各个窗口显示的内容可以是本地HTML文件，也可以是一个远程url。

创建 pages/index.html 编写内容：：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><metahttp-equiv="Content-Security-Policy"content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"/><title>Hello Electron!</title></head><body><h1>Hello Electron!</h1></body>
</html>

修改 mian.js 加载本地⻚⾯:

// 加载⼀个本地⻚⾯
win.loadFile('./pages/index.html')

执行npm start，查看效果：
在这里插入图片描述
可以通过快捷键ctrl+shift+i，打开控制台：
在这里插入图片描述

CSP配置说明

语法：

Content-Security-Policy: <policy-directive>; <policy-directive>

这是一个用于设置网页内容安全策略（Content Security Policy，简称 CSP）的 HTML 标签：

<metahttp-equiv="Content-Security-Policy"content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"
/>

上述配置的说明：

  • default-src 'self'
    • default-src ：配置加载策略，适⽤于所有未在其它指令中明确指定的资源类型。
    • self ：仅允许从同源的资源加载，禁⽌从不受信任的外部来源加载，提⾼安全性。
  • style-src 'self' 'unsafe-inline'
    • style-src ：指定样式表（CSS）的加载策略。
    • self ：仅允许从同源的资源加载，禁⽌从不受信任的外部来源加载，提⾼安全性。
    • unsafe-inline ：允许在HTML⽂档内使⽤内联样式。
  • img-src 'self' data:
    • img-src ：指定图像资源的加载策略。
    • self ：表示仅允许从同源加载图像。
    • data: ：允许使⽤ data: URI 来嵌⼊图像。这种URI模式允许将图像数据直接嵌
      ⼊到HTML或CSS中，⽽不是通过外部链接引⽤。

HTTP 响应头 Content-Security-Policy 允许站点管理者控制用户代理能够为指定的页面加载哪些资源。除了少数例外情况，设置的政策主要涉及指定服务器的源和脚本结束点。

关于 CSP 的详细说明请参考：MDN-Content-Security-Policy、Electron Security

如果没有配置CSP，控制台会有⼀个安全警告：
在这里插入图片描述

管理窗口的生命周期

创建窗口

  1. 通常在主进程中创建窗口，可以使用 BrowserWindow 类来创建窗口实例。
const { app, BrowserWindow } = require('electron')function createWindow() {const win = new BrowserWindow({width: 500,height: 300,autoHideMenuBar: true})// 展示一个远程页面win.loadURL('https://lol.qq.com/main.shtml')// 可以在这里添加窗口的其他配置和事件处理
}
app.on('ready', () => {// 当app准备好的时候，创建窗口createWindow()
})

窗口的显示与隐藏

  1. win.show()：显示窗口。通常在应用启动后或在特定事件触发时调用。
  2. win.hide()：隐藏窗口。可以在需要隐藏窗口的情况下调用，比如最小化到系统托盘时。

窗口最小化、最大化、恢复

  1. win.minimize()：将窗口最小化到任务栏或 Dock。
  2. win.maximize()：最大化窗口。
  3. win.unmaximize()：如果窗口处于最大化状态，可以使用 win.unmaximize()恢复到原始大小。

窗口事件监听

  1. closed 事件：

    • 当窗口关闭时触发。在这个事件处理函数中，可以进行一些清理工作，比如释放资源。
    • win.on('closed', () => { mainWindow = null; });

  2. resize 事件：
    当窗口大小改变时触发。可以在这个事件处理函数中根据新的窗口大小调整应用的布局或进行其他相应的处理。

  3. move 事件：
    当窗口位置改变时触发。可以用于记录窗口位置或进行与窗口位置相关的操作。

关闭所有窗口时退出应用 (Windows & Linux)

在Windows 和 Linux 系统：关闭所有窗口会完全退出应用程序。

为了实现这一点，需要监听 app 模块的 'window-all-closed' 事件。如果用户不是在 macOS(darwin) 上运行程序，则调用 app.quit()。

app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

如果没有窗口打开则打开一个窗口 (macOS)

在 Linux 和 Windows 上，应用根本不存在是否被激活的说法，应用要么是有进程，要么是没进程。

但是，在 macOS 上，应用已经不运行了，但是应用处于未激活状态：应用在没有打开任何窗口的情况下也继续运行。
如果激活应用，则检查应用是否 有窗口，没有窗口就在激活应用时会打开新的窗口。

监听 app 模块的 activate 事件来实现：如果没有任何浏览器窗口是打开的，则调用 createWindow() 方法。

// 当app准备好后，执⾏createWindow创建窗⼝
app.on('ready', () => {createWindow();// 当应⽤被激活时app.on('activate', () => {// 如果当前应⽤没有窗⼝，则创建⼀个新的窗⼝if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});

完整的 main.js 如下：

const { app, BrowserWindow } = require('electron');function createWindow() {const win = new BrowserWindow({width: 500, // 窗口宽度height: 300, // 窗口高度autoHideMenuBar: true // 隐藏菜单栏});// 在窗口中加载一个远程页面win.loadFile('./pages/index.html');
}
app.on('ready', () => {// 当app准备好的时候，创建窗口createWindow();// 在Windows & Linux，应用的所有窗口关闭时，退出应用程序app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()})// 在macOS，当应⽤被激活时app.on('activate', () => {// 如果当前应⽤没有窗⼝，则创建⼀个新的窗⼝if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});

相关文章：

Electron 安装以及搭建一个工程

安装Node.js 在使用Electron进行开发之前&#xff0c;需要安装 Node.js。 官方建议使用最新的LTS版本。 检查 Node.js 是否正确安装&#xff1a; # 查看node版本 node -v # 查看npm版本 npm -v注意 开发者需要在开发环境安装 Node.js 才能编写 Electron 项目&#xff0c;但是…...

编程日记 2024/9/28 20:20:20

羽毛类型检测系统源码分享

羽毛类型检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vis…...

编程日记 2024/9/28 20:19:18

Xiaojie雷达之路---doa估计(dbf、capon、music算法)

Hello，大家好，我是Xiaojie，欢迎大家能够和Xiaojie来一起学习毫米波雷达知识，本篇文章主要是介绍一下雷达信号处理中的dbf、capon、music测角算法，一起来看看吧!!! 前言 本文从信号模型、dbf原理、capon原理、music原理以及代码仿真进行展开描述。 信号模型 阵列接收到…...

编程日记 2024/9/28 20:18:17

十大排序算法总结

完整文档见 排序算法总结——语雀文档 比较类排序&#xff1a;通过比较来决定元素间的相对次序&#xff0c;由于其时间复杂度不能突破O(nlogn)&#xff0c;因此也称为非线性时间比较类排序。 非比较类排序&#xff1a;不通过比较来决定元素间的相对次序&#xff0c;它可以突破…...

编程日记 2024/9/28 20:17:16

大厂AI必备数据结构与算法——链表（三）详细文档

冲冲冲&#xff01;开干 神马&#xff01;神马&#xff01;神马&#xff0c;一向让我们学习起来抓耳挠腮的数据结构课程竟然也有教程&#xff1f;还那么详细&#xff1f;&#xff1f;真的假的&#xff1f; 那么好&#xff0c;胡广告诉你是假的&#xff0c;哈哈哈哈哈哈哈哈哈…...

编程日记 2024/9/28 20:15:14

一键自动化配置OpenHarmony编译环境

一、概述 本工程旨在对Ubuntu一键初始化配置环境&#xff0c;解决OpenHarmony的编译依赖问题&#xff0c;基于本脚本配置后配合一键下载OpenHarmony代码便能轻松掌控OpenHarmony的下载、编译。 当前建议使用稳定分支Itopen-2.0-Release&#xff0c;该分支是经过多次测试OK的&…...

编程日记 2024/9/28 20:14:13

不同领域的常见 OOD（Out-of-Distribution）数据集例子

以下是几个来自不同领域的常见 OOD&#xff08;Out-of-Distribution&#xff09;数据集例子&#xff0c;这些数据集常用于测试和研究模型在分布变化或分布外数据上的泛化能力&#xff1a; 1. 计算机视觉领域 CIFAR-10 vs. CIFAR-10-C / CIFAR-100-C: 描述&#xff1a;CIFAR-10…...

编程日记 2024/9/28 20:10:09

gRPC协议简介

gRPC 是谷歌开源的一套 RPC 协议框架。主要做两件事情&#xff1a;一是数据编码&#xff0c;二是请求映射。 数据编码 数据编码顾名思义就是在将请求的内存对像转化成可以传输的字节流发给服务端&#xff0c;并将收到的字节流再转化成内存对像。方法有很多&#xff0c;常见的…...

编程日记 2024/9/28 20:07:06

[dp+dfs]砝码称重

题目描述 现有 n n n 个砝码&#xff0c;重量分别为 a 1 , a 2 , … , a n a_1, a_2, \ldots,a_n a1​,a2​,…,an​ &#xff0c;在去掉 m m m 个砝码后&#xff0c;问最多能称量出多少不同的重量&#xff08;不包括 0 0 0 &#xff09;。 输入格式 第一行为有两个整数…...

编程日记 2024/9/28 20:05:04

MYSQL-查看表中字段属性语法（三）

查看表中字段全部信息 show full columns from database_name.table_name; show full columns from table_name;示例 mysql> show full columns from world.city; ----------------------------------------------------------------------------------------------------…...

编程日记 2024/9/28 20:03:03

第三讲 part 3：前端处理LINK3D - 代码解析 - 从main出发看总体流程（ROS1改为ROS2）

目录 1. ROS1 ->ROS21.1 包含头文件1.2 全局变量定义1.3 结构体定义1.4 点云容器定义1.5 图像处理相关变量1.6 ROS2发布者和订阅者定义1.7 全局变量，被不断更新1.8 点云处理相关变量1.9 图像描述符1.10 主函数1.10.1. 初始化ROS21.10.2. 创建节点1.10.3. 声明参数1.10.4. 设…...

编程日记 2024/9/28 19:59:59

移情别恋c++ ദ്ദി˶ｰ̀֊ｰ́ ) ——15.红黑树

1.红黑树的概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或 Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;红黑树确保没有一条路 径会比其他路径长出俩倍&#xff0c;…...

编程日记 2024/9/28 19:58:58

【C++】Eclipse技巧汇总

Eclipse C/C调试无法输入 在debug C/C程序时&#xff0c;Eclipse自带的窗口&#xff0c;无法读取cin等输入 解决办法&#xff1a; 参考&#xff1a;https://blog.csdn.net/sagjhdj/article/details/123271383 思路是调用外部console&#xff1a; 依次点击Debug>Debug Conf…...

编程日记 2024/9/28 19:57:57

Golang | Leetcode Golang题解之第430题扁平化多级双向链表

题目&#xff1a; 题解&#xff1a; func dfs(node *Node) (last *Node) {cur : nodefor cur ! nil {next : cur.Next// 如果有子节点&#xff0c;那么首先处理子节点if cur.Child ! nil {childLast : dfs(cur.Child)next cur.Next// 将 node 与 child 相连cur.Next cur.Chi…...

编程日记 2024/9/28 19:56:56

Java实现找色和找图功能

某天&#xff0c;张三接到一个任务需求&#xff0c;将一个Excel表格里面的员工信息&#xff0c;录入到员工系统里面&#xff0c;由于数据量非常大&#xff0c;操作起来巨慢。经过一段时间的操作和观察&#xff0c;他发现这种操作&#xff0c;非常有规律&#xff0c;基本就是一些…...

编程日记 2024/9/28 19:55:55

linux脚本工具

目录 shell工具查看Nvidia GPU状态查看某个监听端口是否存在设置局部代理查找关键字相关进程根据日常所需&#xff0c;持续更新 shell工具 减少重复性工作&#xff0c;简化工作流程&#xff0c;提高工作效率 将所编写的shell脚本赋予可执行权限 chmod x <脚本文件> 在…...

编程日记 2024/9/28 19:52:51

MySQL之基础篇

数据库操作 1.查看当前的数据库版本 select version(); 2.显示所有数据库 show databases; 3.创建数据库 create [if not exists] database 数据库名 character set 字符编码集 collate 排序规则&#xff1b; 我们这里提前说一下 被方括号括起来的代码 表示可写可不写 示例…...

编程日记 2024/9/28 19:50:49

13年408计算机考研-计算机网络

第一题&#xff1a; 解析&#xff1a;OSI体系结构 OSI参考模型&#xff0c;由下至上依次是&#xff1a;物理层-数据链路层-网络层-运输层-会话层-表示层-应用层。 A.对话管理显然属于会话层&#xff0c; B.数据格式转换&#xff0c;是表示层要解决的问题&#xff0c;很显然答案…...

编程日记 2024/9/28 19:49:47

camera2 + MediaRecorder 实现的分段循环录像功能

硬件设备Android系统 8.1&#xff1b; 硬件设备上开发过程中的问题记录&#xff1a; 问题1. 长时间录像后发现保存的录像文件始终只有4G。 原因及解决&#xff1a;Android 11之前的系统有对保存的文件大小有限制&#xff0c;所以只能修改成分段保存&#xff0c;即录像文件3.…...

编程日记 2024/9/28 19:48:46

LeetCode 每日一题 2024/9/23-2024/9/29

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 9/23 2414. 最长的字母序连续子字符串的长度9/24 2207. 字符串中最多数目的子序列9/25 2306. 公司命名9/26 2535. 数组元素和与数字和的绝对差9/27 2516. 每种字符至少取 K…...

编程日记 2024/9/28 19:47:45

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/6/17 15:33:10

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/7/4 12:19:48

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/7/6 14:56:09

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/7/6 5:50:31

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2025/7/6 10:24:07

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/7/5 2:21:48

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2025/7/5 21:06:53

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/7/4 5:47:52

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/7/4 10:54:55

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2025/7/6 5:43:25