电子和建筑菜单的新手我试图看看我是否可以分开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时,我没有看到这提到
这应该工作(虽然未经测试):
主要过程:
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
文件......
我弄清楚我做错了什么。我正在错误地编写菜单项。它应该是:
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'}
]
}
这将允许我将每个主菜单项放在自己的文件中并清除main.js.