electron简述

170 阅读3分钟

electron简介

Electron 是使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序的框架。换一个角度理解,其实是一个可以用 JavaScript、HTML 和 CSS 构建桌面应用程序的库,一个 JavaScript 运行环境。

Electron 是由 Github开发的开源框架

它允许开发者使用Web技术构建跨平台的桌面应用

image.png

  • Chromium : 为Electron提供了强大的UI能力,可以不考虑兼容性的情况下,利用强大的Web生态来开发界面

  • Node.js :让Electron有了底层的操作能力,比如文件的读写,甚至是集成C++等等操作,并可以使用大量开源的 npm 包来完成开发需求

  • Native API :Native API让Electron有了跨平台和桌面端的原生能力,比如说它有统一的原生界面,窗口、托盘这些

electron架构

image.png

Electron由主进程和渲染器进程所组成。每个进程在应用程序中扮演不同的角色,Electron包含不同的模块来帮助您构建应用程序。某些模块,例如从系统剪贴板读写的能力,在这两种类型的进程中都可用。其他的,比如访问操作系统接口的能力,仅限于主进程。

主进程

管理应用程序的生命周期,并创建渲染器流程。

主流程有几个重要的职责。它可以响应应用程序生命周期事件,例如启动、退出、准备退出、后台调用、前台跳转、等等。主过程也负责与本机操作系统接口通信。如果你想要显示对话框去打开或者保存文件,可以从主进程中执行。

渲染进程

​ 主进程可以使用Electron浏览器窗口模块创建和销毁渲染器进程,渲染器进程可以加载web页面来显示用户界面。每一个进程利用Chromium的多进程架构,并在自己的线程上运行,然后,这些页面可以加载其他JavaScript文件并在此进程中执行代码。与普通web页面不同,你可以在自己的渲染进程中,访问所有Node APIs,允许使用本机模块和较低级别的系统交互。

​ 每个渲染进程都是独立的,无法访问操作系统集成的接口。如果需要触发打开或保存文件对话框或访问任何其他操作系统集成。其对应的渲染进程必须与主进程进行通讯。

electron进程间通信

  1. 主进程向渲染进程通讯

    • 主进程使用 win.webContents.send 发送消息
    • 渲染进程使用 ipcRenderer.on 接收消息
  2. 渲染进程向主进程通信

    • 渲染进程使用 ipcRenderer.send 或者 ipcRenderer.invoke 发送消息
    • 主进程使用 ipcMain.on或者ipcMain.handle 接收消息
  3. 渲染进程向渲染进程通信

  • 3.1 通知事件

    • 通过主进程转发(Electron 5之前)
    • ipcRenderer.sendTo(Electron 5之后)
  • 3.2 数据共享

    • web技术(localStorage、sessionStorage、indexedDB、可嵌入型数据库等)
    • 使用remote(尽量少用,容易影响性能)

参考文章:juejin.cn/post/684490…

成功案例

Atom、VSCode、Slack等都是用Electron开发的