仅在 Mac 以外的设备上添加子菜单项：Electron JS

Question

我想在我的 Electron JS 应用程序的文件菜单项下添加一个退出子菜单项，但是 仅在 Windows 和 Linux。在 Mac，我已经在应用程序名称菜单项下设置了一个退出子菜单项。目前，这是我的代码：

function createMenu(){
    const isMac = process.platform === 'darwin';
    const menu = [
        
        {
            label: "File",
            submenu: [
                {
                    label: 'Add expense',
                },
                !isMac && { 
                    label: 'Quit',
                    click(){
                        app.quit()
                    },
                    accelerator: 'Ctrl+Q'
                }
            ]
        },
        {
            label: "Menu2",
            submenu: [{label: 'Ok'}]
        }
    ];


    // Mac First Item in Template refers to app name (won't be able to override unless you package application)
    isMac && menu.unshift({
        label: app.name,
        submenu: [
            {
                label: 'About',
                click(){
                    open('https://www.google.com') // Using the open package
                }
            }, 
            {
                label: 'Quit',
                click(){
                    app.quit()
                },
                accelerator: 'Cmd+Q'
            }
        ]
    })


    return menu;
    
}

当我运行但是，我收到一条错误消息

TypeError: Invalid template for MenuItem: must have at least one of label, role or type

我应该怎么做？

谢谢！

Answer 1

由于您试图有条件地将对象插入列表文字的方式，您收到了错误。

// The not macOS case:
> [ {"foo": 15}, true && {"bar": 123} ]
[ { foo: 15 }, { bar: 123 } ]

// The macOS case:
> [ {"foo": 15}, false && {"bar": 123} ]
[ { foo: 15 }, false ]

在后一种情况下，您最终会在数组中插入一个 false 元素，这就是您收到错误的原因。

如果你想使用这样的shorthand，你可以使用：

> [ {"foo": 15}, ...(true?[{"bar": 123}]:[]) ]
[ { foo: 15 }, { bar: 123 } ]

> [ {"foo": 15}, ...(false?[{"bar": 123}]:[]) ]
[ { foo: 15 } ]

在您的用例中，这将使您：

const menu = [
    {
        label: "File",
        submenu: [
            {
                label: 'Add expense',
            },
            ...(!isMac)?[{ 
                label: 'Quit',
                click(){
                    app.quit()
                },
                accelerator: 'Ctrl+Q'
            }]:[]
        ]
    },
    {
        label: "Menu2",
        submenu: [{label: 'Ok'}]
    }
];

或者，您可以简单地调整菜单模板：

const menu = [
    {
        label: "File",
        submenu: [
            {
                label: 'Add expense',
            }
        ]
    },
    {
        label: "Menu2",
        submenu: [{label: 'Ok'}]
    }
];

if (!isMac) {
    menu[0]["submenu"].push({ 
        label: 'Quit',
        click(){
            app.quit()
        },
        accelerator: 'Ctrl+Q'
    })
}

使用哪一个由你决定；在第二种情况下，如果结构发生变化，您可能需要更新菜单寻址。您还应该权衡可读性。

仅在 Mac 以外的设备上添加子菜单项：Electron JS

Adding Submenu Item Only on Devices other than Mac: Electron JS

javascript

menu

menuitem

electron