主进程与渲染进程
方式一 ipc
main.js
const {app, BrowserWindow, ipcMain} = require('electron')
app.on('ready',()=>{
// require('devtron').install()
let mainWindow = new BrowserWindow({
width: 1600,
height: 1200,
webPreferences:{
// 注入node模块
nodeIntegration: true,
contextIsolation: false
}
})
mainWindow.loadFile('index.html')
mainWindow.webContents.openDevTools()
ipcMain.on('msg',(event,arg)=>{
// console.log(event)
console.log(arg)
event.reply('msgMain','hello from main process')
})
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello Electron!</h1>
<br>
<button id="send">send to main</button>
<script src="renderer.js"></script>
</body>
</html>
renderer.js
const { ipcRenderer} = require('electron')
window.addEventListener('DOMContentLoaded',()=>{
document.getElementById('send').addEventListener('click',()=>{
ipcRenderer.send('msg','hello from renderer')
})
ipcRenderer.on('msgMain',(event,arg)=>{
// console.log(event)
console.log(arg)
})
})
效果
点击界面的按钮
命令行控制台
开发者工具控制台
方式二 remote
main.js
const {app, BrowserWindow, ipcMain} = require('electron')
app.on('ready',()=>{
// require('devtron').install()
let mainWindow = new BrowserWindow({
width: 1600,
height: 1200,
webPreferences:{
// 注入node模块
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
})
mainWindow.loadFile('index.html')
mainWindow.webContents.openDevTools()
ipcMain.on('msg',(event,arg)=>{
// console.log(event)
console.log(arg)
event.reply('msgMain','hello from main process')
})
})
renderer.js
const {ipcRenderer} = require('electron')
const {BrowserWindow} = require('electron').remote
window.addEventListener('DOMContentLoaded', () => {
document.getElementById('send').addEventListener('click', () => {
ipcRenderer.send('msg', 'hello from renderer')
let subWindow = new BrowserWindow({
width: 400,
height: 300,
webPreferences: {
// 注入node模块
nodeIntegration: true
},
// 模态
modal: true
})
subWindow.loadFile('two.html')
})
ipcRenderer.on('msgMain', (event, arg) => {
// console.log(event)
console.log(arg)
})
})