1. 打开终端切换到指定文件夹执行 yarn init 命令初始化完成后会出现一个 package.json 文件
2. 安装 electron, node版本切换到14.21.1, 执行 yarn add electron@8.1.0 --dev
3. 修改package.json 文件配置如下
{
"name": "electron01",
"version": "1.0.0",
"description": "electron demo",
"main": "main.js",
"repository": "初始化项目时的远程仓库地址",
"author": "***",
"license": "MIT",
"private": true,
"scripts": {
"start": "electron ./main.js"
},
"devDependencies": {
"electron": "8.1.0"
}
}
4. 在根目录下创建 main.js 入口文件
const { app, BrowserWindow, ipcMain } = require('electron');
const createWindow = () => {
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
},
});
win.loadURL('file://' + __dirname + '/index.html');
win.on('closed', function () {
win = null;
});
ipcMain.on('msg-child01', function (event, arg) {
console.log('接收到子窗口01发送的消息: ', arg)
event.sender.send('reply-msg-child01', '我是父窗口,我接收到了子窗口01的消息')
})
return win;
}
app.on('ready', function () {
createWindow();
});
app.on('window-all-closed', function () {
app.quit();
});
5. 在根目录下创建 index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>窗口标题</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 14px;
}
#app {
display: flex;
padding: 20px;
}
#sendMsgToChild,
#createBrowsersWindow,
#closeDevToolsBtn,
#openDevToolsBtn {
padding: 8px 20px;
background-color: #409EFF;
border-radius: 5px;
color: #fff;
}
#closeDevToolsBtn {
margin-left: 20px;
background-color: #EBEEF5;
color: #333333;
}
#createBrowsersWindow {
margin-left: 20px;
}
#sendMsgToChild {
margin-left: 20px;
}
</style>
</head>
<body>
<div id="app">
<button id="openDevToolsBtn">打开开发者工具</button>
<button id="closeDevToolsBtn">关闭开调试工具</button>
<button id="createBrowsersWindow">创建新的窗口</button>
<button id="sendMsgToChild">给子进程发送消息</button>
</div>
<script>
let { remote, ipcMain } = require('electron')
document.getElementById('openDevToolsBtn').addEventListener('click', function () {
remote.getCurrentWindow().webContents.openDevTools()
console.dir(remote.getCurrentWindow());
})
document.getElementById('closeDevToolsBtn').addEventListener('click', function () {
remote.getCurrentWindow().webContents.closeDevTools()
})
document.getElementById('createBrowsersWindow').addEventListener('click', function () {
let win1 = new remote.BrowserWindow({
width: 600,
height: 400,
webPreferences: {
nodeIntegration: true
},
parent: remote.getCurrentWindow()
});
win1.loadURL('file://' + __dirname + '/child01.html')
document.getElementById('sendMsgToChild').addEventListener('click', function () {
win1.webContents.send('message', 'Hello from parent window')
})
})
</script>
</body>
</html>
6. 在根目录下创建子进程 child01.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子窗口01</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.child01-container {
display: flex;
padding: 20px;
}
#sendMainMsgBtn {
padding: 8px 20px;
background-color: #409EFF;
border-radius: 5px;
color: #fff;
}
</style>
</head>
<body>
<div class="child01-container">
<button id="sendMainMsgBtn">向主进程发送消息</button>
</div>
<script>
let { ipcRenderer } = require('electron')
document.getElementById('sendMainMsgBtn').addEventListener('click', () => {
ipcRenderer.send('msg-child01', { msg: '子窗口01向主进程发送的消息' })
})
ipcRenderer.on('reply-msg-child01', (event, arg) => {
console.log('子窗口01收到主进程回复的消息:', arg)
})
ipcRenderer.on('message', (event, arg) => {
console.log('子窗口01收到主进程主动发送的消息:', arg)
})
</script>
</body>
</html>
7. 打开窗口控制台命令 command + option + i ; 项目运行命令: npm run start ; 以上是完成后做的笔记, 里边的通信代码可以参考, 项目创建过程忽略很多, 需要自己搭建环境