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);