Electron Js - 自定义菜单栏

Question

我正在使用 Electron 构建桌面应用程序（到目前为止仅支持 Mac）。 我希望能够使用 Electron Menu，但我不知道是否可以使用一些 HTML 和 JS 来完全定制。

到目前为止，我在渲染器的 React 应用程序中使用了

nav

栏，但我想知道是否有办法使用电子菜单来实现相同的目的。

作为参考，我想要类似 Slack 菜单栏的东西。

Answer 1

不，目前无法使用 Menu API 获得完全自定义的菜单栏。如果您想要像您给出的示例一样自定义的内容，您必须使用 HTML/CSS/JS 在渲染器中自行编码。

这里是文档，介绍可以在窗口上自定义的内容。

---

要隐藏本机标题栏和菜单，您可以使用

titleBarStyle

配置上的

BrowserWindow

选项：

const mainWindow = BrowserWindow({
  titleBarStyle: "hidden",
  ...
});

如果您根本不需要默认菜单，为了性能，还建议您在应用程序准备就绪之前完全删除它：

Menu.setApplicationMenu(null);

app.whenReady().then(() => {
  ...
});

但请注意，这样做也会删除菜单中可用的本机快捷方式，例如

Ctrl+Maj+I 打开开发工具或 Ctrl+Maj+R 重新加载。

最后，您将必须使用

IPC与主进程通信，以便重新创建本机功能，例如关闭窗口、最小化应用程序等...例如：

渲染器.js

const minimizeButton = document.getElementById("minimizeButton");

minimizeButton.addEventListener("click", () => {
  window.electronAPI.minimize();
});

预加载.js

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("electronAPI", {
  minimize: () => ipcRenderer.send("minimize")
});

main.js

ipcMain.on("minimize", () => {
  mainWindow.minimize();
});