Electron 入门，主进程向渲染进程发送事件，渲染进程向主进程发送事件
刚入门 electon ，整 electon + vue 整了好几天也没整明白。
我的需求是使用 Electron 做一个跨平台的能编辑指定文件的工具，其实有没有 Vue 没什么区别，Vue 也是需要 build 之后才能被 electron 使用。
最终放弃了，改用 electron + html 的方式，直接了当。
一、什么是 Electron
electron 其实就是个壳子，一个可以展示网页内容的壳子，相当于一个独立的浏览器，而这个浏览器可以提供给你一些接口，去调用系统的资源。
一般在浏览器中网页是没有权限去调用系统资源的，本地文件都无法自主获取，只能通过用户操作喂给浏览器才行。
有了 electron 就自由了，可以调用 electron 提供的一些系统功能，所有 nodejs 中可以使用的功能都可以。具体可以看 electron 的 API
https://www.electronjs.org/docs
二、关于 主进程 和 渲染进程 的问题
electron 项目根所有的 npm 项目一样，入口都是 package.json 中的 main 字段指定的 js，比如你指定的是 main.js。
electron 有两个类别的进程，一个是主进程，另一个是渲染进程
主进程：
启动后一直存在的，相当于一个树的主干，所有的跟系统资源交互的操作都在这里进行。
渲染进程：
渲染进程是一个个的浏览器窗口，就是用于展示，如果需要跟系统交互，就需要用 icpRenderer 跟主进程进行数据交互。
三、electron 程序启动的过程
-
electron 启动 - 调用
main.js 文件，main.js 里面的内容就是主进程的内容，里面会有启动程序的代码 - 在
main.js 里面新建一个渲染进程，也就是说创建一个浏览器窗口，并把需要展示的首页index.html 指定给这个窗口 - 此时就可以展示一个窗口内容了
四、icpMain、icpRenderer 的发送和接收数据对应的方法
这里需要提前说明一下，发送和接收数据用到的是 icpMain 和 icpRenderer 两个对象，
-
icpRenderer 是用在渲染进程中的 -
icpMain 是用在主进程中的
这个很多教程都没有提及，但新手很需要这个信息。
icpMain 的发送和接收
// 发送
// icpMain 并没有发送事件的方法，需要在对应的窗口中进行发送操作
mainWindow.webContents.send('事件名', 事件附加数据)
// 接收
ipcMain.on('事件名', (event, data) => {
// event 是事件本身
// data 事件附加数据
})icpRenderer 的发送和接收
// 发送
icpRenderer.send('事件名', 事件附加数据)
// 接收
icpRenderer.on('事件名', (event, data) => {
// event 是事件本身
// data 事件附加数据
})
五、渲染进程 向 主进程 传递数据
渲染进程向主进程传递数据：
- 主进程监听一个事件名
- 渲染进程发送一个事件名并附带一些数据
1. 主进程需要做的是监听
通过在 main.js 中使用 icpMain.on() 方法来监听一个事件来获取渲染进程发来的数据，比如监听一个事件名 setNewData
const { ipcMain } = require('electron')
ipcMain.on('setNewData', (event, data) => {
// event 是事件本身
// data 是渲染进程发送过来的附加数据，发的时候加了这边就能获取到，也可以不加，只响应事件
})2. 渲染进程需要做的是发送
通过 icpRenderer.send() 发送事件和对应的数据
const { ipcRenderer } = require('electron')
ipcRenderer.send('setNewData', data)
六、主进程 向 渲染进程 传递数据
1. 渲染进程需要做的是监听
通过 icpRenderer.on() 发送事件和对应的数据
const { ipcRenderer } = require('electron')
icpRenderer.on('setNewData', (event, data) => {
// event 是事件本身
// data 事件附加数据
})2. 主进程需要做的是发送
主进程发送数据是通过对应窗口的方法来发送，icpMain 本身没有 send() 方法
const { icpMain } = require('electron')
let data = {code: 'nntt', word: '五笔'}
mainWindow.webContents.send('setNewData',data)
// mainwindow 是前面已经定义好的窗口实例七、 读取一个文件内容
比如说需要在一个页面中手动触发获取一个文件的内容，从开始到结束，它的过程是这样的：
-
electron 启动 - 调用
main.js 文件，在里面新建一个渲染进程，把需要展示的首页index.html 指定给这个窗口 - 同时，主进程中使用
icpMain.on() 方法监听一个事件，比如说readFile，在监听到这个事件后作出读取系统中指定文件的操作。并且在文件读取成功后，将文件通过事件fileContent附加文件内容发送给渲染进程 - 渲染进程在需要读取文件操作的 dom 处触发
readFile 事件，让主进程去响应这个事件并读取文件。然后渲染进程通过监听fileContent 这个事件才获取由主进程发来的文件内容数据，再进程相应的操作就可以了。
