Electron 入门指北(二)

理解 Electron 的主进程和渲染进程

Electron 说的简单一点就是一个以 Chromium 为内核的web app,Electron 中用 Node.js 提供了网页(GUI 页面)调用系统级别 API 的方法.
现在就来看看 Electron 中主进程(Main Process)和渲染进程(renderer Process)也就是 GUI 页面之间的通信.

主进程 Main Process

主进程，通常是名为main.js 的文件，是每个 Electron 应用的入口文件。它控制着整个 App 的生命周期，从打开到关闭。 它也管理着系统原生元素比如菜单，菜单栏，Dock 栏，托盘等。 主进程负责创建 APP 的每个渲染进程。而且整个 Node API 都集成在里面。
每个 app 的主进程文件都定义在 package.json 中的 main 属性当中。这也是为什么 electron. 能够知道应该使用哪个文件来启动。
在Chromium中, 这个进程被称为 "浏览器进程"。它在Electron被重新命名, 以避免与渲染器进程混淆。

渲染进程是你的应用内的一个浏览器窗口。与主进程不同的是，它能够同时存在多个而且运行于不同的进程中。而且它们也能够被隐藏。

渲染进程 renderer Process

在标准的浏览器内，网页通常运行在一个沙盒环境中并且被禁止使用本地资源。 然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些低级别的交互。

---

看完这两段官方文档,再来看看一个 electron 项目的大概结构,可以看到 main.js和index.html和package.json

image

那根据这三个文件,我们来找一下一个 electron 项目是怎么启动起来的?
首先,在package.json中:

image

这里main标记这个项目主进程的入口文件. 再到main.js中看一下

image

可以看到main.js中有 app 的生命周期函数和 window 的创建函数.
到这里就一个 Electron 工程师如何打开的.

app: 控制整个 Electron 应用的生命周期;

BrowserWindow：创建和控制应用的窗口;

以上两个方法都是在主进程中的方法,Node的API也是在这一层来调用;

渲染进程的开发跟普通的前端开发没有什么区别,可以使用各种前端框架来开发,比如React, Vue, Angular等等.

Electron 入门个人觉得到这里也明白了,之后的跨平台和打包的方案等做完这个项目再写吧.