node.js - 如何使用 electron 在 mac 的菜单栏中添加自定义菜单？

Question

我想用 Electron (nodejs)在mac的菜单栏中添加自定义菜单
例如。我们有

我想在 Electron 之后添加 filter menu。

Answer 1

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

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

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”。当您将您的应用程序编译为独立应用程序时(不通过 electron-prebuilt 运行)，它会在那里包含您的应用程序名称。

正如@neonhomer 所指出的，此 API 必须在应用程序模块的就绪事件之后调用。

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