电子应用程序菜单工作示例

Question

我是 Electron 新手，在寻找应用程序菜单的工作示例时遇到问题。

当尝试将 Quick Start 应用程序与 Electron 文档的 Class: Menu 页面中的示例结合起来时，似乎什么也没发生 - 更改 label 值没有任何效果。

谷歌搜索引发的问题多于它解决的问题，例如，我是否需要打包我的应用程序以更改应用程序菜单，或者我是否需要将我的 main.js 和 package.json 移动到 $projectRoot/resources/app（如果那么，是否需要打包运行）？

有没有更好的方法来掌握 Electron 的窍门...？

编辑

当我在 OSX 上将以下内容添加到我的应用程序时，应用程序菜单有一个条目 — Electron，还有一个选项 Quit：

const electron = require('electron');
var menu = electron.Menu.buildFromTemplate([
    {
        label: 'Electron',
        submenu: [
        {
            label: 'Options',
            click: function() {
                alert('Test');
            }
        }
        ]
    }
]);

electron.Menu.setApplicationMenu(menu);

Answer 1

您无需打包应用即可更改应用菜单。检查您是否在发出ready 事件后调用Menu.setApplicationMenu()，例如

app.on('ready', () => {
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
})

Answer 2

由于您没有提供任何代码，因此很难看到 prb 是什么。但是，这里应该如何工作：在 main.js 中这样做：

var MenuItem = require('menu-item');

然后制作一个函数 createMenu ：

global.yourApp = {
        init() {
            whatsApp.createMenu();            
            config.init();
        },

        createMenu() {
            yourApp.menu =
                AppMenu.buildFromTemplate(require('./menu'));
                AppMenu.setApplicationMenu(yourApp.menu);
        }
}

./menu 你会得到 menu.js 文件，看起来应该是这样的：

    (function(scope) {
        "use strict";

        var template = [
            {
                label: 'Edit',
                submenu: [
                    {
                        label: 'Undo',
                        accelerator: 'CmdOrCtrl+Z',
                        role: 'undo'
                    }
                   ......
              ]
    }]
})(this);

Answer 3

根据我有限的经验： “我是否需要打包我的应用程序才能更改应用程序菜单”？

是的。这可能是您的根本原因。

默认的 electron cmd 包含应用程序外壳的“chrome”，并且不使用任何包含的菜单更改代码。您只需获得默认菜单结构。