什么是electron?

 Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验

election的主要组成部分:

  • chromium 可以认为是一个具备最新功能的chrome浏览器,进行界面展示,可以使用es6,es7,浏览器支持的一些语法特性,同时可以利用html,css制定软件界面后,在electron的环境中将它加载到功能窗口中进行展示
  • node.js javascript运行时,文件操作等
  • native.api 提供统一的原生界面能力,与操作系统进行交互

Electron可以开发桌面应用,例如网易云,vscode都是依赖 Electron开发的

桌面应用:是运行在不同操作系统的一款软件,功能实现利用native api(本地api) 和操作系统进行交互,那么在操作系统的上层发生了一些什么行为呢、了解一下Electron 的 主进程和渲染进程

Electron 的 主进程和渲染进程

什么是主进程 main process?

  • 在 Electron 中,启动项目时运行的 main.js 脚本就是我们说的主进程
  • 主进程启动后,在主进程运行的脚本可以创建一个或者是多个BrowserWindow, 用window展示 GUI,这里展示的就是web 页面的形式了,相当于是在chrome上展示的html页面
  •  每个BrowserWindow可以看做是渲染进程,每个渲染进程是独立的,各自运行在自己的上下环境当中
  • app不同的窗口中也会有一些交互,election内部提供了 ipc 和 rpc 的通讯机制,例如 ipcmain和 ipcrender 就是election内部封装好的通讯模块,通过模块调用方法就可以实现不同窗口的交互
  • 主进程可以管理所有的web页面和web界面对应的渲染进程的
  • 一个 Electron 应用有且只有一个主进程
  • 创建窗口等所有系统事件都要在主进程中进行,只有主进程可以进行界面的api操作

举例:想象我们打开了一个app

当人机交互 点击新增歌曲时需要访问 操作系统本身的文件系统,这个时候需要主进程调用底层的api进行实现,但是点击行为发生在渲染进程,这个时候就需要将渲染进程接收到的指令信息传递给主进程,这个操作就可以使用ipc的通讯机制去实现,主进程接收到指令后可以调用nativeapi来打开操作系统的文件读写,用户可以选择一个或多个文件,主进程按照业务逻辑在想办法把数据传递给渲染进程,

什么是渲染进程 renderer process?

  • 由于 Electron 使用 Chromium 来展示页面,所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己 的进程,这样的进程我们称之为渲染进程。
  • 渲染进程中支持dom操作和nodeapi的调用操作,一个应用可以有多个渲染进程,各自运行在自己的上下环境当中
  • 渲染进程也可以通过主进程访问原生的api,但是需要先和主进程建立通信
  • 每创建一个 web 页面都会创建一个渲染进程 BrowserWindow。
  • 每个 web 页面都运行在它自己的渲染进程中。每个渲染进程是独立的, 它只关心它所运行的页面。
  • 当一个 BrowserWindow 实例被销毁后,相应的渲染进程也会被终止

总结 Electron 开发应用的运行机制:

启动主进程,创建窗口,加载我们需要的页面,开启渲染进程,渲染进程需要通信,就利用ipc完成 进程间通讯操作,最后在通过主进程调用原生api与操作系统进行互动,从而完成功能操作;

猜你喜欢

转载自blog.csdn.net/luoxiaonuan_hi/article/details/131222888