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

Question

我想在mac中的菜单栏中添加自定义菜单,
例如电子(nodejs).我们有

我想补充filter menu的权利之后Electron.

Answer 1

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

例如,在主进程代码中,您可以执行以下操作:

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).当您打包应用程序时,那将不存在.