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

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

您无需打包应用程序即可更改应用程序菜单。检查您是否在

Menu.setApplicationMenu()

事件发出后调用

ready

，例如

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

以我有限的经验来看： “我是否需要打包我的应用程序才能在应用程序菜单中实现更改”？

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

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

Answer 4

您需要在

autoHideMenuBar:false

函数中设置

createWindow

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 1280,
    height: 800,
    show: false,
    autoHideMenuBar: false,
   }

 })

然后按如下方式构建菜单：

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