electron介绍

devtools/2024/9/25 15:25:49/

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 APIs
    • 提供统一的原生界面操作能力
    • 开发者可以通过 native APIs 直接与操作系统进行通信,例如调出操作系统的系统通知等。

Electron 工作流程

桌面应用就是运行在不同操作系统上的一个软件。软件中的功能实现是通过native api去跟操作系统进行相应的交互。
底层的操作系统对于前端工程师来说就像是一个功能的黑盒,当想要实现某个原生操作的时候,前端工程师只需要去调用具体的API就可以了。

因此,此处讨论的是:在操作系统的上层,发生的一些行为。

Electron 的工作流程主要包括以下几个步骤:

  1. 启动阶段
    • 用户双击 Electron 应用程序的图标或通过其他方式启动应用程序。
    • 操作系统将启动应用程序的可执行文件,这个可执行文件实际上是一个由 Electron 打包工具生成的启动脚本。
    • 启动脚本会加载 Electron 的主进程,主进程通常是一个用 Node.js 编写的脚本文件。主进程负责管理应用程序的生命周期、窗口管理、与操作系统的交互等任务。
  2. 主进程初始化
    • 在主进程中,首先会加载必要的模块和库,如 Node.js 的核心模块、Electron 的核心模块等。
    • 主进程会创建一个或多个浏览器窗口,每个窗口对应一个独立的渲染进程。窗口的创建可以通过编程方式实现,也可以使用预定义的窗口配置文件。
    • 主进程可以设置应用程序的菜单、快捷键、系统托盘图标等用户界面元素,以及处理与操作系统的交互,如文件拖拽、系统通知等。
  3. 渲染进程启动
    • 当主进程创建一个浏览器窗口时,会为每个窗口启动一个独立的渲染进程。渲染进程本质上是一个基于 Chromium 浏览器引擎的实例,它负责渲染应用程序的用户界面。
    • 渲染进程会加载应用程序的 HTML、CSS 和 JavaScript 文件,这些文件可以是本地文件,也可以是通过网络加载的资源。渲染进程中的 JavaScript 代码可以使用前端开发技术,如 React、Vue、Angular 等框架来构建用户界面和实现业务逻辑。
    • 渲染进程可以通过 Electron 提供的 IPC(Inter-Process Communication,进程间通信)机制与主进程进行通信,发送和接收消息,实现跨进程的数据共享和功能调用。
  4. 应用程序运行
    • 用户与应用程序的交互主要发生在渲染进程中的用户界面上。例如,用户点击按钮、输入文本、滚动页面等操作会触发渲染进程中的 JavaScript 事件处理函数。
    • 渲染进程中的 JavaScript 代码可以根据用户的操作执行相应的业务逻辑,如数据处理、网络请求、状态更新等。如果需要与主进程进行交互,例如访问文件系统、调用系统功能等,可以通过 IPC 机制向主进程发送消息,请求主进程执行相应的操作。
    • 主进程接收到渲染进程的请求后,会根据请求的类型执行相应的操作,并通过 IPC 机制将结果返回给渲染进程。渲染进程接收到结果后,可以更新用户界面,显示操作的结果。
  5. 关闭阶段
    • 当用户关闭应用程序的窗口或通过其他方式退出应用程序时,主进程会收到相应的事件通知。
    • 主进程可以执行一些清理工作,如保存应用程序的状态、关闭打开的文件、释放资源等。
    • 主进程退出,应用程序完全关闭。

工作流程总结

Electron中存在不同的进程,主要分为:主进程渲染进程

  • 主进程:
    • 可以看做是 package.json 中 main 属性对应的文件
    • 一个应用只会有一个主进程
    • 只有主进程可以 进行GUI的API操作(即调用native API)。如果渲染进程想要调用native API,渲染进程需要先和主进程建立通信,最终还是由主进程进行调用,再把结果传递给渲染进程。
  • 渲染进程
    • Windows中展示的界面通过渲染进程表现
    • 一个应用可以有多个渲染进程

在 Electron 中,主进程和渲染进程在操作系统上层分别承担着不同的角色和任务。主进程负责管理应用程序的整体运行和与操作系统的交互,渲染进程负责呈现用户界面和执行业务逻辑。通过 IPC 机制,两个进程可以进行有效的通信和协作,共同构建功能强大的桌面应用程序。

开发优势

  • 快速开发和迭代
    • 由于使用了前端技术栈,开发者可以利用现有的前端开发工具和流程,如包管理工具(npm、yarn)、代码编辑器(Visual Studio Code、Sublime Text 等)和开发框架(React、Vue、Angular 等),从而加快开发速度。同时,前端技术的热加载和快速迭代特性也使得开发过程更加高效。
  • 丰富的生态系统
    • Electron 受益于前端和 Node.js 的丰富生态系统,开发者可以轻松地集成各种第三方库和工具,以增强应用程序的功能。例如,可以使用 Electron 与现有的后端服务进行集成,或者使用前端的 UI 组件库来快速构建漂亮的用户界面。
  • 易于部署
    • Electron 应用程序可以像普通的桌面软件一样进行打包和分发,开发者可以使用 Electron 的打包工具将应用程序打包成可执行文件,或者发布到应用商店中,以便用户轻松安装和使用。

应用场景

  • 桌面版的 Web 应用
    • 如果已经有一个成熟的 Web 应用,并且希望将其转换为桌面应用,Electron 是一个理想的选择。可以将 Web 应用的代码直接嵌入到 Electron 中,稍加修改即可在桌面环境中运行,同时还可以利用桌面环境的特性,如系统通知、文件拖放等。
  • 生产力工具
    • 开发各种生产力工具,如文本编辑器、图像处理器、代码编辑器等。Electron 的强大功能和灵活性使得开发者可以快速构建功能丰富的工具,满足用户的各种需求。
  • 跨平台桌面应用
    • 对于需要在多个操作系统上运行的应用程序,Electron 提供了一种高效的解决方案。开发者可以编写一次代码,然后在不同的平台上进行测试和部署,大大降低了开发和维护成本。

http://www.ppmy.cn/devtools/117027.html

相关文章

需求导向的正则表达式

目录 re.sub 需求:把 1. 2.这些序号转成(1) (2) 需求:反过来,把(1)->1. ,(2)》2. 。 需求:把出现的 1 2 3都转成下标 进阶1!只想让化学符…

SegFormer网络结构的学习和重构

因为太多的博客并没有深入理解,本文是自己学习后加入自己深入理解的总结记录,方便自己以后查看。 segformer中encoder、decoder的详解。 学习前言 一起来学习Segformer的原理,如果有用的话,请记得点赞关注哦。 一、Segformer的网络结构图 网络结构&…

使用 Three.js GPGPU 和着色器进行 RGB 偏移的网格置换纹理

更多精彩内容尽在 dt.sim3d.cn ,关注公众号【sky的数孪技术】,技术交流、源码下载请添加微信号:digital_twin123 在本文中,我们将学习如何使用 Three.js 创建像素/网格位移效果,并通过着色器和 GPGPU 技术进行增强。并…

BOE(京东方)重磅亮相世界制造业大会 科技创新引领现代化产业体系建设新未来

9月20日-23日,备受瞩目的2024世界制造业大会在合肥盛大召开,汇聚全球行业领袖、专家学者、知名企业,共同探讨现代化产业体系建设的新技术、新趋势、新机遇。作为积极推动实体经济与数字经济融合发展的产业领军企业,BOE&#xff08…

AI学习指南深度学习篇-Adadelta的Python实践

AI学习指南深度学习篇-Adadelta的Python实践 深度学习是人工智能领域的一个重要分支,近年来在各个领域都取得了显著的成就。在深度学习的模型训练中,优化算法起着至关重要的作用,其中Adadelta是一种常用的优化算法之一。本篇博客将使用Pytho…

828华为云征文|Flexus云服务器X实例实践:安装Ward服务器监控工具

828华为云征文|Flexus云服务器X实例实践:安装Ward服务器监控工具 引言一、Flexus云服务器X实例介绍1.1 Flexus云服务器X实例简介1.2 主要使用场景 二、购买Flexus云服务器X实例2.1 购买规格参考2.2 查看Flexus云服务器X实例状态 三、远程连接Flexus云服务…

获取douyin商品详情:API接口的力量

什么是DouYin商品详情API? douyin商品详情API是douyin开放平台提供的一项服务,允许开发者通过编程方式获取douyin商品的详细信息。这些信息通常包括商品的标题、价格、销量、描述、图片等。 API返回值说明 商品详情API返回的数据通常包括以下字段&…

【网页设计】前言

本专栏主要记录 “网页设计” 这一课程的相关笔记。 参考资料: 黑马程序员:黑马程序员pink老师前端入门教程,零基础必看的h5(html5)css3移动端前端视频教程_哔哩哔哩_bilibili 教材:《Adobe创意大学 Dreamweaver CS6标准教材》《…