本章目标

本章的目标是给之前的应用程序添加自定义菜单。

在第一章中运行的应用程序中可以看到，我们的应用程序已经带有一个菜单。

现在我们就来自定义一个菜单。

一、添加自定义应用程序菜单

1.创建 menu.js 文件

将菜单放在一个单独的文件中，这将总是一个好的实践，这样的话在每次你的应用程序需要修改时，你能很快找到菜单。
这里，你需要从Electron框架中引入Menu和shell对象。Menu对象提供了一个API，通过它我们能从一个JSON模板创建一个应用程序菜单，然后shell对象将帮助我们激活一个窗口并跳转至指定的URL。

menu.js的完整代码如下：

const { Menu, dialog } = require('electron');

const template = [
  {
    label: '帮助',
    role: 'help',
    submenu: [
      {
        label: '关于electronapp',
        click() {
          dialog.showMessageBox({
            message: '这是一个Electron应用！',
            type: 'info',
            title: 'electron应用'
          });
        }
      }
    ]
  }
];

const menu = Menu.buildFromTemplate(template);

module.exports = menu;

这里我们定义了一个名为“帮助”的顶级菜单，它的role属性是help。然后，我们又创建了一个子菜单数组去包含子菜单项，此子菜单项声明了一个“关于”菜单并响应了一个点击事件去激活一个外部窗口。最后我们调用Menu.buildFromTemplate方法将JSON模板转变为一个Electron菜单对象，还创建了一个新的菜单实例，并通过module.exports调用将它导出。

2.修改 main.js

代码如下：

const { app, BrowserWindow, Menu } = require('electron')
const menu = require('./menu');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

Menu.setApplicationMenu(menu);

3. 启动应用

npm start

点击“关于…”子菜单看看会发生什么。

至此，我们的自定义菜单已经添加成功了。

到目前为止，我们只是用最小的模板来演示如何添加应用程序菜单。但在实际我们用过的应用程序中，菜单不会这么简单，那接下来我们就来扩充这个菜单。

二、扩充菜单

1.修改 menu.js

const { Menu, dialog } = require('electron');

const template = [
  // 文件菜单
  {
    label: '文件',
    submenu: [
      {
        label: '退出',
        role: 'close'
      }
    ]
  },
  // 编辑菜单
  {
    label: '编辑',
    submenu: [
      { label: '撤销', role: 'undo' },
      { label: '重做', role: 'redo' },
      { type: 'separator' },
      { label: '剪切', role: 'cut' },
      { label: '复制', role: 'copy' },
      { label: '粘贴', role: 'paste' },
      { label: '删除', role: 'delete' },
      { type: 'separator' },
      { label: '全选', role: 'selectAll' }
    ]
  },
  // 查看菜单
  {
    label: '查看',
    submenu: [
      {
        label: '开发者工具',
        role: 'toggleDevTools'
      },
      {
        type: 'separator'
      },
      {
        label: '全屏',
        role: 'togglefullscreen'
      }
    ]
  },
  // 帮助菜单
  {
    label: '帮助',
    role: 'help',
    submenu: [
      {
        label: '关于electronapp',
        click() {
          dialog.showMessageBox({
            message: '这是一个Electron应用！',
            type: 'info',
            title: 'electron应用'
          });
        }
      }
    ]
  }
];

const menu = Menu.buildFromTemplate(template);

module.exports = menu;

2. 启动应用

现在我们就来启动应用看看效果

npm start

至此，我们的自定义菜单已经添加完成，我们可以点击各个菜单中的子菜单项看看效果，可以看到各子菜单已经具备基本功能和快捷键了，这是Electron中通过菜单项MenuItem中的role属性预定义的，不需要我们写额外的代码。关于role的更详细信息，可以参考Electron官网的 MenuItem(https://www.electronjs.org/zh/docs/latest/api/menu-item)文档。

四时宝库

程序员的知识宝库

「Electron跨平台桌面应用开发 2」自定义应用菜单