【Electron 快速入门-4】开发 Electron 与 开发前端的三大差异

• 开发环境差异

  • Electron 渲染进程环境 = 浏览器环境 + Node 环境！

• 开发内容差异

  • 前端页面

• 窗口管理、窗口间通信（web 没法 tab 间通信，但是 electron 窗口可以）

• 应用本身：菜单栏（应用菜单、图标等）、应用生命周期（启动、关闭）

• 应用工程化（编译、打包、升级）

• 多进程开发

  • 进程通信

环境差异

首先，从 Web 代码运行环境而言：

• 在「浏览器里」，我们平常开发的前端，运行在**「浏览器的一个 tab 里」**。

• 在「Electron」中，开发的前端运行在**「桌面应用的一个窗口里」**。

总结下来，就是咱们前端运行的环境有差异 。一个是在「浏览器 tab」里，一个在 「electron 应用窗口里」。

浏览器环境 + Node 环境！ = Electron 窗口里的前端运行环境

最主要的环境差异就是在 「Electron 窗口里」存在 node 环境可以使用，而浏览器则没有，这也是我们跟系统打交道最主要的能力。

我们其实也知道如下一件事情：

• 浏览器的每一个 tab 加载的页面都是独立运行在一个进程里的

那对比下来，是不是：

• electron 的每一个窗口加载的页面也是运行在一个独立的进程里

在 Electron 里，咱们给运行前端页面的进程取了个名字，叫：渲染进程。

因此，上面的公式可以换一种表达：

• Electron 渲染进程环境 = 浏览器环境 + Node 环境！

内容差异

开发 Web 时，我们经常有这样的场景：

• 在 web 里，我们有时会打开一个新的 tab，加载一个新路由。

这时候，我们把这种场景叫做：多入口。

同样，在开发 Electron 中，有如下场景：

• 打开一个新窗口，加载一个新路由。

这时候，我们会把这种场景叫做：多窗口。

在这时候，我们没发现差异，但是发现了共同点，其实无论是 tab 还是窗口里，从咱们前端的角度来说是：多入口。打开 tab，咱们只要 window.open 就完事了；打开 electron 窗口，咱们也可以这么干。

但是我们在这里就发现了个事：

• 刚才说到 electron 窗口的 node 环境是可以开关的，我 如果用 window.open 打开窗口，如何去控制开关呢？

• 浏览器的 tab 打开咱不用管啥，但是我们打开一个桌面窗口，可能就想设置他的宽高、位置等样式，咋搞呢？

所以，在 web 里面，咱们操心前端就完事了，但是在 electron 里貌似还得操心，窗口打开的一些配置。

• 绿色部分表示咱们在做对应开发的时候需要去开发的，需要操心的

• 灰色表示不归咱管，不需要搞的。

归纳一下，就是在 Electron 中，我们需要开发：

• 前端页面本身

• 窗口管理、窗口通信

• 应用相关：菜单栏、生命周期（打开和关闭应用等）

• 工程化（编译、打包、升级）

站在前端的角度来说，开发 electron 就是：

• 咱们不单单要开发 web 页面，还要开发浏览器的 tab, 对 tab 做管理，开发浏览器这个应用本身。

多进程开发

下面，咱们介绍的不同点可能会稍微深入一点点。 首先，咱们都知道：

• 在打开应用的时候，在系统里肯定新开了一个进程来运行这个应用。

打开浏览器，系统里就会多一个浏览器的进程。同样的道理，打开 Electron 桌面应用肯定也是会开启一个进程的。

之前说过，打开一个窗口加载页面的时候会开启一个进程，那就有点晕了，啥情况呢？ 其实流程是这样的：

• 打开 Electron 应用，首先开启一个应用的进程

• 应用打开了一个窗口，加载了一个页面，则会开启另外一个进程（渲染进程）去运行页面内容。

前面，咱们给加载页面的进程取的名字叫：渲染进程。

现在，运行应用的进程呢，在 Electron 里也有个名字：主进程。

运行在窗口里的渲染进程， 有对应的运行环境：

• Electron 渲染进程环境 = 浏览器环境 + Node 环境！

那主进程里的环境是啥样的呢？也是一句话：

• Electron 主进程环境 = 系统原生api + Node 环境！

到这里，说完主进程、渲染进程，我们对于 electron 这个“运行环境”就有了彻底的了解了，知道它包含了哪些环境，是怎么个组成: 【Electron 环境】

【Electron 环境细节组成】

• 主进程：Main Process

• 渲染进程: Renderer Process

基于上面对「主进程」的认知，以及我们在开发 electron 的开发内容来看，我们不单单要开发前端页面（渲染进程），还要考虑应用的一些事：窗口管理、菜单、应用升级等（主进程），当然必不可少的就是彼此之间的协作，比如：我想在页面上（渲染进程负责）打开一个新的窗口（主进程负责），那不就是两个进程之间的协作，那不就得做「进程通信」。

• 我们时常会有窗口和应用主进程之间通信，让他去做一些跟操作系统打交道的事情，比如：打开窗口。

• 我们时常也会有窗口和窗口之间的通信，一个窗口想让通知另一窗口一些事情或者是让他干一些事情给我返回结果，比如：开一个隐藏窗口去跑一些繁重的任务，并通知另一个窗口执行结果。

这时候，咱们就陷入了多进程的开发，准确来说，咱们做的事情就是：多进程开发之在进程间做消息通信。