如何在带有电子的mac中的菜单栏中添加自定义菜单？

Question

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

我希望在filter menu之后添加Electron。

Answer 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));
}

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

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

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

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

Answer 2

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

  

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

有趣的是它在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()
    }
})

Answer 3

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