如何使用电子在 mac 的菜单栏中添加自定义菜单？答案

【问题标题】：How to add custom menu in menubar in mac with electron?如何使用电子在 mac 的菜单栏中添加自定义菜单？
【发布时间】：2016-10-13 13:00:44
【问题描述】：

我想用电子（nodejs）在mac的菜单栏中添加自定义菜单
例如。我们有

我想在Electron 之后添加filter menu。

【问题讨论】：

标签： node.js macos electron

【解决方案1】：

API docs here 中有关于构建本机自定义应用程序菜单的精彩文档。有很多选项和功能以及平台差异。

例如，在您的主流程代码中，您可以执行以下操作：

const { app, BrowserWindow, Menu } = require('electron');
const path = require('path');
let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow();
  mainWindow.loadURL(path.join('file://', __dirname, 'index.html'));
  setMainMenu();
});

function setMainMenu() {
  const template = [
    {
      label: 'Filter',
      submenu: [
        {
          label: 'Hello',
          accelerator: 'Shift+CmdOrCtrl+H',
          click() {
              console.log('Oh, hi there!')
          }
        }
      ]
    }
  ];
  Menu.setApplicationMenu(Menu.buildFromTemplate(template));
}

这将创建一个带有“过滤器”标签的应用程序级菜单，打开时将显示一个标签为“Hello”的菜单项。单击它会登录到控制台。

请注意，当您使用electron-prebuilt 时，它总是在左上角显示“电子”。当您将您的应用程序编译为独立应用程序（不通过电子预构建运行）时，它将在那里有您的应用程序名称。

正如@neonhomer 指出的，这个API 必须在app 模块的ready 事件之后调用。

我还应该补充一点，在开发中使用 Electron 时，默认的 Electron 应用程序将为您提供默认菜单（请参阅https://github.com/electron/electron/blob/d26e4a4abf9dfc277974c6c9678a24a5f9e4d104/default_app/main.js#L48）。当您打包您的应用程序时，它不会出现。

【讨论】：

到目前为止，这个示例在 Yosemite 上的 Mac.Electron 1.2 上对我不起作用。
它不起作用，您在@neonhomer 回答中显示提请注意：“此API 必须在app 模块的就绪事件之后调用”
为了确保它在 Mac 和 Windows 中都能正常工作，请将以下内容添加到添加 template 菜单的函数范围中：``` if(process.platform == 'darwin' ){ 模板.unshift({}); } ```
我只想在默认菜单中添加一个菜单项...有什么方法可以做到这一点，而无需用我从您提供的链接中复制的相同菜单完全替换它？

【解决方案2】：

API 文档中有一个小注释： http://electron.atom.io/docs/api/menu/#menusetapplicationmenumenu

注意：该API必须在app模块的ready事件之后调用。

有趣的是，它可以在 Windows 中直接调用。

这是一个简化的示例：

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

const menuTemplate = [...]
const menu = Menu.buildFromTemplate(menuTemplate)

let win

function createWindow() {
    win = new BrowserWindow({ width: 800, height: 600, })

    win.loadURL(`file://${__dirname}/index.html`)

    win.on('closed', () => {
        win = null
    })
}

app.on('ready', () => {
    Menu.setApplicationMenu(menu)
    createWindow()
})

app.on('window-all-closed', () => {
    app.quit();
})

app.on('activate', () => {
    if (win === null) {
        createWindow()
    }
})

【讨论】：

另外有趣的是，如果 MenuItem 是 visible: false，它在 Windows 中仍可用作键盘快捷键，但在 macOS 上则不行。

【解决方案3】：

2019 更新：可以使用这个组件： https://www.npmjs.com/package/custom-electron-titlebar

【讨论】：