electron监听网页_Electron-vue，Main/Renderer进程的认识，自定义菜单等

Main进程和Renderer进程的基本认识

可以看到Main进程管理的是这个app窗口(BrowserWindow)，而Renderer进程负责的就是我们熟悉的页面UI渲染。不过实际上，它们远远不仅如此。下面一张图能够把它们所支持、管理的electron或者原生的模块大致列出来：

图中列出来的大部分模块都是我们会在开发过程中用到的。

它们有各自的模块，也有共有的模块比如clipboard等。还有一部分是Main进程里的模块，不过可以通过remote模块，让renderer进程也能使用。比如Menu比如

了解一下哪些模块在哪些进程里，哪些模块可以通过remote模块让renderer进程也能使用是有必要的，这样我们后续开发的时候才能正确的使用。

上面的模块可能有些从名字里并不能看出作用是啥，没关系，后续的内容会慢慢涉及。

Main进程开发

上面说到了Main进程一个显著的作用就是创建app的窗口。我们来看看这个是怎么实现的。

暂且先不管渲染进程里的页面长什么样，在app准备好的时候打开一个窗口只需要调用一个创建BrowserWindow的方法即可。

main进程里的开发有点当年写jQuery的样子，比较多的是事件驱动型的写法。

app

首先需要注意的是app的模块。这个模块是electron应用的骨架。它掌管着整个应用的生命周期钩子，以及很多其他事件钩子。

app的常用生命周期钩子如下：

will-finish-launching 在应用完成基本启动进程之后触发

ready 当electron完成初始化后触发

window-all-closed 所有窗口都关闭的时候触发，在windows和linux里，所有窗口都退出的时候通常是应用退出的时候

before-quit 退出应用之前的时候触发

will-quit 即将退出应用的时候触发

quit 应用退出的时候触发

而我们通常会在ready的时候执行创建应用窗口、创建应用菜单、创建应用快捷键等初始化操作。而在will-quit或者quit的时候执行一些清空操作，比如解绑应用快捷键。

特别的，在非macOS的系统下，通常一个应用的所有窗口都退出的时候，也是这个应用退出之时。所以可以配合window-all-closed这个钩子来实现：

除了上面说的生命周期钩子之外，还有一些常用的事件钩子：

active(仅macOS)当应用处于激活状态时

browser-window-created 当一个BrowserWindow被创建的时候

browser-window-focus 当一个BrowserWindow处于激活状态的时候

这些钩子需要配合一些具体场景来做出具体的操作。比如当一个BrowserWindow处于激活状态的时候修改窗口的title值。

当然，app这个模块除了上述的一些事件钩子之外，还有一些很常用的方法：

app.quit() 用于退出应用

app.getPath(name) 用于获取一些系统目录，对于存放应用的配置文件等很有用

app.focus() 用于激活应用，不同系统激活逻辑不一样

这些事件和方法都是怎么知道的呢？当然是官方文档了。不过并不需要一开始就通读一遍官方的api文档。官方的api文档更多的作用是用来查阅，当你要开发到某个功能的时候再去查它能否有对应的api、怎么使用。

BrowserWindow

BrowserWindow模块用于创建最常见的应用窗口。对于不同系统，创建的窗口的默认样式也不太一样。下面来看看macOS和win