Electron详解(一):基本介绍

2023-11-15

一、electron简介

Electron(官网:https://www.electronjs.org/zh/)是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源框架。

Electron提供了丰富的本地(操作系统)API,使你能够使用纯JavaScript来创建桌面应用程序。Electron通过集成浏览器内核,使用Web技术来实现不同平台下的渲染,并结合了 Chromium 、Node.js 和用于调用系统本地功能的Native API 三大板块。
在这里插入图片描述

  1. Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用;
  2. Chromium 为 Electron 提供强大的 UI 渲染能力,由于 Chromium 本身跨平台,因此无需考虑代码的兼容性。
  3. Chromium 并不具备原生 GUI(图形用户界面(Graphical User Interface)) 的操作能力,因此 Electron 内部集成 Node.js,编写 UI 的同时也能够调用操作系统的底层 API,例如 path、fs、crypto 等模块。
  4. Native API 为 Electron 提供原生系统的 GUI 支持,借此 Electron 可以调用原生应用程序接口。

总结起来,Chromium 负责页面 UI 渲染,Node.js 负责业务逻辑,Native API 则提供原生能力和跨平台。

二、发展历史

  • 2013年4月 Atom Shell 项目启动 。(Electron于2013年作为构建 Github上可编程的文本编辑器Atom的框架而被开发出来。)
  • 2014年5月 Atom Shell 被开源 。
  • 2015年4月 Atom Shell 被重命名为 Electron 。
  • 2016年5月 Electron 发布了 v1.0.0 版本 。
  • 2016年5月 Electron 构建的应用程序可上架 Mac App Store 。
  • 2016年8月 Windows Store 支持 Electron 构建的应用程序 。

三、electron优缺点

优点:

  1. 原生的接口(菜单、消息提醒、系统托盘等)
  2. 上手难度低。能够使用react、vue等前端框架,能方便地迁移前端组件,构建出漂亮的桌面应用
  3. 方便热更新
  4. 调试和测试方便
  5. Electron 开发文档齐全

缺点:

  1. 因为Electron捆绑了浏览器chromium内核和Node.js,所以它更倾向于创建大型应用,一个简单的Electron应用程序在没有压缩的情况下通常体积约120MB,不太适合开发轻量级的应用
  2. 相比c++开发的桌面应用,性能不如后者
  3. 每个窗口都是一个新的进程,占据大量内存
  4. 启动速度较慢
  5. Electron允许用户通过开发者工具和ASAR源文件轻松访问源代码,不太安全
  6. 不支持手机端

四、electron和Qt的对比

跨平台应用开发框架 electron 和 QT的对比:

electron QT
开发简单,上手快速 开发简单,上手快速
适用于一些单一功能的应用开发,一旦项目过大,可能会有性能问题,适合想要把网页版和桌面端共享代码 较为底层,与系统相关联,全平台兼容性好。适合复杂系统
electron开发的一些应用样例一些大型electron项目,像是atom跟vscode也是主要集中文本处理方面,没有过多的其他功能 适用于复杂较为大型的项目开发,像是yy语音,wps,vituralbox。与硬件相关的复杂系统像是地理信息系统,军工系统
使用JS开发 使用C++,绘制界面可以使用QML,标记语言类js
安全性能一般,开发流程短 安全性能高,但开发流程长
  • Qt适合一些性能要求高的桌面应用。
  • Electron适合一些偏业务的应用,对性能没有很多要求,主要是业务逻辑和UI展示,比较轻量级的应用。因为Electron可以一份代码同时得到网页版和桌面版,所以如果你的应用还需要网页版,那么Electron可以极大地节省你的开发和维护成本。

五、使用electron开发的实际案例

在这里插入图片描述

六、electron 的原理

Electron 是一个集成项目,它做了如下几个重要的工作:

  1. 定制 Chromium,并把定制版本的 Chromium 集成在 Electron 内部
  2. 定制 Node.js,并把定制版本的 Node.js 集成在 Electron 内部
  3. 通过消息轮训机制打通 Node.js 和 Chromium 的消息循环
  4. 通过 Electron 的内置模块向开发者提供桌面应用开发必备的 API

Electron 框架的内部原理图如下所示:

在这里插入图片描述

其中 Chromium 基础能力 API 可以让应用渲染开发者提供的 HTML 页面,让应用可以在 Cookie 或 IndexedDB 中存取数据,前端开发者都非常熟悉这些能力。

Node.js 基础能力 API 可以让开发者读写本地磁盘的文件、通过 socket 访问网络、创建和控制子进程等,Node.js 开发者非常熟悉这些能力。

Electron 内置模块可以让开发者创建操作系统的托盘图标、访问操作系统的剪切板、发送系统通知,同时它还提供了一系列的 API,允许开发者使用 JavaScript 访问 Chromium 的底层能力。

下面我们来看一下 Electron 应用的结构:

在这里插入图片描述

每个 Electron 都是由 1 个主进程、 1 个或多个渲染进程组成的,开发者的主要工作就是完成主进程的逻辑和渲染进程的逻辑。

Electron 应用启动时,首先会加载主进程的逻辑,主进程会创建一个或多个窗口,我们暂时可以粗浅的认为一个窗口就代表一个渲染进程,主进程负责管理所有的渲染进程。

窗口内加载的页面就是开发者要实现的渲染进程的逻辑,我们可以让渲染进程与主进程通信,他们之间是通过 IPC 消息管道进行通信的。虽然有一些特殊的手段让两个渲染进程直接通信(后面的章节我们会介绍),但大部分时候还是通过主进程来中转消息以达到渲染进程间通信的目的。
在这里插入图片描述

Electron 提供的一系列内置模块大部分是专门为主进程的逻辑服务的,比如 app 模块、BrowserWindow 模块和 session 模块等,少量模块是专门为渲染进程的逻辑服务的,比如 ipcRenderer 模块、webFrame 模块等,只有少量模块是两个进程可以同时使用的,比如:clipboard 模块、desktopCapturer 模块等。我们应该清楚这些模块的势力范围,不能在主进程中使用渲染进程的模块,反之也不行。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Electron详解(一):基本介绍 的相关文章

随机推荐

  • 教学:四步利用PHP study小皮面板在vscode上编辑php并运行

    第一步 安装完PHP study 需要自行安装phpstudy和vscode 不会的问度娘 第二步 下载xdebug xdebug下载地址 http xdebug org download 这里我是把PHP study安装到我的Window
  • 人大金仓数据库-kingbaseES

    KingbaseES数据库是一个大型通用的跨平台系统 可以安装和运行于Windows Linux UNIX等多种操作系统平台下 KingbaseES数据库在各种操作系统平台上都很容易安装和配置 用户可以参考相应平台下的安装指南 安装King
  • 如何使用CSS实现一个带有动画效果的折叠面板(Accordion)?

    聚沙成塔 每天进步一点点 专栏简介 折叠面板 Accordion 带动画效果 写在最后 专栏简介 前端入门之旅 探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅 这个专栏是为那些对W
  • 【leetcode算法】02-两数之和

    目录 1 题目描述 2 解题思路 第一种解法 暴力枚举 第二种解法 哈希映射 3 代码展示 4 小结 前言 声明 本文仅为学习记录 图片以及题目资源来自牛客和力扣网 如有侵权请联系删除 大家好 我是尼根 一个又菜又想学算法的准程序猿 今天为
  • 数据分析 -- Pandas①

    目录 Pandas简介 Pandas中的两个主要数据结构 Series 创建 访问 DataFrame 创建 列的查改增删 查看列 修改列 新增列 删除列 导入 导出 表格文件以及常规操作 head 方法 tail 方法 info 方法 d
  • path png转svg_svg之path详解

    一 svg 介绍 path元素是SVG基本形状中最强大的一个 它不仅能创建其他基本形状 还能创建更多其他形状 你可以用path元素绘制矩形 直角矩形或者圆角矩形 圆形 椭圆 折线形 多边形 以及一些其他的形状 例如贝塞尔曲线 2次曲线等曲线
  • 解决java.net.SocketException: No buffer space available (maximum connections reach

    严重 Catalina stop java net SocketException No buffer space available maximum connections reached JVM Bindat java net Plai
  • 断网重启路由器就好_路由器间断性的无网络,重启就恢复正常,可能是这些原因导致的!...

    说到 互联网 这一个词 相信大家对它再熟悉不过了 早在互联网刚出来的时候 人们就被它那强大的 引力 给吸引过去 直到现在 互联网已成为人们可以加以利用的一种 道具 了 现如今的我们可以通过网络来了解到一些国内外最新的热点资讯 可以通过网络来
  • 局域网抓包分析工具_巧用Wireshark抓包工具,分析底层网络协议,帮助排除网络故障...

    地址解析协议 ARP Address Resolution Protocol 1 ARP头 2 数据包分析 长度 8 位 字节 MAC 地址 48 位 即 6 字节 IP 地址 32 位 即 4 字节 3 无偿的 ARP 当 IP 地址改变
  • 如何使用PT对电路进行功耗分析

    首先声明本文所讲的范围 在这篇文章中 是采用synopsys的设计流程 对数字电路进行功耗分析 生成功耗分析报告的流程 分析的对象是逻辑综合之后布局布线之前的功耗分析 以及布局布线之后的功耗分析 Synopsys做功耗分析使用到的工具是 P
  • cobra golang好用的CLI工具

    Cobra 每个好的开源项目都会有很多好用的开源库的诞生 之前学openstack的时候就对openstack的oslo系列工具组用的非常多 现在学习k8s后发现同样在go下也有很多类似的开源库 比如Cobra 就是一个用来创建命令行的 g
  • 【Qt】信号和槽对值传递参数和引用传递参数的总结

    在同一个线程中 当信号和槽都在同一个线程中时 值传递参数和引用传递参数有区别 值传递会复制对象 测试时 打印传递前后的地址不同 引用传递不会复制对象 测试时 打印传递前后的地址相同 不在同一个线程中 当信号和槽不在同一个线程中时 分两种情况
  • java生成电子发票_C#/Java 动态生成电子发票

    电子发票是电商时代的产物 PDF发票是最常见的电子发票之一 在这篇文章中 我将给大家分享一个免费的动态生成PDF电子发票的C 方案 并在文章末尾附上Java解决方案 典型的发票包含客户和供应商的名称和地址 发票编号 购买物品的描述 付款金额
  • 简单聊聊2021年Android开发的现状和思考,看看这篇文章吧!

    前言 职场的金三银四跳槽季又来了 不同的是今年比往年 冷 一些 形式更加严峻一些 大家多多少少可能都听到或看到一些信息 就是好多公司在优化裁员 作为求职者来说 面试是一道坎 很多人会恐惧面试 即使是工作很多年的老鸟 可能仍存在面试的焦虑 这
  • U盘常见问题

    1 U盘文件名乱码 一 U盘文件名显示为乱码 如下图 二 解决办法 打开命令提示符 管理员 2 U盘占有空间却不显示文件的解决方法 电脑插入U盘后 显示U盘的使用空间情况 但是打开U盘后却发现里面什么也没有 一片空白 这种情况 大多是因为文
  • 清览云题库(第四、五章)代码

    对应教材为谭浩强 C语言程序设计 清览云题库又给出了其四 五章的课外习题 目录 第四章 第4章小练习1 1 比大小 第4章小练习1 2 求平方根 第4章小练习1 3 函数求解 第4章小练习1 4 计算成绩分数所在等级 第4章小练习1 5 按
  • 讲正确很容易,讲现实就很难

    对不起 本文开启付费 老规矩 付费满200 会在知识星球免费发布 但丑话说在前面 如果因故被删帖 则不会发布在知识星球
  • c++ 空间直线与平面夹角_几何:平面几何、立体几何、解析几何

    本篇内容在知识地图中的位置 参考文本 模块三 几何学 一切源自公理和逻辑 20 几何学 为什么是数学中最古老的分支 21 公理体系 系统理论从何而来 22 非欧几何 相对论的数学基础是什么 23 解析几何 用代数方法解决更难的几何题 24
  • Obsidian Day Planner插件 甘特图不显示进度条(方框)的解决方案

    找到 obsidian plugins obsidian day planner文件夹 打开其中的main js 找到minuteInterval item next 将其中的 mm 都替换成 m 修改后代码如下 重启obsidian即可看
  • Electron详解(一):基本介绍

    文章目录 一 electron简介 二 发展历史 三 electron优缺点 四 electron和Qt的对比 五 使用electron开发的实际案例 六 electron 的原理 一 electron简介 Electron 官网 http