electron主进程与子进程之间的通信

最新推荐文章于 2024-07-18 16:19:37 发布

guojun@07

最新推荐文章于 2024-07-18 16:19:37 发布

阅读量433

点赞数 3

文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/Guojun19900715/article/details/138162495

版权

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", // MIT许可证协议
  "private": true, // 设置了“private”：true，那么npm将拒绝发布它。 这是防止私人存储库意外发布的一种方法。
  "scripts": {
    "start": "electron ./main.js" // 脚本执行命令 npm run start
  },
  "devDependencies": {
    "electron": "8.1.0" // electron 版本
  }
}

4. 在根目录下创建 main.js 入口文件

const { app, BrowserWindow, ipcMain } = require('electron');
// 创建主进程函数
const createWindow = () => {
  let win = new BrowserWindow({
    width: 800, // 窗口宽度
    height: 600, // 窗口高度
    webPreferences: {
      nodeIntegration: true // 开启nodejs         
    },
  });
  // 加载index.html文件
  win.loadURL('file://' + __dirname + '/index.html');
  // win.webContents.openDevTools();
  // 监听窗口关闭事件
  win.on('closed', function () {
    win = null;
  });
  // 监听子窗口child01发送的消息
  ipcMain.on('msg-child01', function (event, arg) {
    console.log('接收到子窗口01发送的消息: ', arg)
    // 收到消息后给子窗口child01回复消息
    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 // 开启nodejs         
        },
        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>