如何在电子中将MenuItem分成自己的模块?

问题描述 投票:0回答:2

电子和建筑菜单的新手我试图看看我是否可以分开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] menuitemdocumentation时,我没有看到这提到

menu electron menuitem
2个回答
0
投票

这应该工作(虽然未经测试):

主要过程:

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文件......


0
投票

我弄清楚我做错了什么。我正在错误地编写菜单项。它应该是:

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.

© www.soinside.com 2019 - 2024. All rights reserved.