上圖：
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>