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

Electron快速入门——跨平台桌面端应用开发框架

news 2025/11/11 13:27:12

个人简介

👀个人主页： 前端杂货铺
🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🎨100个小功能 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

文章目录

    • 前言
    • 快速入门 Electron
    • Electron 打包
    • 写在最后

前言

Electron 是一款应用广泛的 跨平台 的 桌面应用 开发框架（使用 JavaScript、HTML 和 CSS 构建的）。

Electron 本质上是结合了 Chromium 和 Node.js 和 Native API（以二进制形式存在的应用程序开发接口）。

在这里插入图片描述

下面，我们开始学习 Elecreon 的基本使用。

快速入门 Electron

首先我们初始化项目，在编译器（如 vscode）的终端键入如下代码。

npm init

一路回车后，即可得到 package.json 文件。

在这里插入图片描述

按照 Electron 官方文档的推荐，我们做出以下更改。

  • 添加描述信息为 electron test
  • 修改主程序入口为 main.js
  • 添加应用启动命令 electron .
  • 添加作者信息为 zahuopu
{"name": "electron-test","version": "1.0.0","description": "electron test","main": "main.js","scripts": {"start": "electron ."},"author": "zahuopu","license": "ISC"
}

做完以上修改后，我们再来安装 Electron。

npm install --save-dev electron

接下来，我们要通过 Electron 实现文件的读写操作（文件结构如下）。

在这里插入图片描述

在 pages/index.css 中设置样式。

h1 {background-color: grey;color: orange;
}

在 pages/index.html 中引入样式和脚本，并添加一些按钮等信息。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="index.css"><!-- self 表示仅允许从同源的资源加载；unsafe-inline 表示在HTML文档内使用内联样式；data: 表示允许使用 data: URI来嵌入图像 --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
</head>
<body><h1>欢迎来到前端杂货铺，我们一起学习 Electron 开发。</h1><button id="btn">click me</button><hr><input id="input" type="text"><button id="btn2">写入hello.txt</button><hr><button id="btn3">读取hello.txt</button><script src="./render.js"></script>
</body>
</html>

在 main.js 为主进程，该进程在 Node.js 环境中运行。

  • 在主进程中我们添加 writeFile（写文件）和 readFile（读文件）的方法。
  • 使用 Electron 的 ipcMain 和 ipcRenderer 模块进行进程间通信（IPC）。
  • 要将消息从网页发送到主进程，可以使用 ipcMain.handle 设置主进程处理程序，然后公开一个调用 ipcRenderer.invoke 的函数以在预加载脚本中触发处理程序。

Tips：

  1. on 用于监听事件，当事件发生时执行特定的回调函数。
  2. handle 用于处理来自渲染进程的异步请求，并返回结果。
// 主进程
// app模块：控制应用的事件生命周期；BrowserWindow模块：用于创建和管理应用窗口。
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const fs = require('fs');// 写入文件
function writeFile(event, data) {fs.writeFileSync('./hello.txt', data);
}// 读取文件
function readFile() {return fs.readFileSync('./hello.txt').toString();
}// 将 index.html 加载到新的 BrowserWindow 中
function createWindow() {const win = new BrowserWindow({width: 800, // 窗口宽度height: 600, // 窗口高度autoHideMenuBar: true, // 隐藏菜单栏webPreferences: {preload: path.resolve(__dirname, './preload.js')}})// 注册 file-save 事件，用于写文件ipcMain.on('file-save', writeFile);// 设置主进程处理程序 file-read，用于读文件ipcMain.handle('file-read', readFile);win.loadFile('./pages/index.html');
}// 浏览器窗口只能在 app 模块的 ready 事件被触发后创建
app.on('ready', () => {createWindow();app.on('activate', () => {// 当应用被激活时，若没有窗口则创建窗口if (BrowserWindow.getAllWindows().length === 0) {createWindow();}})
})// 当所有窗口被关闭时触发
app.on('window-all-closed', () => {// 不是 macOS，当所有窗口被关闭时退出（macOS关闭所有窗口时程序依旧存在）if (process.platform !== 'darwin') {app.quit();}
})

在 preload.js 预加载脚本中进行通信桥梁的搭建，用于 main.js 主进程 与 render.js 渲染进程的通信。

预加载脚本在网页加载到渲染器之前注入，类似于 Chrome 扩展的 内容脚本。要向渲染器添加需要特权访问的功能，可以通过 contextBridge API 定义 global 对象。

// 预加载脚本
const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('myAPI', {version: process.version,// 触发主进程中注册的 file-save 事件，写文件saveFile: (data) => {ipcRenderer.send('file-save', data);},// 触发主进程的处理程序 file-readreadFile() {return ipcRenderer.invoke('file-read');}
})

在 render.js 渲染进程中添加鼠标点击事件，触发注册的事件和设置的处理程序。

// 渲染进程
const btn = document.getElementById('btn');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');
const input = document.getElementById('input');btn.onclick = () => {alert(myAPI.version);
}btn2.onclick = () => {myAPI.saveFile(input.value);
}btn3.onclick = async () => {const data = await myAPI.readFile();alert(data);
}

之后，在终端键入 npm start，即可得到窗口。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

Electron 打包

electron 打包的方式有多种，经常使用的是借助 electron-builder 进行打包。

在终端键入 npm install electron-builder --save-dev 安装打包插件。

在 package.json 的 scripts 中添加 "build": "electron-builder"。

"scripts": {"start": "electron .","build": "electron-builder"
},

electron-builder 将会根据我们在 package.json 中的配置来打包应用程序。例如，可以指定打包不同平台的应用程序：

"build": {"appId": "com.yourapp.id","productName": "YourAppName","directories": {"output": "build"},"files": ["dist/**/*","node_modules/**/*","main.js","index.html","package.json"],"win": {"target": "nsis"},"mac": {"target": "dmg"},"linux": {"target": ["AppImage","deb"]}
}

之后终端键入 npm run build 即可完成打包（ps：打包速度受硬件配置和网络的影响，有时可能需要科学上网才能成功打包）。

我使用 mac 打包成功后得到了如下的 dist 文件，打开 MacOS 文件夹下的可执行程序即可启动。

在这里插入图片描述

令人震惊的是打包出来的应用体积竟然高达 236.3MB（仅写了不到100行代码）。

写在最后

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用的框架。

其优点是它的跨平台性、简单易上手（ 使用 JavaScript、HTML 和 CSS 即可打造）。

其缺点是打包体积过大（毕竟内置了Chromium）、性能一般、安全性一般等。

Electron 在 2013 年上线，十余年的时间也是逐渐健壮起来，尽管现在还有很多令人难以接受的缺点，希望后续的 Electron 在不断的迭代过程中越来越成熟好用吧！

好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！

参考资料：

  1. Electron 中文网
  2. 禹神：一小时快速上手Electron，前端Electron开发教程

在这里插入图片描述

相关文章：

Electron快速入门——跨平台桌面端应用开发框架

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…...

编程日记 2025/1/9 19:55:48

Delphi+SQL Server实现的（GUI）户籍管理系统

1.项目简介 本项目是一个户籍管理系统&#xff0c;用于记录住户身份信息&#xff0c;提供新户登记&#xff08;增加&#xff09;、户籍变更&#xff08;修改&#xff09;、户籍注销&#xff08;删除&#xff09;、户籍查询、曾用名查询、迁户记录查询以及创建备份、删除备份共8…...

编程日记 2025/1/9 19:49:39

【JavaEE进阶】获取Cookie/Session

&#x1f340;Cookie简介 HTTP协议自身是属于 "⽆状态"协议. "⽆状态"的含义指的是: 默认情况下 HTTP 协议的客⼾端和服务器之间的这次通信,和下次通信之间没有直接的联系.但是实际开发中,我们很多时候是需要知道请求之间的关联关系的. 例如登陆⽹站成…...

编程日记 2025/1/9 19:46:37

在macOS上安装Flutter和环境配置

操作系统 Flutter 支持在 macOS 11 (Big Sur) 或更高版本上开发。本指南假定你的 Mac 默认运行 zsh shell。 如果你的 Mac 是 Apple silicon 处理器&#xff0c;那么有些 Flutter 组件就需要通过 Rosetta 2 来转换适配&#xff08;详情&#xff09;。要在 Apple silicon 处理器…...

编程日记 2025/1/9 19:45:35

【电子通识】PWM驱动让有刷直流电机恒流工作

电机的典型驱动方法包括电压驱动、电流驱动以及PWM驱动。本文将介绍采用PWM驱动方式的恒流工作。 首先介绍的是什么是PWM驱动的电机恒流工作&#xff0c;其次是PWM驱动电机恒流工作时电路的工作原理。 PWM驱动 当以恒定的电流驱动电机时&#xff0c;电机会怎样工作呢&#xff1…...

编程日记 2025/1/9 19:44:34

Maven在不同操作系统上如何安装？

大家好&#xff0c;我是袁庭新。Maven是一个重要的工具&#xff0c;还有很多初学者竟然不知道如何安装Maven&#xff1f;这篇文章将系统介绍如何在Windows、macOS、Linux操作系统上安装Maven。 Maven是一个基于Java的项目管理工具。因此&#xff0c;最基本的要求是在计算机上安…...

编程日记 2025/1/9 19:43:33

maven如何从外部导包

1.找到你项目的文件位置&#xff0c;将外部要导入的包复制粘贴进你当前要导入的项目下。 2.从你的项目目录下选中要导入的包的pom文件即可导包成功 注意一定是选中对应的pom文件 导入成功之后对应的pom.xml文件就会被点亮...

编程日记 2025/1/9 19:42:31

如何在 Hive SQL 中处理复杂的数据类型？

目录 一、复杂数据类型简介 二、创建表时使用复杂数据类型 三、插入数据到复杂数据类型的表 四、查询复杂数据类型...

编程日记 2025/1/9 19:41:30

数据结构：DisjointSet

Disjoint Sets意思是一系列没有重复元素的集合。一种常见的实现叫做&#xff0c;Disjoint-set Forest可以以接近常数的时间复杂度查询元素所属集合&#xff0c;用来确定两个元素是否同属一个集合等&#xff0c;是效率最高的常见数据结构之一。 Wiki链接&#xff1a;https://en…...

编程日记 2025/1/9 19:40:29

中国省级产业结构高级化及合理化数据测算（2000-2023年）

一、数据介绍 数据名称&#xff1a;中国省级产业结构高级化、泰尔指数 数据年份&#xff1a;2000-2023年 数据范围&#xff1a;31个省份 数据来源&#xff1a;中国统计年鉴、国家统计局 数据整理&#xff1a;内含原始版本、线性插值版本、ARIMA填补版本 数据说明&#xf…...

编程日记 2025/1/9 19:38:25

Nginx不使用域名如何配置证书

如果你不打算使用域名而是使用 IP 地址来配置 Nginx 的 SSL 证书&#xff0c;你会遇到一个问题&#xff0c;因为 SSL/TLS 证书通常是为特定的域名颁发的&#xff0c;而不是 IP 地址。虽然可以为 IP 地址生成证书&#xff0c;但大多数证书颁发机构&#xff08;CA&#xff09;不支…...

编程日记 2025/1/9 19:34:20

Perturbed-Attention Guidance(PAG) 笔记

Self-Rectifying Diffusion Sampling with Perturbed-Attention Guidance Github 摘要 近期研究表明&#xff0c;扩散模型能够生成高质量样本&#xff0c;但其质量在很大程度上依赖于采样引导技术&#xff0c;如分类器引导&#xff08;CG&#xff09;和无分类器引导&#xff…...

编程日记 2025/1/9 19:31:17

自动驾驶控制与规划——Project 6: A* Route Planning

目录 零、任务介绍一、算法原理1.1 A* Algorithm1.2 启发函数 二、代码实现三、结果分析四、效果展示4.1 Dijkstra距离4.2 Manhatten距离4.3 欧几里德距离4.4 对角距离 五、后记 零、任务介绍 carla-ros-bridge/src/ros-bridge/carla_shenlan_projects/carla_shenlan_a_star_p…...

编程日记 2025/1/9 19:29:16

通俗易懂之线性回归时序预测PyTorch实践

线性回归&#xff08;Linear Regression&#xff09;是机器学习中最基本且广泛应用的算法之一。它不仅作为入门学习的经典案例&#xff0c;也是许多复杂模型的基础。本文将全面介绍线性回归的原理、应用&#xff0c;并通过一段PyTorch代码进行实践演示&#xff0c;帮助读者深入…...

编程日记 2025/1/9 19:28:15

[离线数仓] 总结二、Hive数仓分层开发

接 [离线数仓] 总结一、数据采集 5.8 数仓开发之ODS层 ODS层的设计要点如下： （1）ODS层的表结构设计依托于从业务系统同步过来的数据结构。 （2）ODS层要保存全部历史数据，故其压缩格式应选择压缩比率，较高的，此处选择gzip。 CompressedStorage - Apache Hive - Apac…...

编程日记 2025/1/9 19:27:14

页面顶部导航栏（Navbar）的功能（Navbar/index.vue）

这段代码是一个 Vue.js 组件&#xff0c;实现了页面顶部导航栏&#xff08;Navbar&#xff09;的功能。我将分块分析它的各个部分&#xff1a; 模板 (Template): <!-- spid-admin/src/layout/components/Navbar/index.vue --> <template><div class"navb…...

编程日记 2025/1/9 19:26:11

thinnkphp5.1和 thinkphp6以及nginx，apache 解决跨域问题

ThinkPHP 5.1 使用中间件设置响应头 ThinkPHP 5.1 及以上版本支持中间件&#xff0c;可以通过中间件统一设置跨域响应头。 步骤&#xff1a; 创建一个中间件文件&#xff0c;例如 CorsMiddleware.php&#xff1a; namespace app\middleware;class CorsMiddleware {public fu…...

编程日记 2025/1/9 19:25:09

vue2新增删除

&#xff08;只是页面实现&#xff0c;不涉及数据库&#xff09; list组件&#xff1a; <button click"onAdd">新增</button><el-table:header-cell-style"{ textAlign: center }" :cell-style"{ textAlign: center }":data&quo…...

编程日记 2025/1/9 19:23:07

测试ip端口-telnet开启与使用

前言 开发过程中我们总会要去测试ip通不通&#xff0c;或者ip下某个端口是否可以联通&#xff0c;为此我们可以使用telnet 命令来实现。 一、telnet 开启 可能有些人使用telnet报错&#xff0c;不是内部命令&#xff0c;可以如下开启&#xff1a; 1、打开控制面板&#xff…...

编程日记 2025/1/9 19:19:03

Python爬虫基础——XPath表达式

首先说一下这节内容在学习过程中存在的问题吧&#xff0c;在爬取百度网页文字时&#xff0c;出现了问题&#xff0c;就是通过表达式在网页搜索中可以定位&#xff0c;但是通过代码无法定位&#xff0c;请教了一位老师&#xff0c;他说是动态链接&#xff0c;目前这部分内容比较…...

编程日记 2025/1/9 19:15:59

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2025/11/7 3:29:55

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2025/11/9 14:10:32

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/11/7 21:08:33

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

【Java_EE】Spring MVC

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

编程新知 2025/11/9 17:39:07

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/8/9 13:14:15

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/11/11 12:26:37

算法：模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

编程新知 2025/11/7 16:01:17