Main进程详解从入门到精通带你搞定核心难题

又踩坑了，Main进程的窗口控制问题

最近在用Electron开发一个桌面应用，结果在处理主窗口的一些操作时，遇到了一些头疼的问题。主要是关于窗口的最小化、最大化和关闭按钮的控制。

折腾了半天发现，原来是个权限问题

一开始我以为是代码逻辑的问题，结果检查了好几遍都没发现问题。后来试了下发现，原来是权限配置的问题。在Electron中，主窗口的控制按钮（最小化、最大化、关闭）默认是不可见的，需要在创建窗口时显式设置。

三种主流方案对比，我选了最简单的

在网上查了一圈，主要有三种方案：

• 在创建窗口时直接设置frame: false，然后自定义按钮实现功能。
• 在创建窗口时设置titleBarStyle: 'hidden'，隐藏标题栏但保留默认的控制按钮。
• 在创建窗口时不作任何特殊设置，使用BrowserWindow的API来控制按钮的可见性。

我选择了第三种方案，因为我觉得它既简单又灵活。直接上代码吧。

核心代码就这几行

首先，在主进程中创建窗口时，确保没有禁用控制按钮：

const { app, BrowserWindow } = require('electron');

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    }
  });

  mainWindow.loadFile('index.html');
}

app.on('ready', createWindow);

然后，在渲染进程中，通过remote模块来控制窗口的按钮显示状态。这里要注意，remote模块已经在Electron 12及以上版本中废弃了，建议使用contextBridge来实现IPC通信。

// 在渲染进程中
const { remote } = require('electron');

document.getElementById('minimize-btn').addEventListener('click', () => {
  const win = remote.getCurrentWindow();
  win.minimize();
});

document.getElementById('maximize-restore-btn').addEventListener('click', () => {
  const win = remote.getCurrentWindow();
  if (win.isMaximized()) {
    win.unmaximize();
  } else {
    win.maximize();
  }
});

document.getElementById('close-btn').addEventListener('click', () => {
  const win = remote.getCurrentWindow();
  win.close();
});

如果你还在使用Electron 12及以上版本，可以这样改：

// 在主进程中
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('windowControls', {
  minimize: () => ipcRenderer.send('window:minimize'),
  maximize: () => ipcRenderer.send('window:maximize'),
  close: () => ipcRenderer.send('window:close')
});

// 在渲染进程中
document.getElementById('minimize-btn').addEventListener('click', () => {
  window.windowControls.minimize();
});

document.getElementById('maximize-restore-btn').addEventListener('click', () => {
  window.windowControls.maximize();
});

document.getElementById('close-btn').addEventListener('click', () => {
  window.windowControls.close();
});

踩坑提醒：这三点一定注意

在实际开发中，有几个坑需要注意：

1. 权限问题：确保你有权限控制窗口的操作，不要像我一样一开始就忽略了这一点。
2. 版本兼容性：如果你使用的是Electron 12及以上版本，一定要注意remote模块的废弃，及时更新到contextBridge。
3. 性能优化：频繁的IPC通信可能会影响性能，尽量减少不必要的通信。

以上是我个人对这个Main进程窗口控制的完整讲解，有更优的实现方式欢迎评论区交流。希望这篇博客能对你有所帮助！