一、electron 进程
electron 是一个使用js、html和css构建桌面应用程序的框架,主进程是一个拥有完全操作系统访问权限的node环境,除了electron 模组之外,也可以使用node内置模块,处于安全原因,渲染进程默认是跑在网页页面上的,为了将electron的不同类型的进程桥接在一起,需要使用预加载的脚本
1.1 预加载的作用
预加载脚本包含在浏览器窗口加载网页之前运行的代码,其可以访问dom和node环境,由于主进程金额渲染进程有着完全不同的分工,electron 应用通常使用预加载脚本来设置进程建通讯接口以在两种进程之间传输信息
1.2 进程通信
electron 中,进程使用ipcMain和ipcRenderer模块
1.2.1 渲染进程到主进程发送异步消息
// 渲染进程脚本
const { ipcRenderer } = require('electron')
dom.addEventListener('click', () => {
ipcRenderer.send('msg1', '这是一条来自于异步的消息')
})
// 监听消息
ipcRenderer.on('msg1Re', (ev, data) => {
console.info(data)
})
// 主进程脚本
const { ipcMain } = require('electron')
ipcMain.on('msg1', (ev, data) => {
console.info(data)
// 发送消息给渲染进程
ev.sender.send('msg1Re', '这是一条来自主进程的反馈消息')
})
1.2.2 渲染进程到主进程发送同步消息
// 渲染进程脚本
const { ipcRenderer } = require('electron')
btns[1].addEventListener('click', () => {
const result = ipcRenderer.sendSync('msg2', '这是一条来自于同步的消息')
console.info(result)
})
// 主进程脚本
const { ipcMain } = require('electron')
ipcMain.on('msg2', (ev, data) => {
console.info(data)
// 反馈消息
ev.returnValue = '这是一条来自主进程的同步反馈消息'
})
1.2.3 主进程到渲染进程
// 主线程脚本
BrowserWindow.getFocusedWindow().webContents.send(
'mtp',
'主进程发送消息给渲染进程'
)
// 渲染进程脚本
ipcRenderer.on('mtp', (ev, data) => {
console.info(data)
})
1.2.4 渲染进程通信
渲染进程直接可使用react 或vue 状态管理器来通信