是否可以外部化Electron菜单模板代码？ [英] Is it possible to externalize Electron menu template code?

问题描述

我有一个带有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();
});

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