electron介绍
Electron中文文档
Electron是什么?
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。
Electron 允许开发者使用前端技术栈来创建可以在 Windows、macOS 和 Linux 等多个操作系统上运行的桌面应用程序。
Electron 本质上是一个运行在桌面操作系统上的运行时环境,它将 Chromium(一个开源的浏览器引擎)和 Node.js(一个基于 JavaScript 的服务器端运行时环境)结合在一起。这使得开发者可以在应用程序中同时使用前端的 HTML、CSS 和 JavaScript 来构建用户界面,以及使用 Node.js 的强大功能来进行文件系统操作、网络通信等后端任务。
注意
桌面应用程序是一种在个人计算机上运行的软件应用,它直接安装在操作系统上,为用户提供特定的功能和服务。
Electron主要组成部分
- Chromium 引擎
- 支持最新特性的chrome浏览器
- 提供了强大的渲染能力,能够高效地显示网页内容和运行前端代码。它负责显示应用程序的用户界面,包括 HTML 页面、CSS 样式和 JavaScript 交互。
- Node.js
- JavaScript运行时环境
- 允许开发者在应用程序中使用 Node.js 的 API 进行文件操作、网络请求、进程管理等后端任务。这使得应用程序可以与操作系统进行深度交互,实现各种功能,如读写文件、与服务器通信、管理系统资源等。
- native API
- 提供统一的原生界面操作能力
- 开发者可以通过 native API 直接与操作系统进行通信,例如调出操作系统的系统通知等。
Electron 工作流程
Electron 的工作流程主要包括以下几个步骤:
- 启动阶段
- 用户双击 Electron 应用程序的图标或通过其他方式启动应用程序。
- 操作系统将启动应用程序的可执行文件,这个可执行文件实际上是一个由 Electron 打包工具生成的启动脚本。
- 启动脚本会加载 Electron 的主进程,主进程通常是一个用 Node.js 编写的脚本文件。主进程负责管理应用程序的生命周期、窗口管理、与操作系统的交互等任务。
- 主进程初始化
- 在主进程中,首先会加载必要的模块和库,如 Node.js 的核心模块、Electron 的核心模块等。
- 主进程会创建一个或多个浏览器窗口,每个窗口对应一个独立的渲染进程。窗口的创建可以通过编程方式实现,也可以使用预定义的窗口配置文件。
- 主进程可以设置应用程序的菜单、快捷键、系统托盘图标等用户界面元素,以及处理与操作系统的交互,如文件拖拽、系统通知等。
- 渲染进程启动
- 当主进程创建一个浏览器窗口时,会为每个窗口启动一个独立的渲染进程。渲染进程本质上是一个基于 Chromium 浏览器引擎的实例,它负责渲染应用程序的用户界面。
- 渲染进程会加载应用程序的 HTML、CSS 和 JavaScript 文件,这些文件可以是本地文件,也可以是通过网络加载的资源。渲染进程中的 JavaScript 代码可以使用前端开发技术,如 React、Vue、Angular 等框架来构建用户界面和实现业务逻辑。
- 渲染进程可以通过 Electron 提供的 IPC(Inter-Process Communication,进程间通信)机制与主进程进行通信,发送和接收消息,实现跨进程的数据共享和功能调用。
- 应用程序运行
- 用户与应用程序的交互主要发生在渲染进程中的用户界面上。例如,用户点击按钮、输入文本、滚动页面等操作会触发渲染进程中的 JavaScript 事件处理函数。
- 渲染进程中的 JavaScript 代码可以根据用户的操作执行相应的业务逻辑,如数据处理、网络请求、状态更新等。如果需要与主进程进行交互,例如访问文件系统、调用系统功能等,可以通过 IPC 机制向主进程发送消息,请求主进程执行相应的操作。
- 主进程接收到渲染进程的请求后,会根据请求的类型执行相应的操作,并通过 IPC 机制将结果返回给渲染进程。渲染进程接收到结果后,可以更新用户界面,显示操作的结果。
- 关闭阶段
- 当用户关闭应用程序的窗口或通过其他方式退出应用程序时,主进程会收到相应的事件通知。
- 主进程可以执行一些清理工作,如保存应用程序的状态、关闭打开的文件、释放资源等。
- 主进程退出,应用程序完全关闭。
流程模型
这里借用禹神在b站讲解中用到的图:
Electron中存在不同的进程,主要分为:主进程、渲染进程。
主进程管理渲染进程,主进程与渲染进程是可以通信的。
- 主进程:
- 可以看做是 package.json 中 main 属性对应的文件
- 一个应用只会有一个主进程
- 只有主进程可以 进行GUI的API操作(即调用native API)。如果渲染进程想要调用native API,渲染进程需要先和主进程建立通信,最终还是由主进程进行调用,再把结果传递给渲染进程。
- 渲染进程
- Windows中展示的界面通过渲染进程表现
- 一个应用可以有多个渲染进程
主进程可以通过调用 native API(原生应用程序编程接口)来实现与操作系统的底层交互以及执行特定的系统级任务。
Electron 的架构将主进程设计为负责管理应用程序的生命周期、与操作系统交互以及协调渲染进程。这种设计使得主进程可以直接调用 native API,以实现一些需要底层系统访问的功能,如创建窗口、管理系统托盘、处理文件对话框等。
调用 native API 的方式
- 使用 Node.js 的内置模块:Node.js 提供了一些内置模块,如
fs
(文件系统)、path
(路径处理)、child_process
(子进程管理)等,这些模块可以直接调用操作系统的相关功能。例如,使用fs
模块可以进行文件的读写、创建目录、删除文件等操作。
const fs = require('fs');
fs.writeFileSync('file.txt', 'Hello, world!');
- 使用第三方模块:除了 Node.js 的内置模块,还有许多第三方模块可以提供更高级的 native API 访问。例如,
electron-native-notification
模块可以在 Electron 应用程序中显示系统通知。
const Notification = require('electron-native-notification');
new Notification('Title', { body: 'Message' });
- 直接调用系统库:在某些情况下,可以使用 Node.js 的ffi(Foreign Function Interface)模块直接调用系统库中的函数。这需要对底层系统编程有一定的了解,并且需要谨慎使用,因为错误的调用可能会导致应用程序崩溃。
const ffi = require('ffi');
const libc = ffi.Library('libc', {'printf': ['int', ['string']]
});
libc.printf('Hello from native API!');
开发优势
- 快速开发和迭代
- 由于使用了前端技术栈,开发者可以利用现有的前端开发工具和流程,如包管理工具(npm、yarn)、代码编辑器(Visual Studio Code、Sublime Text 等)和开发框架(React、Vue、Angular 等),从而加快开发速度。同时,前端技术的热加载和快速迭代特性也使得开发过程更加高效。
- 丰富的生态系统
- Electron 受益于前端和 Node.js 的丰富生态系统,开发者可以轻松地集成各种第三方库和工具,以增强应用程序的功能。例如,可以使用 Electron 与现有的后端服务进行集成,或者使用前端的 UI 组件库来快速构建漂亮的用户界面。
- 易于部署
- Electron 应用程序可以像普通的桌面软件一样进行打包和分发,开发者可以使用 Electron 的打包工具将应用程序打包成可执行文件,或者发布到应用商店中,以便用户轻松安装和使用。
应用场景
- 桌面版的 Web 应用
- 如果已经有一个成熟的 Web 应用,并且希望将其转换为桌面应用,Electron 是一个理想的选择。可以将 Web 应用的代码直接嵌入到 Electron 中,稍加修改即可在桌面环境中运行,同时还可以利用桌面环境的特性,如系统通知、文件拖放等。
- 生产力工具
- 开发各种生产力工具,如文本编辑器、图像处理器、代码编辑器等。Electron 的强大功能和灵活性使得开发者可以快速构建功能丰富的工具,满足用户的各种需求。
- 跨平台桌面应用
- 对于需要在多个操作系统上运行的应用程序,Electron 提供了一种高效的解决方案。开发者可以编写一次代码,然后在不同的平台上进行测试和部署,大大降低了开发和维护成本。
相关文章:

electron介绍
Electron中文文档 Electron是什么? Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 允许开发者使用前端技术栈来创建可以在 Windows、macOS 和 Linux 等多个操作系统上运行的桌面应用程序。 Electron 本质上是一个运行在桌面操作…...

Redis-持久化
首先,我们明白一个概念, 硬盘>持久 内存>不持久 而Redis是一个内存数据库,不持久,相比于Mysql这样的关系型数据库,最明显的特点是快/效率高 为了保证速度快,数据要保存再内存中,为了持久,存储在硬盘上 所以redis决定: 插入>内存+硬盘(硬盘是为了在re…...
封装轮播图 (因为基于微博小程序,语法可能有些出入,如需使用需改标签)
这是在组件中使用,基于微博语法 <template><wbx-view class"" style"width: 100vw;height: 70vh;"><WBXswiper change"gaibian" :vertical"false" :current"current" indicatorActiveColor"…...

【Ubuntu】minicom安装、配置、使用以及退出
目录 1 安装 2 配置 3 使用 4 退出 minicom是一个串口通信的工具,以root权限登录系统,可用来与串口设备通信。 1 安装 sudo apt-get install minicom 2 配置 使用如下命令进入配置界面: sudo minicon -s 进入配置界面后,…...
MYSQL的监控
1. MySQL服务器都提供了哪几种类型的日志文件?说明每种日志的用途。 Error log:启动、关闭和异常有关的诊断信息 General query log:服务器从客户端收到的所有语句 Slow query log:需要很长时间执行的查询 Audit log:企业版基于策略的审计 Binary…...

CTF ciscn_2019_web_northern_china_day1_web2
ciscn_2019_web_northern_china_day1_web2 BEGIN 拿到题目,先看看 这里发现一个很像提示的东西,然后发现下面是一堆小电视商品,有lv等级和金钱,所以这题的入口可能就是再lv6和这个资金募集上 然后点击下next,看看页…...

linux中vim编辑器的应用实例
前言 Linux有大量的配置文件,其中编辑一些配置文件,最常用的工具就是 Vim ,本文介绍一个实际应用的Vim编辑器开发文档的实例。 Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性。…...

智慧城市交通管理中的云端多车调度与控制
城市交通管理中的云端多车调度与控制 智慧城市是 21世纪的城市基本发展方向,为了实现智慧城市建设的目标,人们需要用现代化的手段去管理和控制城市中的各种资源和设施。智能交通控制与管理是智慧城市中不可缺少的一部分,因为现代城市交通系统…...

分治(归并排序)
一、基本思路 我们以一个归并排序为例。 . - 力扣(LeetCode) 归并排序的思想:得到两个有序数组,把两个有序数组合并,传到下一层递归,一直得到两个有序数组,一直合并,最后就能得到有…...
小学生为什么要学英语
小学生需要学习英语的原因有很多,以下是其中的一些原因(毕竟我也会累滴(* ̄▽ ̄*)): 1. 全球化交流:英语是国际交流的通用语言,学习英语可以帮助小学生更好地融入全球化的社会环境&am…...

企业云存储如何收费?企业云存储收费标准
企业云存储如何收费?企业云存储的收费方式因不同的服务提供商和具体的服务选项而异,通常从用户数量、存储容量、功能、混合收费、按需定价、定制化、功能模块等多个方面进行考量。以下是对其多方面收费方式的详细介绍: 1.按用户数量收费 适用…...

一步步教你LangGraph Studio:可视化调试基于LangGraph构建的AI智能体
之前我们在第一时间介绍过使用LangChain的LangGraph开发复杂的RAG或者Agent应用,随着版本的迭代,LangGraph已经成为可以独立于LangChain核心,用于开发多步骤、面向复杂任务、支持循环的AI智能体的强大框架。 近期LangGraph推出了一个使得复杂…...
用SpringBoot打造先进的学科竞赛管理系统
1绪 论 1.1研究背景 当今时代是飞速发展的信息时代。在各行各业中离不开信息处理,这正是计算机被广泛应用于信息管理系统的环境。计算机的最大好处在于利用它能够进行信息管理。使用计算机进行信息控制,不仅提高了工作效率,而且大大的提高了其…...

Linux入门攻坚——34、nsswitch、pam、rsyslog和loganalyzer前端展示工具
nsswitch:network service switch 名称解析:name <---> id 认证服务:用户名、密码验证或token验证等 名称解析和认证服务都涉及查找位置,即保存在哪里。如linux认证,passwd、shadow,是在文件中&…...

如何在Excel中快速找出前 N 名,后 N 名
有如下销售额统计表: 找出销售额排前 10 名的产品及其销售额,和销售额排倒数 10 名以内的产品及其销售额,结果如下所示: 前 10 名: spl("E(?1).sort(ProductSales:-1).to(10)",A1:C78)后 10 名࿱…...

创意实现!在uni-app小程序商品详情页轮播中嵌入视频播放功能
背景介绍 通过uni-app框架实现商城小程序商品详情页的视频与图片轮播功能,以提升用户体验和增加商品吸引力。通过展示商品视频和图片,用户可以更全面地了解商品细节,从而提高购买决策的便利性和满意度。这种功能适用于各类商品,如…...

WAF,全称Web Application Firewall,好用WAF推荐
WAF,全称Web Application Firewall,即Web应用防火墙,是一种网络安全设备,旨在保护Web应用程序免受各种Web攻击,如SQL注入、跨站脚本(XSS)、跨站请求伪造(CSRF)等。 WAF通…...

docker中搭建nacos并将springboot项目的配置文件转移到nacos中
前言 网上搜索docker中搭建nacos发现文章不是很好理解,正好最近在搭建nacos练手。记录一下整个搭建过程。文章最后附上了一些过程中遇到的问题,大家可以按需要查看。 docker中搭建nacos并将springboot项目的配置文件转移到nacos中 前言1 docker中下拉na…...
概率论原理
智慧挺不喜欢我,他告诉我需要有耐心,答案在后面;而我总想马上得到答案;但它也会给我奖励,因为我总会自己去寻找答案 B站 大大的小番茄 普林斯顿微积分 PDF 一化儿 BILIBILI 泰勒展开式 知乎https://www.zhihu.com…...

MYSQL的安装和升级
MySQL的RPM安装通常分为不同的包,包括Server、Common、Client、Devel、Libs、Libs-compat、Test、Source,请写出上述每个包的功能。 Server:包含MySQL服务器的核心文件和服务。安装此包后可以运行MySQL数据库服务器。 Common:包…...

CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...

centos 7 部署awstats 网站访问检测
一、基础环境准备(两种安装方式都要做) bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
.Net Framework 4/C# 关键字(非常用,持续更新...)
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码,而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库,可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画,可以包含在你的网页或应用项目中。 3.An…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中,附加包含目录、附加库目录和附加依赖项是三个至关重要的设置,它们相互配合,确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中,这些概念容易让人混淆,但深入理解它们的作用和联…...