电子菜单不显示答案

【问题标题】：Electron menu not showing电子菜单不显示
【发布时间】：2021-08-04 09:20:43
【问题描述】：

按照电子教程，无法在 OS X 上显示菜单。检查了菜单对象是否填充了菜单项，它们只是没有出现在窗口中或屏幕顶部。 Html 文件加载正常。

我看到的唯一菜单是读取 Electron 的（默认）应用程序菜单，但点击时它没有内容，甚至没有空行——点击时什么也没有发生。

const { app, BrowserWindow, Menu } = require("electron");
const url = require("url");
const path = require("path");

const mainWindowUrl = url.format({
    pathname: path.join(__dirname, "html", "main.html"),
    protocol: "file:",
    slashes: true,
});

const menuTemplate = [
    {
        label: "File",
    },
    {
        label: "Menu1",
    },
    {
        label: "Menu2",
    },
];

const onAppReady = () => {
    const mainWindow = new BrowserWindow({});
    mainWindow.loadURL(mainWindowUrl);

    const menu = Menu.buildFromTemplate(menuTemplate);
    Menu.setApplicationMenu(menu);
};

app.on("ready", onAppReady);

【问题讨论】：

标签： javascript electron

【解决方案1】：

为您提供解决方案

if (process.platform == 'darwin') {
    mainMenuTemplate.unshift({label: ''});
}

这可能会造成一些错误

if (process.platform == 'darwin'){
    mainMenuTemplate.unshift({});
}

【讨论】：

【解决方案2】：

我认为它只是跳过了您的菜单，因为它们缺少子菜单，这是您的示例的修改版本，似乎可以在我的 Mac 上运行：

const { app, BrowserWindow, Menu } = require("electron");
const url = require("url");
const path = require("path");

const mainWindowUrl = url.format({
    pathname: path.join(__dirname, "html", "main.html"),
    protocol: "file:",
    slashes: true
});
const menuTemplate = [
    {
        label: "File",
        submenu: [{role: 'TODO'}]
    },
    {
        label: "Menu1",
        submenu: [{role: 'TODO'}]
    },
    {
        label: "Menu2",
        submenu: [{role: 'TODO'}]
    }
];

const onAppReady = () => {
    const mainWindow = new BrowserWindow({});
    mainWindow.loadURL(mainWindowUrl);

    const menu = Menu.buildFromTemplate(menuTemplate);
    Menu.setApplicationMenu(menu);
};

app.on("ready", onAppReady);

我不知道这是否是 OSX 特有的东西，但似乎至少 Electron 不喜欢直接触发角色的菜单，而是它们必须显示可以触发某些操作的子菜单。

【讨论】：

谢谢！没有看到您需要任何其他内容来制作有效菜单的任何地方。不过有道理。我可能只是错过了它。 :-)
我的菜单没有显示，因为我在on('ready') 函数之外调用了Menu.setApplicationMenu()！把它放进去效果很好，谢谢。

【解决方案3】：

我注意到在 OS X 上，您的菜单模板中的第一个菜单项（在您的情况下为“文件”）位于默认电子菜单下，因此您可能希望在数组中添加一个空项

const mainMenuTemplate = [
    {},
    {
        label: 'File',
        submenu: [
            {
                label: 'Add Item'
            },
            {
                label: 'Clear items'
            },
            {
                label: 'Quit',
                click(){
                    app.quit();
                }
            }
        ]
    }
 ];

【讨论】：

这将导致 windows 应用程序上的菜单间距。最好的方法是读取 process.platform == 'darvin' 并取消移动一个空对象。

【解决方案4】：

这是修复macosx导航所需的空间

enter code here

//if mac add empty object to menuTemplate
if(process.platform=='darwin'){
  mainMenuTemplate.unshift({});//adding it to the beggining of the array
}

【讨论】：

【解决方案5】：

我添加了一个带有角色的空菜单。

const mainMenuTemplate = [
{
  label: "",
  role: 'TODO'
},

{
    label: "File",

    submenu: [
      {
        label: 'Add Item',
      },
      {
      label: 'Clear Items'
      }
    ]
}

];

【讨论】：