什么是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（图形用户界面（Graphical User Interface，简称 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与操作系统进行互动，从而完成功能操作；