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

Electron 入门指南

news 来源：原创 2025/5/26 6:34:07

Electron 入门指南

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架。通过 Electron，你可以利用 Web 技术开发出功能强大的桌面应用程序，并且能够运行在 Windows、Mac 和 Linux 系统上。

本文将带你从零开始构建一个简单的 Electron 应用程序，并介绍一些基本概念和技巧。

1. 安装 Node.js 和 npm

首先，你需要确保你的机器上已经安装了 Node.js。Electron 是基于 Node.js 构建的，因此需要 Node.js 环境来运行。

你可以访问 Node.js 官网下载并安装最新版本的 Node.js。安装过程中会一并安装 npm（Node Package Manager），这是一个用于管理 JavaScript 包的强大工具。

2. 创建项目结构

接下来，创建一个新目录作为你的 Electron 应用程序的工作空间，并在该目录中初始化一个新的 Node.js 项目：

mkdir my-electron-app
cd my-electron-app
npm init -y

执行 npm init 命令会生成一个 package.json 文件，这是 Node.js 项目的配置文件。

3. 安装 Electron

在你的项目目录中安装 Electron：

npm install electron --save-dev

这行命令将在你的开发依赖项中添加 Electron。此外，你还需要更新 scripts 部分的 package.json 文件，以便能够通过 npm 脚本运行 Electron 应用程序。

4. 编写基本的 HTML 和 JavaScript

在项目根目录下创建一个 index.html 文件作为你的应用程序主界面：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Electron App</title>
</head>
<body><h1>Hello, Electron!</h1><button id="click-me">Click Me</button><script src="./main.js"></script>
</body>
</html>

接下来，创建一个 main.js 文件作为你的应用程序的入口点：

// main.js
document.getElementById('click-me').addEventListener('click', () => {alert('Button Clicked!');
});

5. 编写主进程代码

在 Electron 中，每个应用都有一个 主进程 和一个或多个 渲染进程。主进程负责创建和管理窗口，而渲染进程则运行在每一个窗口中。

创建一个 main.js 文件作为主进程入口文件：

// main.js (主进程)
const { app, BrowserWindow } = require('electron');function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true // 允许在渲染进程中使用 Node.js API}});win.loadFile('index.html');
}app.whenReady().then(createWindow);app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}
});

6. 更新 package.json

更新 package.json 文件以包含启动应用的脚本：

{"name": "my-electron-app","version": "1.0.0","main": "main.js","scripts": {"start": "electron ."},"dependencies": {},"devDependencies": {"electron": "^23.0.0" // 确保使用正确的版本}
}

7. 运行应用程序

现在你可以通过以下命令来启动你的 Electron 应用：

npm start

这将打开一个新的窗口并显示你在 index.html 中定义的内容。点击按钮时，会触发 JavaScript 的事件处理器并弹出一个警告框。

总结

以上步骤展示了如何使用 Electron 创建一个简单的桌面应用程序。你可以在此基础上进一步扩展你的应用，例如添加更多的功能、界面元素或整合其他 Web 技术（如 React 或 Vue.js）来构建更复杂的应用程序。

Electron 的强大之处在于它允许你利用熟悉的 Web 开发技能来创建跨平台的原生应用。希望这个入门指南能为你提供一个良好的起点！

Electron 入门指南

Electron 入门指南 Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架。通过 Electron，你可以利用 Web 技术开发出功能强大的桌面应用程序，并且能够运行在 Windows、Mac 和 Linux 系统上。本文将带你从零开始构建一个简单的 Ele…...

编程日记 2025/5/26 6:34:07

目标检测YOLO实战应用案例100讲- 无人机平台下露天目标检测与计数

目录知识储备基于YOLOv8改进的无人机露天目标检测与计数一、环境配置与依赖安装二、核心代码实现（带详细注释） 1. 改进YOLOv8模型定义（添加注意力机制） 2. 无人机视角数据增强（drone_augment.py ） 3. 多目标跟踪与计数（tracking_counter.py ） 4. 完整推理流…...

编程日记 2025/5/26 5:19:26

ArkTS基础实验（二）

任务一：使用模板字符串相关知识，实现多个变量的拼接。同学们可以把自己的姓名、年纪和爱好这三个变量进行拼接。把代码和日志中console.log的打印结果截图保留。预期效果： 任务二：使用状态变量和点击事件相关知识实现计数器案例…...

编程日记 2025/5/26 5:13:40

【计算机视觉】Bayer Pattern与Demosaic算法详解：从传感器原始数据到彩色图像

Bayer Pattern与Demosaic算法详解：从传感器原始数据到彩色图像一、引言在现代数码相机和手机摄像头中，我们能够拍摄到丰富多彩的彩色图像。然而，你可能不知道的是，图像传感器本身并不能直接感知颜色——它们只能感知光的强度。…...

编程日记 2025/5/25 9:12:55

媒体查询使用

一、引言为了确保网页在不同设备上都能提供良好的用户体验，响应式设计变得至关重要。而媒体查询（Media Queries）就是前端开发中实现响应式设计的核心技术之一。二、媒体查询的概念媒体查询是 CSS3 引入的一项强大功能，它允许开…...

编程日记 2025/5/25 10:17:20

deepseek对IBM MQ SSL 证书算法的建议与解答

在IBM MQ配置SSL TLS的命令中，如果参数SSLCIPH使用TLS_RSA_WITH_AES_128_CBC_SHA256，如下所示： DEFINE CHANNEL(QM1.TO.QM2) CHLTYPE(SDR) TRPTYPE(TCP) CONNAME(QM1.MACH.COM) XMITQ(QM2) SSLCIPH(TLS_RSA_WITH_AES_128_CBC_SHA256) DESCR(S…...

编程日记 2025/5/26 5:16:25

服务器文件同步工具有哪些？

服务器文件同步工具的选择取决于你的具体需求（如实时同步、单向/双向同步、跨平台支持、安全性等）。以下是几款主流的服务器文件同步工具推荐，适用于不同场景： 1. 实时同步工具（适合高频率、低延迟需求） rsync 特点：经典增量同步工具，支持本地/远程同步，高效节省带宽。…...

编程日记 2025/5/26 6:24:38

Numpy数组与矩阵——python学习

我前面提到过Numpy函数，但是不够全，在这里我顺便做一些补充。先说明一下我用的是Notebook。一、数组的创建与操作 1、把列表转换为数组 np.array([1,2,3,4,5]) 2、把元组转换为数组 np.array((1,2,3,4,5)) 3、把range对象转换为数组 np.array(rang…...

编程日记 2025/5/26 5:48:12

CasaOS上部署1Panel开源运维面板远程在线访问配置实操指南

文章目录前言1. 添加镜像源2. 部署1Panel3. 本地访问测试4. 安装内网穿透工具5. 配置公网地址6. 配置固定公网地址前言很多时候在尝试远程管理服务器时，常常会遇到各种各样的麻烦，尤其是缺乏公网IP或者路由器设置过于复杂时，更是让人感到…...

编程日记 2025/5/26 5:07:24

深入理解缓存淘汰策略：LRU 与 LFU 算法详解及 Java 实现

一、LRU (Least Recently Used - 最近最少使用) LRU 策略的核心思想是：当缓存空间不足时，优先淘汰最近最长时间未被访问的数据。它基于“时间局部性”原理，即最近被访问的数据，在未来被访问的概率也更高。 LeetCode 146. LRU 缓…...

编程日记 2025/5/26 5:13:40

小智项目架构分析

小智代码架构 .github 这就是github项目上拉下来的一些信息没什么好看的，这跟项目代码无关 .build 编译时生成的文件，没什么可看的，与项目代码无关 .main 主要的代码都在这里面了 .managed_components 这里是小智用到的一些第三方移植…...

编程日记 2025/5/26 5:25:11

基于 SSE 和分块传输的 Uniapp 微信小程序实现流式传输对话

最近的项目是做微信小程序的一个对话框，接入DeepSeek，实现实时对话一个功能。主要用到的技术点为： 1. Server-Sent Events (SSE) 技术： 在请求头中设置了 ‘X-DashScope-SSE’: ‘enable’，启用了SSE协议服务器以事…...

编程日记 2025/5/26 6:01:37

[OS] POSIX C库介绍

POSIX C 库可以理解为 Unix/Linux系统的"标准化工具包"，用一句话概括就是： 👉 它提供了一套跨Unix系统的统一编程接口，让开发者用同一份代码能在不同系统（如Linux、macOS）中运行。核心组成&…...

编程日记 2025/5/26 6:07:13

＜uniapp＞＜插件＞＜UTS＞在uniapp中，创建自己的插件并发布到uni插件市场

前言本专栏是基于uniapp实现手机端各种小功能的程序，并且基于各种通讯协议如http、websocekt等，实现手机端作为客户端（或者是手持机、PDA等），与服务端进行数据通讯的实例开发。发文平台 CSDN 环境配置系统&…...

编程日记 2025/5/26 5:12:08

深度学习前沿探秘：Transformer 模型与多领域应用

技术点目录注意力（Attention）机制详解自然语言处理（NLP）领域的Transformer模型详解计算视觉（CV）领域的Transformer模型详解时间序列建模与预测的大语言模型目标检测算法详解目标检测的大语言模型语义分割的…...

编程日记 2025/5/26 5:43:25

介绍下Nginx的作用与请求转发机制

引言最近笔者在业务中遇到了Nginx轮训策略使用不当导致后端服务的压力增加，从而导致容器CPU资源不足，响应超时的问题； 但由于对Nginx的了解仅限与作为反向代理使用，所以借用GPT工具整理了Nginx的作用以及请求转发机制&#xff…...

编程日记 2025/5/26 5:34:17

Sql刷题日志（day6）

一、笔试 1、insert ignore：在插入数据时忽略主键冲突或其他唯一性约束冲突。如果插入的记录会导致主键冲突（如 actor_id 已存在），该语句不会报错，而是直接忽略插入操作语法： INSERT IGNORE INTO tab…...

编程日记 2025/5/25 22:55:46

Ajax 提交表单与文件上传

目录一、Ajax 提交表单1.1 基本原理1.2 HTML 表单示例1.3 JavaScript 示例（使用 fetch API）二、Ajax 文件上传2.1 基本原理2.2 HTML 文件上传表单示例2.3 JavaScript 示例（使用 fetch API）三、后端处理示例（以 Node.js + Express 为例）3.1 安装依赖3.2 创建服务器文件四…...

编程日记 2025/4/29 7:05:05

【零基础入门】ASP.NET Core快速搭建第一个Web应用

一、为什么选择ASP.NET Core？ 跨平台支持：可在Windows/macOS/Linux系统运行高性能：比传统ASP.NET框架快10倍以上开源生态：活跃的开发者社区和丰富的NuGet包云原生支持：完美适配Docker和Kubernetes部署二、开发…...

编程日记 2025/4/29 7:04:04

盒子模型

1.1看透网页布局的本质 1.2盒子模型的组成部分 css盒子模型本质是一个盒子，封装周围的html元素，它包括边框外边距内边距和实际内容。 padding：盒子与内容间的距离margin：盒子与盒子间的距离 1.3border边框 1.border-width 边…...

编程日记 2025/5/26 5:55:40

厚铜PCB如何兼顾质量与成本？供应商设计规范执行的黄金平衡点

厚铜电路板供应商需要遵循一系列设计规范，以确保所提供的电路板符合行业标准和客户要求。以下是一些需要遵循的设计规范： 1. 电路板尺寸和形状：厚铜电路板供应商需要按照客户提供的规格和要求来设计电路板的尺寸和形状。一般来说，…...

编程日记 2025/5/26 5:37:19

Kafka 配置参数性能调优建议

文章目录 1、生产者调优batch.size（重要）linger.mscompression.typeacks（重要）buffer.memorymax.in.flight.requests.per.connection（重要）message.max.bytes（重要） 2、消费者调优fe…...

编程日记 2025/5/26 5:30:57

Java读Excel：解析阿里云easyExcel导入文件的行号

文章目录引言I 解析阿里云easyExcel导入文件的行号声明解析对象的基类判断Excel解析对象类型是否包含继承某个类 isAssignableFromJava 转换list类型并设置下标到元素对象属性II 封装excel 文件读取excel 文件读取用法文件导入上下文III 参数校验工具类校验参数是否合法 (jaka…...

编程日记 2025/5/26 6:27:51

Vuex持续保存数据页面刷新不丢失 vuex-persistedstate

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据状态持久化，但是太麻烦每次都要操作，强烈建议使用插件利用vuex-persistedstate插件. 安装 npm …...

编程日记 2025/4/29 7:03:58

.NET8配置组件

一、组件的概念含义：用于从配置文件中读取配置的组件，叫做配置组件。简单来说，就是从xml、json、yaml、txt等文件中读取配置的组件。主要采用微软提供的 Microsoft.Extensions.Configuration 二、组件的使用 1、json配置读取 (1)、在Dunk.Common.Project.Configuratio…...

编程日记 2025/5/25 2:17:53

加密算法:ed25519和RSA

ed25519 和 RSA 是两种不同的非对称加密算法，常用于 SSH 密钥认证。以下是它们的对比和选择建议： 1. 算法对比特性ed25519RSA (4096-bit)安全性更高（基于椭圆曲线密码学 ECC）高（依赖大数分解难度）密钥长度固定 256 位（公钥/私钥更短）通常 2048/4096 位（公钥较大）性能…...

编程日记 2025/5/24 18:32:10

递归、搜索和回溯算法《递归》

在之前的优选算法当中我们已经学习了一些基本的算法，那么接下来我们就要来学习算法当中的一大重要章节——递归、搜索和回溯算法，其实也就是大家常常听到的dfs、bfs；其实本质就是递归，在学习搜索、回溯等算法的过程当中我们会先来…...

编程日记 2025/4/29 7:02:51

构建“云中”高并发：12306技术改造的系统性启示

作为曾参与12306余票查询系统高并发升级的技术从业者，笔者注意到公众对于12306底层技术常存在认知盲区。为破解这一迷思，特此分享十年前的架构解密文献（该技术之前名叫 gemfire 现已晋升为Apache顶级项目Geode，代码库详见&#xf…...

编程日记 2025/5/26 5:15:02

升级xcode15 报错Error (Xcode): Cycle inside Runner

升级xcode15后报错 Could not build the precompiled application for the device. Error (Xcode): Cycle inside Runner; building could produce unreliable results. This usually can be resolved by moving the shell script phase Thin Binary so that it runs before th…...

编程日记 2025/5/24 16:02:21

Electron 入门指南

1. 安装 Node.js 和 npm

2. 创建项目结构

3. 安装 Electron

4. 编写基本的 HTML 和 JavaScript

5. 编写主进程代码

6. 更新 package.json

7. 运行应用程序

总结

相关文章：