Electron 入门，主进程向渲染进程发送事件，渲染进程向主进程发送事件

Electron 入门，主进程向渲染进程发送事件，渲染进程向主进程发送事件

相关教程： Electron教程（二）启动过程：主进程，渲染进程是什么

刚入门 electon ，整 electon + vue 整了好几天也没整明白。
我的需求是使用 Electron 做一个跨平台的能编辑指定文件的工具，其实有没有 Vue 没什么区别，Vue 也是需要 build 之后才能被 electron 使用。
最终放弃了，改用 electron + vue html 的方式，直接了当。

一、什么是 Electron

electron 其实就是个壳子，一个可以展示网页内容的壳子，相当于一个独立的浏览器，而这个浏览器可以提供给你一些接口，去调用系统的资源。
一般在浏览器中网页是没有权限去调用系统资源的，本地文件都无法自主获取，只能通过用户操作喂给浏览器才行。
有了 electron 就自由了，可以调用 electron 提供的一些系统功能，所有 nodejs 中可以使用的功能都可以。具体可以看 electron 的 API

https://www.electronjs.org/docs

二、关于 主进程 和 渲染进程 的问题

electron 项目跟所有的 npm 项目一样，入口都是 package.json 中的 main 字段指定的 js，比如一般项目默认都是 main.js。

electron 有两个类别的进程，一个是主进程，另一个是渲染进程

主进程：
启动后一直存在的，相当于一个树的主干，所有的跟系统资源交互的操作都在这里进行。是肉眼不可见的，但它一直在那里。

渲染进程：
渲染进程是一个个的浏览器窗口，就是用于展示，如果需要跟系统交互，就需要用 ipcRenderer 跟主进程进行数据交互。 electron 启动后的第一个窗口也是一个渲染进程。

三、electron 程序启动的过程

1. electron 启动
2. 调用 main.js 文件，main.js 里面的内容就是主进程的内容，里面会有启动程序的代码
3. 在 main.js 里面新建一个渲染进程，也就是说创建一个浏览器窗口，并把需要展示的首页 index.html 指定给这个窗口
4. 此时就可以展示一个窗口内容了

四、ipcMain、ipcRenderer 的发送和接收数据对应的方法

这里需要提前说明一下，发送和接收数据用到的是 ipcMain 和 ipcRenderer 两个对象，

• ipcRenderer 是用在渲染进程中的
• ipcMain 是用在主进程中的

这个很多教程都没有提及，但新手很需要这个信息。

ipcMain 的发送和接收

// 发送
// ipcMain 并没有发送事件的方法，需要在对应的窗口中进行发送操作
// 比如使用你创建的第一个窗口 mainWindow
mainWindow.webContents.send('事件名', 事件附加数据)

// 接收
ipcMain.on('事件名', (event, data) => {
    // event 是事件本身
    // data 事件附加数据
})

ipcRenderer 的发送和接收

// 发送
ipcRenderer.send('事件名', 事件附加数据)

// 接收
ipcRenderer.on('事件名', (event, data) => {
    // event 是事件本身
    // data 事件附加数据
})

五、渲染进程 向 主进程 传递数据

渲染进程向主进程传递数据：

1. 主进程监听一个事件名
2. 渲染进程发送一个同名的事件名并附带一些数据

1. 主进程需要做的是监听

通过在 main.js 中使用 ipcMain.on() 方法来监听一个事件来获取渲染进程发来的数据，比如监听一个事件名 setNewData

const { ipcMain } = require('electron')

ipcMain.on('setNewData', (event, data) => {
    // event 是事件本身
    // data 是渲染进程发送过来的附加数据，发的时候加了这边就能获取到，也可以不加，只响应事件
})

2. 渲染进程需要做的是发送

通过 ipcRenderer.send() 发送事件和对应的数据

const { ipcRenderer } = require('electron')

ipcRenderer.send('setNewData', data)

六、主进程 向 渲染进程 传递数据

1. 渲染进程需要做的是监听

通过 ipcRenderer.on() 来监听对应事件和对应的数据

const { ipcRenderer } = require('electron')

ipRenderer.on('setNewData', (event, data) => {
    // event 是事件本身
    // data 事件附加数据
})

2. 主进程需要做的是发送

主进程发送数据是通过对应窗口的方法来发送的，ipcMain 本身没有 send() 方法

const { ipcMain } = require('electron')

let data = {code: 'nntt', word: '五笔'}
mainWindow.webContents.send('setNewData',data)
// mainwindow 是前面已经定义好的窗口实例

七、 读取一个文件内容

比如说现在需要在一个页面中手动触发获取一个文件的内容，从开始到结束，它的过程是这样的：

1. electron 启动。
2. 调用 main.js 文件，在里面新建一个渲染进程也就是一个网页窗口，把需要展示的首页 index.html 指定给这个窗口。
3. 同时，主进程中使用 ipcMain.on() 方法监听一个事件，比如说事件名为 readFile，ipcMain.on('readFile', ()=>{})，在监听到这个 readFile事件后，主进程会作出读取系统中指定文件的操作。并且在主进程文件读取成功后，将文件内容通过事件 showFileContent 附加文件内容发送给渲染进程： mainWindow.send('showFileContent', fileContent)
4. 渲染进程在需要读取文件操作的 dom 处触发 readFile 事件，对应着第3步让主进程去响应这个readFile事件并读取文件。然后渲染进程通过监听 showFileContent 这个事件，ipcRenderer.on('showFileContent', (event, fileContent)=>{}) 来获取由主进程发来的文件内容数据，再进行相应的操作就可以了。

如果还是没有特别明白，可以看 github 上的例子：（直接点击对应条目后面的 link 即可到对应代码位置）

1. 主进程监听 loadDictFile 事件 link
2. 渲染窗口发起 loadDictFile 请求文件内容的事件 link
3. 主进程读取文件成功后，向渲染进程发送showFileContent 事件并附带文件内容若干 link
4. 渲染进程监听 showFileContent 事件，并获取到主进程发来的文件内容。自此渲染进程就成功通过主进程获取到了需要的文件内容 link