Question

Electron和构建菜单的新手，我试图查看是否可以分隔MenuItem来防止巨大的文件，但是我遇到了问题。例如，我已经将菜单代码分离到了 main.js 之外，并且将菜单移动到了Menu目录中的渲染器目录中。我可以使用以下命令从 main.js 调用菜单：

let mainMenu = Menu.buildFromTemplate(require('./renderer/Menus/mainMenu'))

mainMenu.js ：

module.exports = [
    {
        label: 'Foo',
        id: 'itemFoo',
        submenu: [
            {label: 'Enter Foo'},
            {label: 'Exit Foo'}
        ]
    },
    {
        label: 'Bar',
        id: 'itemBar',
        submenu: [
            {label: 'Enter Bar'},
            {label: 'Exit Bar'}
        ]
    }   
]

它可以工作，但是可以将每个菜单项进一步分离到各自的文件中吗？

我尝试使用 mainMenu.js 并将其编码为：

const foo = require('./itemFoo')

module.exports = [
    {foo},
    {
        label: 'Bar',
        id: 'itemBar',
        submenu: [
            {label: 'Enter Bar'},
            {label: 'Exit Bar'}
        ]
    }   
]

itemFoo.js：

module.exports = [
    {
        label: 'Foo',
        id: 'itemFoo',
        submenu: [
            {label: 'Enter Foo'},
            {label: 'Exit Foo'}
        ]
    }
]

但是我得到一个错误：

TypeError：MenuItem的无效模板：必须至少具有以下之一标签，角色或类型

Electron中的菜单项可以隔离到其自己的模块中吗？在搜索[electron] menuitem或在documentation

下时，我没有看到此内容

Answer 1

这应该可以（尽管没有试用）：

主要过程：

let mainMenuTemplate =
[
    require('./renderer/Menus/itemFoo'),
    require('./renderer/Menus/itemBar')
];
let mainMenu = Menu.buildFromTemplate(mainMenuTemplate);

itemFoo.js ：

module.exports =
{
    label: 'Foo',
    id: 'itemFoo',
    submenu: [
        {label: 'Enter Foo'},
        {label: 'Exit Foo'}
    ]
};

itemBar.js ：

module.exports =
{
    label: 'Bar',
    id: 'itemBar',
    submenu: [
        {label: 'Enter Bar'},
        {label: 'Exit Bar'}
    ]
};

注意：那么可能不需要中间mainMenu.js文件...

Answer 2

I figured out what I was doing wrong. I was writing the Menu Items incorrectly. It should be:

main.js:

const { Menu } = require('electron')

let mainMenu = Menu.buildFromTemplate(require('./renderer/Menus/mainMenu'))

app.on('ready', () => {
  mainWindow.createWindow(),
  Menu.setApplicationMenu(mainMenu)
})

mainMenu.js:

const foo = require('./itemFoo')
const bar = require('./itemBar')

module.exports = [
    foo,
    bar
]

itemBar.js:

module.exports = {
    label: 'Foo',
    id: 'itemFoo',
    submenu: [
        {label: 'Enter Foo'},
        {label: 'Exit Foo'}
    ]
}

itemFoo.js:

module.exports = {
    label: 'Bar',
    id: 'itemBar',
    submenu: [
        {label: 'Enter Bar'},
        {label: 'Exit Bar'}
    ]
}

That will allow me to have each main menu item in its own file and clear main.js.

MenuItem如何在Electron中分离为自己的模块？

2 个答案: