上图:
index.js
const {app, BrowserWindow, ipcMain } = require('electron'); const path = require('path'); const fs = require('fs') app.on("ready",() => { const mainWindow = new BrowserWindow({ width: 800, height: 600, resizable: true, frame: true, show: true, backgroundColor: 'pink', webPreferences: { nodeIntegration: true, // 开启node contextIsolation: false, // 开启remote enableRemoteModule:true } }); mainWindow.loadFile("index.html") //打开控制面板 mainWindow.webContents.openDevTools(); ipcMain.on('asynchronous-message', function(event, arg) { // arg是从渲染进程返回来的数据 fs.writeFile(path.join(__dirname, "data.json"),JSON.stringify(arg), "utf8",(err)=>{ if(err){ console.log("写入失败") }else { console.log("写入成功") } }) }); }); app.on("window-all-closed",() => { if(process.platform !== "darwin") { app.quit() } })
renderer.js
// 渲染进程 const ipcRenderer = require("electron").ipcRenderer; // 这里的会传递回给主进程,这里的第一个参数需要对应着主进程里on注册事件的名字一致 ipcRenderer.send("asynchronous-message", "传递回去ping");
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn">同步发送消息</button> </body> <script type="text/javascript" src="./renderer.js"></script> </html>