Electron-开发实践：定制Mac菜单

【前言】

前面几篇文章讲了从开发electron应用到mac打包，

相关文章：

一篇文章学会Electron

Electron-开发实践：本地数据库SQLite

Electron-开发实践：使用Monorepo管理Electron项目

Electron-开发实践：Mac打包

Electron-开发实践：注册苹果开发者账号

Electron-开发实践：Mac应用包签名和公证

Electron-开发实践：DMG安装包定制

本文讲一下自定义mac菜单

【默认mac菜单】

使用electron开发mac应用，

如果没有定制mac菜单，

默认的效果如下，

【menu】

使用electron的menu可以自定义mac菜单栏，

https://www.electronjs.org/zh/docs/latest/api/menu

核心代码如下，其中的template是一个menu模板数组，

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

使用封装好的role

菜单模板中一种常见的方式是使用封装好的role，

就是electron将常见的菜单项和点击操作封装为了一个role，

如下，

[
  {
    label: 'Edit',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' },
    ],
  },
];

例如上面的copy这个role，点击后就会执行复制操作

使用自定义菜单项

除了使用内置的role，还可以自定义菜单项，如下

[
  {
    role: 'help',
    submenu: [
      {
        label: 'Learn More',
        click: async () => {
          const { shell } = require('electron');
          await shell.openExternal('https://electronjs.org');
        },
      },
    ],
  },
];

常见模板

按国内的应用菜单，准备了一个常见的模板，如下

[
  {
    label: 'app',
    submenu: [
      {
        label: '关于',
        role: 'about',
      },
      {
        type: 'separator',
      },
      {
        label: '隐藏',
        role: 'hide',
      },
      {
        label: '隐藏其他',
        role: 'hideOthers',
      },
      {
        type: 'separator',
      },
      {
        label: '退出',
        role: 'quit',
      },
    ],
  },
  {
    label: '编辑',
    submenu: [
      {
        label: '撤销',
        role: 'undo',
      },
      {
        label: '重做',
        role: 'redo',
      },
      {
        type: 'separator',
      },
      {
        label: '剪切',
        role: 'cut',
      },
      {
        label: '复制',
        role: 'copy',
      },
      {
        label: '粘贴',
        role: 'paste',
      },
      {
        label: '删除',
        role: 'delete',
      },
      {
        label: '选中所有',
        role: 'selectAll',
      },
    ],
  },
  {
    label: '窗口',
    submenu: [
      {
        label: '最小化',
        role: 'minimize',
      },
      {
        label: '关闭',
        role: 'close',
      },
      {
        label: '自动全屏',
        role: 'togglefullscreen',
      },
    ],
  },
  {
    label: '调试',
    submenu: [
      {
        label: '调试',
        role: 'toggleDevTools',
      },
    ],
  },
];

效果

【qiao-x-menu】

封装了一个操作electron menu的库，欢迎使用，

https://code.insistime.com/#/qiao-x-menu

上面定制mac菜单的操作可以简化为，

import { setApplicationMenu } from 'qiao-x-menu';

setApplicationMenu(menus);