Skip to content

创建菜单

在 Electron 中,创建一个菜单是相对直接的。以下是一个基本的示例,说明如何在你的应用程序中创建一个简单的菜单:

  1. 首先,你需要确保你已经在你的项目中包含了 Electron 的主进程模块。

  2. 在你的主进程中,你可以使用 MenuMenuItem 构造函数来构建菜单。以下是一个基本的菜单构造示例:

javascript
const { Menu, MenuItem } = require('electron')

function createMenu() {
  const template = [
    {
      label: 'Edit',
      submenu: [
        { role: 'undo' },
        { role: 'redo' },
        { type: 'separator' },
        { role: 'cut' },
        { role: 'copy' },
        { role: 'paste' },
        { role: 'pasteandmatchstyle' },
        { role: 'delete' },
        { role: 'selectall' }
      ]
    },
    {
      label: 'View',
      submenu: [
        { role: 'reload' },
        { role: 'forcereload' },
        { role: 'toggledevtools' },
        { type: 'separator' },
        { role: 'resetzoom' },
        { role: 'zoomin' },
        { role: 'zoomout' },
        { type: 'separator' },
        { role: 'togglefullscreen' }
      ]
    },
    {
      role: 'window',
      submenu: [
        { role: 'minimize' },
        { role: 'close' }
      ]
    },
    {
      role: 'help',
      submenu: [
        {
          label: 'Learn More',
          click () { require('electron').shell.openExternal('https://electronjs.org') }
        }
      ]
    }
  ]

  // Create the BrowserWindow using the browser window constructor
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createMenu)

在这个例子中,我们定义了一个菜单模板,它包括了几个预定义的角色,如编辑、查看、窗口和帮助。每个角色都对应于一个特定的功能,例如重载页面、切换全屏等。

  1. 使用 Menu.buildFromTemplate() 方法从模板创建菜单,然后使用 Menu.setApplicationMenu() 方法将创建的菜单设置为应用程序的菜单。

  2. 最后,我们在 app 的 'ready' 事件中调用 createMenu 函数,以确保在 Electron 完成初始化后菜单被创建。

这样,你就有了一个基本的菜单,可以根据需要添加更多的功能或自定义项。