Electron 主线程和渲染线程通信

前端小小白zyw

已于 2024-01-31 09:28:02 修改

阅读量1.9k

点赞数 8

分类专栏： Javascript Node.js Electron 文章标签： electron

于 2024-01-23 21:39:42 首次发布

本文链接：https://blog.youkuaiyun.com/Vue2018/article/details/135791213

版权

本文介绍了如何在Electron应用中通过两种方式实现主进程与渲染进程的通信，一是使用Electron的IPC机制在菜单操作中传递文件夹路径，二是通过HTTP服务以请求方式通知。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在做Electron项目时，会遇到主进程与渲染进程通信的场景，那么具体怎么实现呢，我们今天用一个demo来表现下通信过程，核心业务为：项目过多，用户添加项目目标文件夹到列表，进而对项目进行统一管理，我们这里提供2种方式

效果图：
在这里插入图片描述

方式一：

main.js主进程，创建一个顶部菜单，打开一个文件夹，进而通知渲染进程

const {
    app, BrowserWindow, ipcMain, Menu, dialog, protocol } = require('electron')
let mainWindow // 保存当前的主窗口回调，用于发布消息

// 创建菜单列表，添加自定义菜单，并且快捷键为ctrl + w
let menuTemplate = [
  // 一级菜单
  {
   
    label: "文件",
    role: 'fileMenu',
  },
  {
   
    label: "视图",
    role: 'viewMenu'
  },
  {
   
    label: '窗口',
    role: 'windowMenu'
  },
  {
   
    label: '添加项目',
    click: () => {
   
      handle_click()
    },
    accelerator: 'ctrl + w'
  }
];

// 用于构建MenuItem
let menuBuilder = Menu.buildFromTemplate(menuTemplate);

// setApplicationMenu 在macOS上将 menu设置成应用内菜单 在windows和Linux上，menu 将会被设置成窗口顶部菜单
Menu.setApplicationMenu(menuBuilder);

function createWindow() {