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

Electron入门指南:用前端技术打造桌面应用

🌟 目录速览

  1. 什么是Electron?
  2. 为什么要用Electron?
  3. 核心概念三分钟掌握
  4. 快速创建第一个应用
  5. 典型应用场景
  6. 开发注意事项
  7. 常见问题解答

一、什么是Electron?🤔

Electron就像魔法转换器,它能将你熟悉的:

  • HTML
  • CSS
  • JavaScript

直接变成跨平台桌面应用(支持Windows/macOS/Linux)!网易云音乐、VSCode等知名软件都是它的代表作。


二、为什么要用Electron?💡

传统开发Electron开发
需要学习C++/C#等语言只需前端三件套
不同系统要写多套代码一套代码多平台运行
开发周期长快速迭代
界面开发复杂网页级UI随心设计

三、核心概念三分钟掌握 🎯

1. 主进程 & 渲染进程

  • 主进程:应用的大脑,创建窗口、处理系统事件
  • 渲染进程:每个窗口的显示内容,相当于浏览器标签页

2. 进程通信(IPC)

// 主进程
ipcMain.on('message', (event, arg) => {console.log(arg) // 收到渲染进程消息
})// 渲染进程
ipcRenderer.send('message', 'Hello Main Process!')

3. 打包发布

使用electron-builder一键生成:

  • .exe (Windows)
  • .dmg (macOS)
  • .deb (Linux)

四、15分钟创建第一个应用 ⏰

步骤1:初始化项目

mkdir my-electron-app && cd my-electron-app
npm init -y
npm install electron --save-dev

步骤2:创建核心文件

// main.js
const { app, BrowserWindow } = require('electron')function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}})win.loadFile('index.html')
}app.whenReady().then(createWindow)
<!-- index.html -->
<!DOCTYPE html>
<html>
<body><h1>Hello Electron!</h1><script>console.log('渲染进程已启动!')</script>
</body>
</html>

步骤3:运行应用

// package.json
{"scripts": {"start": "electron ."}
}
npm start

五、典型应用场景 🎯

  1. 开发效率工具(如VSCode、Postman)
  2. 跨平台客户端(如Slack、Discord)
  3. 数据可视化大屏
  4. 快速原型设计
  5. 企业内部系统

六、开发注意事项 ⚠️

  1. 性能优化:避免过度使用Web技术
  2. 安装包体积:基础包约120MB,可优化至40MB+
  3. 安全防护:禁用Node.js集成时需谨慎
  4. 自动更新:推荐使用electron-updater
  5. 原生模块:需要重新编译对应版本

七、常见问题解答 ❓

Q:Electron应用会很卡吗?
A:合理设计性能媲美原生应用,参考VSCode的流畅体验

Q:如何调用系统API?
A:通过Node.js模块(如fs/path)或C++插件实现

Q:与网页应用有什么区别?
A:可访问系统资源、离线运行、独立进程管理

Q:适合开发大型应用吗?
A:微软Teams、GitHub Desktop等均已验证可行性


🎉 开始你的Electron之旅吧!

只需三步开启创作:

  1. 安装Node.js环境
  2. npm init electron-app@latest
  3. 用你最熟悉的前端技术构建梦想应用!

💡 小贴士:Electron官方文档永远是最好的学习伙伴 → electronjs.org

相关文章:

Electron入门指南:用前端技术打造桌面应用

&#x1f31f; 目录速览 什么是Electron&#xff1f;为什么要用Electron&#xff1f;核心概念三分钟掌握快速创建第一个应用典型应用场景开发注意事项常见问题解答 一、什么是Electron&#xff1f;&#x1f914; Electron就像魔法转换器&#xff0c;它能将你熟悉的&#xff1…...

机器学习第十讲:异常值检测 → 发现身高填3米的不合理数据

机器学习第十讲&#xff1a;异常值检测 → 发现身高填3米的不合理数据 资料取自《零基础学机器学习》。 查看总目录&#xff1a;学习大纲 关于DeepSeek本地部署指南可以看下我之前写的文章&#xff1a;DeepSeek R1本地与线上满血版部署&#xff1a;超详细手把手指南 一、幼儿…...

【Redis】缓存穿透、缓存雪崩、缓存击穿

1.缓存穿透 是指客户端请求的数据在缓存中和数据库中都不存在&#xff0c;这样缓存永远不会生效&#xff0c;导致请求直接穿透缓存到达数据库&#xff0c;给数据库带来压力的情况。 常见的解决方案有两种&#xff1a; 缓存空对象&#xff1a;实现简单&#xff0c;维护方便&am…...

科学养生指南:打造健康生活

在快节奏的现代生活中&#xff0c;健康养生成为人们关注的焦点。科学养生无需复杂理论&#xff0c;掌握以下几个关键要素&#xff0c;就能为身体构筑坚实的健康防线。​ 合理饮食是健康的基础。世界卫生组织建议&#xff0c;每天应摄入至少 5 份蔬菜和水果&#xff0c;保证维生…...

解锁健康生活:现代养生实用方案

早上被闹钟惊醒后匆忙灌下咖啡&#xff0c;中午用外卖应付一餐&#xff0c;深夜刷着手机迟迟不肯入睡 —— 这样的生活模式&#xff0c;正在不知不觉侵蚀我们的健康。科学养生并非遥不可及的目标&#xff0c;只需从生活细节入手&#xff0c;就能逐步改善身体状态。​ 饮食管理…...

深入解析JVM字节码解释器执行流程(OpenJDK 17源码实现)

一、核心流程概述 JVM解释器的核心任务是将Java字节码逐条翻译为本地机器指令并执行。其执行流程可分为以下关键阶段&#xff1a; 方法调用入口构建&#xff1a;生成栈帧、处理参数、同步锁等。 字节码分派&#xff08;Dispatch&#xff09;&#xff1a;根据字节码跳转到对应…...

【HCIA】BFD

前言 前面我们介绍了浮动路由以及出口路由器的默认路由配置&#xff0c;可如此配置会存在隐患&#xff0c;就是出口路由器直连的网络设备并不是运营商的路由器&#xff0c;而是交换机。此时我们就需要感知路由器的存活状态&#xff0c;这就需要用到 BFD&#xff08;Bidirectio…...

vue使用路由技术实现登录成功后跳转到首页

文章目录 一、概述二、使用步骤安装vue-router在src/router/index.js中创建路由器&#xff0c;并导出在vue应用实例中使用router声明router-view标签&#xff0c;展示组件内容 三、配置登录成功后跳转首页四、参考资料 一、概述 路由&#xff0c;决定从起点到终点的路径的进程…...

用户模块 - IP归属地框架吞吐测试

一、引言 在很多用户系统中&#xff0c;我们常常需要知道一个IP地址来自哪里&#xff0c;比如判断一个用户是否来自国内、识别异常登录等。而实现这个功能&#xff0c;通常会使用一个“IP归属地解析框架”&#xff0c;它可以根据IP地址返回国家、省份、城市等信息。 不过&#…...

生活实用小工具-手机号归属地查询

一、接口定义 手机号码归属地接口&#xff08;又称手机号查询API&#xff09;是一种通过输入手机号码&#xff0c;快速返回其归属地信息&#xff08;如省份、城市、运营商、区号等&#xff09;的应用程序接口。其数据基础来源于运营商&#xff08;移动、联通、电信&#xff09;…...

鸿蒙-5.1.0-release源码下载

源码获取 前提条件 注册码云gitee帐号。注册码云SSH公钥&#xff0c;请参考码云帮助中心。安装git客户端和git-lfs并配置用户信息。 git config --global user.name "yourname" # 这得和gitee的账号对的上 git config --global user.email "your-email-ad…...

2020年下半年试题三:论云原生架构及其应用

论文库链接&#xff1a;系统架构设计师论文 论文题目 近年来&#xff0c;随着数字化转型不断深入&#xff0c;科技创新与业务发展不断融合&#xff0c;各行各业正在从大工业时代的固化范式进化成面向创新型组织与灵活型业务的崭新模式。在这一背景下&#xff0c;以容器盒微服务…...

Flutter到HarmonyOS Next 的跨越:memory_info库的鸿蒙适配之旅

Flutter到鸿蒙的跨越&#xff1a;memory_info库的鸿蒙适配之旅 本项目作者&#xff1a;kirk/坚果 您可以使用这个Flutter插件来更改应用程序图标上的角标 作者仓库&#xff1a;https://github.com/MrOlolo/memory_info/tree/master/memory_info 在数字化浪潮的推动下&#…...

昆士兰科技大学无人机自主导航探索新框架!UAVNav:GNSS拒止与视觉受限环境中的无人机导航与目标检测

作者&#xff1a; Sebastien Boiteau, Fernando Vanegas, Felipe Gonzalez 单位&#xff1a;昆士兰科技大学电气工程与机器人学院&#xff0c;昆士兰科技大学机器人中心 论文标题&#xff1a;Framework for Autonomous UAV Navigation and Target Detection in Global-Naviga…...

uniapp设置 overflow:auto;右边不显示滚动条的问题

设置了overflow&#xff1a;auto;或者其它overflow的属性不显示滚动条是因为在uniapp中默认隐藏了滚动条 解决方法&#xff1a; //强制显示滚动条 ::-webkit-scrollbar {width: 8px !important;background: #ccc !important;display: block !important;}//设置滚动条颜色.cu-…...

基于SIP协议的VOIP话机认证注册流程分析与抓包验证

话机的认证注册报文怎么看&#xff1f; 在SIP协议中&#xff0c;当VOIP话机首次启动的时候&#xff0c;他会向SIP服务器发送一个Register请求来注册自己的信息地址&#xff0c;&#xff0c;告诉服务器 话机当前在线话机的IP地址和端口是什么话机希望接收通话的联系方式 认证注…...

JS,ES,TS三者什么区别

Java Script(JS)、ECMAScript(ES)、TypeScript(TS) 的核心区别与关联的详细解析,结合技术背景、设计目标及应用场景展开说明: 一、核心定义与关系 JavaScript(JS) 定义:一种动态类型、基于原型的脚本语言,由 Netscape 公司于 1995 年首次开发,用于网页交互功能。角…...

深度理解指针(2)

&#x1f381;个人主页&#xff1a;工藤新一 &#x1f50d;系列专栏&#xff1a;C面向对象&#xff08;类和对象篇&#xff09; &#x1f31f;心中的天空之城&#xff0c;终会照亮我前方的路 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 深入理解指…...

笔记本/台式机加装PCIe 5.0固态硬盘兼容性与安装方法详解 —— 金士顿Kingston FURY Renegade G5装机指南

在2025年&#xff0c;存储设备市场迎来了革命性的升级浪潮。作为最高性能PCIe 5.0固态硬盘的代表&#xff0c;Kingston FURY Renegade G5 PCIe 5.0 NVMe M.2 固态硬盘不仅刷新了读写速度新高&#xff0c;更以优异的能耗和温控表现成为高端PC、游戏本和工作站升级的“定心丸”。…...

使用libUSB-win32的简单读写例程参考

USB上位机程序的编写&#xff0c;函数的调用过程. 调用 void usb_init(void); 进行初始化 调用usb_find_busses、usb_find_devices和usb_get_busses这三个函数&#xff0c;获得已找到的USB总线序列&#xff1b;然后通过链表遍历所有的USB设备&#xff0c;根据已知的要打开USB设…...

Tailwind CSS 实战教程:从入门到精通

Tailwind CSS 实战教程&#xff1a;从入门到精通 前言 在Web开发的世界里&#xff0c;CSS框架层出不穷。从早期的Bootstrap到现在的Tailwind CSS&#xff0c;前端开发者们总是在寻找更高效、更灵活的样式解决方案。今天&#xff0c;我们就来深入探讨这个被称为"实用优先…...

【IC】如何获取良好的翻转数据来改进dynamic IR drop分析?

动态电压降分析是一个复杂的过程。为了成功执行适当的分析&#xff0c;需要组合多个输入文件和不同的配置设置。 切换场景是任何动态压降分析的关键。设计中的所有门电路和实例不会同时处于活动状态。此外&#xff0c;对于更复杂的单元&#xff0c;可能的切换模式会非常多。这…...

WebGL知识框架

一、WebGL 基础概念 1. WebGL 简介 是什么&#xff1f; 基于 OpenGL ES 的浏览器 3D 图形 API&#xff0c;直接操作 GPU 渲染。 核心特点 底层、高性能、需手动控制渲染管线。 依赖 JavaScript 和 GLSL&#xff08;着色器语言&#xff09;。 与 Three.js 的关系 Three.js…...

集成 ONLYOFFICE 与 AI 插件,为您的服务带来智能文档编辑器

在数字化办公浪潮中&#xff0c;文档处理效率对企业发展具有关键意义。但许多办公平台仅支持基础流程&#xff0c;查阅、批注和修改需借助外部工具&#xff0c;增加了操作复杂性和沟通成本。本文将为开发者介绍如何集成 ONLYOFFICE 文档并利用其中的 AI 插件&#xff0c;智能处…...

Simulink模型回调

Simulink 模型回调函数是一种特殊的 MATLAB 函数&#xff0c;可在模型生命周期的特定阶段自动执行。它们允许用户自定义模型行为、执行初始化任务、验证参数或记录数据。以下是各回调函数的详细说明&#xff1a; 1. PreLoadFcn 触发时机&#xff1a;Simulink 模型加载到内存之…...

网络协议分析 实验五 UDP-IPv6-DNS

文章目录 实验5.1 UDP(User Datagram Protocol)练习二 UDP单播通信练习三 利用仿真编辑器编辑UDP数据包&#xff0c;利用工具接收练习四 UDP受限广播通信练习六 利用仿真编辑器编辑IPV6的UDP数据包并发送实验5.2 DNS(Domain Name System)练习二 仿真编辑DNS查询报文&#xff08…...

共享代理IP vs 动态IP:企业级业务场景的选型深度解析

在数字化转型加速的今天&#xff0c;IP地址管理已成为企业网络架构中的核心命题。无论是跨境电商的多账号运营、大数据采集的精准度保障&#xff0c;还是网络安全的纵深防御&#xff0c;IP解决方案的选择直接关系到业务效能与合规风险。本文将从技术底层逻辑出发&#xff0c;结…...

鸿蒙OSUniApp制作一个小巧的图片浏览器#三方框架 #Uniapp

利用UniApp制作一个小巧的图片浏览器 最近接了个需求&#xff0c;要求做一个轻量级的图片浏览工具&#xff0c;考虑到多端适配的问题&#xff0c;果断选择了UniApp作为开发框架。本文记录了我从0到1的开发过程&#xff0c;希望能给有类似需求的小伙伴一些参考。 前言 移动互联…...

Java并发编程面试题:并发工具类(10题)

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…...

【Oracle专栏】扩容导致数据文件 dbf 丢失,实操

Oracle相关文档,希望互相学习,共同进步 风123456789~-CSDN博客 1.背景 同事检查扩容情况,发现客户扩容后数据盘后,盘中原有文件丢失,再检查发现数据库没有启动。通过检查发现数据盘中丢失的是oracle的 dbf 表空间文件。数据库无法启动。 检查情况:1)没有rman备份 …...

【Linux】Linux 的管道与重定向的理解

目录 一、了解Linux目录配置标准FHS 二、Linux数据重定向的理解与操作 2.1基本背景 2.2重定向的理解 2.3Linux管道命令的理解与操作 三、Linux 环境变量与PATH 3.1环境变量PATH 一、了解Linux目录配置标准FHS FHS本质&#xff1a;是一套规定Linux目录结构&#xff0c;软…...

【交互 / 差分约束】

题目 代码 #include <bits/stdc.h> using namespace std; using ll long long;const int N 10510; const int M 200 * 500 10; int h[N], ne[M], e[M], w[M], idx; ll d[N]; int n, m; bool st[N]; int cnt[N];void add(int a, int b, int c) {w[idx] c, e[idx] b…...

1. Go 语言环境安装

&#x1f451; 博主简介&#xff1a;高级开发工程师 &#x1f463; 出没地点&#xff1a;北京 &#x1f48a; 人生目标&#xff1a;自由 ——————————————————————————————————————————— 版权声明&#xff1a;本文为原创文章&#xf…...

灰度图像和RGB图像在数据大小和编码处理方式差别

技术背景 好多开发者对灰度图像和RGB图像有些认知差异&#xff0c;今天我们大概介绍下二者差别。灰度图像&#xff08;Grayscale Image&#xff09;和RGB图像在编码处理时&#xff0c;数据大小和处理方式的差别主要体现在以下几个方面&#xff1a; 1. 通道数差异 图像类型通道…...

Lord Of The Root: 1.0.1通关

Lord Of The Root: 1.0.1 来自 <Lord Of The Root: 1.0.1 ~ VulnHub> 1&#xff0c;将两台虚拟机网络连接都改为NAT模式 2&#xff0c;攻击机上做namp局域网扫描发现靶机 nmap -sn 192.168.23.0/24 那么攻击机IP为192.168.23.182&#xff0c;靶场IP192.168.23.247 3&…...

虚拟机安装CentOS7网络问题

虚拟机安装CentOS7网络问题 1. 存在的问题1.1 CentOS7详细信息 2. 解决问题3.Windows下配置桥接模式 1. 存在的问题 虽然已经成功在虚拟机上安装了CentOS7&#xff0c;但是依旧不能上网。 1.1 CentOS7详细信息 [fanzhencentos01 ~]$ hostnamectlStatic hostname: centos01Ic…...

AI-02a5a6.神经网络-与学习相关的技巧-批量归一化

批量归一化 Batch Normalization 设置合适的权重初始值&#xff0c;则各层的激活值分布会有适当的广度&#xff0c;从而可以顺利的进行学习。那么&#xff0c;更进一步&#xff0c;强制性的调整激活值的分布&#xff0c;是的各层拥有适当的广度呢&#xff1f;批量归一化&#…...

matlab实现蚁群算法解决公交车路径规划问题

使用蚁群算法解决公交车路径规划问题的MATLAB代码实现&#xff0c;包含详细注释和仿真流程。该算法以站点间行驶时间或距离为优化目标&#xff0c;寻找最优公交路线。 1. 问题建模与参数设置 1.1 输入数据 站点坐标&#xff1a;假设有20个公交站点&#xff0c;随机生成位置。…...

Agent Builder API - Agent Smith 扩展的后端服务(开源代码)

​一、软件介绍 文末提供程序和源码下载 Agent Builder API - Agent Smith 扩展的后端服务&#xff08;开源代码&#xff09;手动设置&#xff1a;在本地计算机中克隆此存储库并启动 python FAST API 服务器。&#xff08;可选&#xff09;安装并设置 Mongo DB。Dev Container…...

C++类和对象之相关特性

C 一.类型转换隐式类型转换 二.static成员一、static成员变量二、static成员函数三、static成员的存储位置四、总结 三.友元一、友元函数二、友元类三、友元成员函数四、总结 四.内部类五.匿名对象六.new 一.类型转换 在C中&#xff0c;类类型转换是指将一个类的对象转换为另一…...

容器编排的革命:Kubernetes如何引领IT的云原生时代

文章目录 Kubernetes的本质&#xff1a;容器世界的智能指挥家Kubernetes的核心功能包括&#xff1a; Kubernetes的演进&#xff1a;从谷歌的实验到全球标准核心技术&#xff1a;Kubernetes的基石与生态1. Pod与容器&#xff1a;最小调度单位2. Deployment&#xff1a;无状态应用…...

2025视频协作工具全景解析:技术跃迁与场景重构

一、技术演进:从功能工具到智能生态 2025年视频协作软件的核心竞争力已从基础功能升级为技术生态的构建。以分秒帧为例,其音视频生产协作系统,可帮助创作者在云端构建工作流,让跨地域、跨终端、跨团队的协作组可以在统一的安全平台上管理所有媒体资源、任务、反馈信息,从而更高…...

保持视频二维码不变,更新视频的内容

视频替换功能允许用户在保持视频二维码、观看地址和调用代码不变的情况下更新视频内容&#xff0c;从而节省重新印刷物料的成本。这一功能适用于多种场景&#xff0c;如营销宣传、产品操作手册、设备说明书等&#xff0c;当视频内容需要修改或更新时&#xff0c;用户只需上传新…...

Linux常用命令40——alias设置命令别名

在使用Linux或macOS日常开发中&#xff0c;熟悉一些基本的命令有助于提高工作效率&#xff0c;alias命令来自英文单词alias&#xff0c;中文译为“别名”&#xff0c;其功能是设置命令别名信息。我们可以使用alias将一些较长的命令进行简写&#xff0c;往往几十个字符的命令会变…...

Java大师成长计划之第22天:Spring Cloud微服务架构

&#x1f4e2; 友情提示&#xff1a; 本文由银河易创AI&#xff08;https://ai.eaigx.com&#xff09;平台gpt-4o-mini模型辅助创作完成&#xff0c;旨在提供灵感参考与技术分享&#xff0c;文中关键数据、代码与结论建议通过官方渠道验证。 随着企业应用的不断扩展&#xff0c…...

为什么go语言中返回的指针类型,不需要用*取值(解引用),就可以直接赋值呢?

Go 中返回的是指针&#xff0c;但你却能直接用“.”访问字段&#xff0c;看起来像是“没有解引用”&#xff0c;其实是 Go 帮你自动处理了“指针解引用”的语法糖。 在 Go 中&#xff0c;如果你有一个结构体指针&#xff08;例如 *FileMeta&#xff09;&#xff0c;你可以直接…...

Java生成可控的Word表格功能开发

在日常办公自动化与系统集成场景中,生成结构化的Word文档已成为一种刚性需求,尤其是带有格式规范、内容动态填充的Word表格(Table)。本文将围绕如何利用Java开发一个可控的Word表格生成功能模块展开,涵盖技术选型、代码实现、边界控制与常见问题处理等方面,帮助开发者快速…...

OpenCV CUDA 模块中用于在 GPU 上计算矩阵中每个元素的绝对值或复数的模函数abs()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 void cv::cuda::abs(InputArray src, OutputArray dst, Stream &stream Stream::Null()) 是 OpenCV 的 CUDA 模块中的一个函数&#xff0c;…...

hadoop知识点

&#xff08;一&#xff09;复制和移动 1.复制文件 格式&#xff1a;cp源文件 目标文件 示例&#xff1a;把filel.txt复制一份得到file2.txt 2.复制目录 格式&#xff1a;cp-r源文件夹 目标文件夹 示例&#xff1a;把目标dir1复制一份得到dir2 3.重命名和移动 格式&#xff1a;…...

最短路与拓扑(2)

1、信使 #include<bits/stdc.h> using namespace std; const int N105; int n,m; int g[N][N]; int dist[N]; bool st[N]; const int INF0x3f3f3f3f;int dij(){memset(dist,0x3f,sizeof dist);dist[1]0;for(int i1;i<n;i){int t0;for(int j1;j<n;j){if(!st[j]&…...