当前位置：首页 > news >正文

electron 主进程和渲染进程通信 ipcRenderer 和 mainWindow.webContents

news 2025/8/19 20:28:08

electron 开发时最麻烦就是electron版本和node版本的选择和正确安装
electron 用npm安装时太慢容易报错，建议用cnpm i 进行安装

注意最新版渲染进程使用node
nodeIntegration: true, // 渲染进程可用node
contextIsolation: false, // 这个值影响nodeIntegration是否生效electron  的主进程的创建
function createWindow () {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true, // 渲染进程可用nodecontextIsolation: false, // 这个值影响nodeIntegration是否生效preload: path.join(__dirname, 'preload.js')}})// and load the index.html of the app.mainWindow.loadFile(path.join(__dirname, 'index.html'))// Open the DevTools.mainWindow.webContents.openDevTools()// 渲染进程使用remote remote.enable(mainWindow.webContents)//3require("./ipcMain/menu")require("./ipcMain/rightMenu")// 主进程发送消息mainWindow.webContents.send("mainMag","发财发财")
}app.on('ready', createWindow);

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Hello World!</title><link rel="stylesheet" href="index.css" /></head><body><h1>💖 Hello World!</h1><p>Welcome to your Electron application.</p><h1>Hello World!</h1>We are using Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.<!-- You can also require other files to run in this process --><!-- <script src="./renderer.js"></script> --></body><script>// 引用node中的函数require('path')// 高版本，渲染线程打开新窗口方法，需要在主进程打开// const {BrowserWindow} = require("@electron/remote")// const win = new BrowserWindow({//         width:500,//         height:500,//     })// win.loadURL("https://www.baidu.com")const { ipcRenderer } = require("electron");window.addEventListener('contextmenu', (e) => {e.preventDefault()// 渲染进程发送消息ipcRenderer.send('show-context-menu')})// 渲染进程接受主进程消息ipcRenderer.on('context-menu-command', (e, command) => {// ...})ipcRenderer.on('show-context-menu-reply', (e, command) => {console.log("开心",command)})ipcRenderer.on('mainMag', (e, command) => {console.log(e)console.log("------------")console.log(command)})</script>
</html>