首页 /
正文
Electron 核心概念
Electron 主进程与渲染进程
主进程：启动项目时运行的 main.js 脚本就是我们说的主进程。主进程只有一个。
渲染进程：每个 Electron 的页面都在运行着自己的进程，这样的进程称之为渲染进程（基于Chromium的多进程结构）。
主进程事件生命周期
main process modules/app/event：https://www.electronjs.org/zh/docs/latest/api/app
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
height:600,
width:900
})
win.loadFile('./index.html')
}
// 所有窗口关闭触发
app.on('window-all-closed', () => {
console.log('window-all-closed')
// Mac系统关闭窗口时，不要直接退出，mac关闭窗口会在dock栏显示，点击会激活窗口
if (process.platform !== 'darwin') {
app.quit()
}
})
// 退出应用执行
app.on('quit', () => {
console.log('quit')
})
app.whenReady().then(() => {
createWindow()
// 在MacOS下，当全部窗口关闭，点击 dock 图标，窗口再次打开。
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})渲染进程如何使用 Node 模块
在渲染进程用node模块，报错：
1、通过 webPreferences/nodeIntegration
const win = new BrowserWindow({
width: 600,
height: 900,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
2、通过 webPreferences/preload 实现
https://www.electronjs.org/docs/latest/tutorial/sandbox
const win = new BrowserWindow({
width: 800,
height: 400,
webPreferences: {
// 在启动应用时在渲染进程里预加载 js
preload: path.join(__dirname, './preload.js')
}
})有node模块使用限制，比如不能访问fs模块
主进程与渲染进程通信
预加载preload.js
定义发送消息函数发送消息给主进程
const { contextBridge, ipcRenderer } = require('electron')
// 定义发送消息函数
const handleSend = async (data) => {
console.log('渲染进程发送: '+data);
let fallback = await ipcRenderer.invoke('send-event', data)
console.log('渲染进程收到: '+fallback);
}
// 暴露给html使用,这里运行完window会有handleSend函数
contextBridge.exposeInMainWorld('exposeVar', {
handleSend,
})main.js
const { ipcMain } = require('electron')
// 主进程监听消息并返回消息给发送者
ipcMain.handle('send-event',(event, data)=>{
// console.log(event,data);
console.log('主进程收到: '+data);
return '主进程收到后发送消息'
})index.html
页面显示
<body>
<button id="btn">send</button>
<script src="./script.js"></script>
</body>script.js
点击按钮发送
document.querySelector('#btn').onclick = (e)=>{
exposeVar.handleSend('我是渲染进程')
}
1
1
1
1
1
1
1
1
1
1