问题描述

我有一个带有 3 个窗口的 Electron 应用程序，每个窗口都有不同的菜单.每个菜单的菜单模板代码都很长，我想将其外部化.到目前为止，我没有尝试过任何工作.

I have an Electron app with 3 windows and each window has a different menu. The menu template code for each menu is quite long and I would like to externalize it. So far nothing I have tried works.

我尝试了不同的方法来模块化"它，但出现了很多错误.下面的方法可以设置菜单，但菜单中引用的函数都不起作用(例如 quitApplication).

I've tried different ways to "modularize" it but got lots of errors. The approach below works to set up the menu, but none of the functions referenced in the menu work (e.g. quitApplication).

我试图做的事情是不可能的，还是我只是做错了"?

Is what I am trying to do not possible or am I just "doing it wrong"?

var test = require("./app/js/menuTest.js");
var tm = new test();    
var menuTemplate = tm.getMenu();
myWindow = Menu.buildFromTemplate(menuTemplate);

<小时>

menuTest.js

function testMenu() {
 this.getMenu = function () {
        var menuTemplate = [
            {
                label: global.productData.appName,
                submenu: [
                    { label: 'About ' + global.productData.appName, click: () => { showAboutWindow() } },

                    { type: 'separator' },
                    { role: 'hide' },
                    { role: 'hideothers' },
                    { role: 'unhide' },
                    { type: 'separator' },
                    { label: 'Quit', click: () => { quitApplication() }, accelerator: 'CmdOrCtrl+q' }
                ]
         // code deleted for clarity
        return menuTemplate;
    }
}
module.exports = testMenu;

推荐答案

根据我对您问题的理解，您希望将模板代码移出主流程脚本，但将函数保留在其中.

From how I understand your question, you want to move the template code out of your main process script, but keep the functions in there.

这可以通过将菜单结构对象移动到一个单独的模块中来实现.该模块导出一个函数，该函数接受一个对象，该对象引用您要在菜单中调用的函数.

This can be achieved by moving the menu structure object into a separate module. The module exports a function that takes an object with references to the functions you want to call in the menu.

我相信这不会增加显着的复杂性并且只是将菜单模板代码外部化".

I believe this does not add significant complexity and "externalizes" just the menu template code.

menu1.js:

module.exports = function(actions) {
    return [
        {
            label: "Foo",
            submenu: [
                { label: "Bar", click: actions.bar },
                { label: "About", click: actions.about }
            ]
        }
    ];
}

main.js:

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

const actions = {
    bar: function () {
        console.log("bar");
    },
    about: function () {
        console.log("about");
    }
};

const menu1_template = require("./menu1.js")(actions);
const menu1 = Menu.buildFromTemplate(menu1_template);
Menu.setApplicationMenu(menu1);

let mainWindow;

app.on("ready", function() {
    mainWindow = new BrowserWindow();
});

这篇关于是否可以外部化电子菜单模板代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！