仅供学习参考

Menu() 自定义菜单

template是一个options类型的数组，用于构建MenuItem。

1.创建菜单模板

const template = [
  {
    label: 'Electron'
  },
  {
    label: 'Edit'
  },
  {
    label: 'View'
  },
  {
    label: 'Help'
  },
]

2.使用buildFromTemplate编译模板，创建模板对象

3.把模板对象设置成菜单

menu.ts

import {
  app,
  Menu,
  shell,
  BrowserWindow,
  MenuItemConstructorOptions,
} from 'electron';

import { settingMenu } from './setting';

interface DarwinMenuItemConstructorOptions extends MenuItemConstructorOptions {
  selector?: string;
  submenu?: DarwinMenuItemConstructorOptions[] | Menu;
}

export default class MenuBuilder {
  mainWindow: BrowserWindow;

  constructor(mainWindow: BrowserWindow) {
    this.mainWindow = mainWindow;
  }

  buildMenu(): Menu {

    //创建菜单模板
    const template =this.buildDarwinTemplate();
    //使用buildFromTemplate编译模板，创建模板对象
    const menu = Menu.buildFromTemplate(template);
    //把模板对象设置成菜单（在 Windows 和 Linux 上，将设置为每个窗口的顶部菜单）
    Menu.setApplicationMenu(menu);

    return menu;
  }

  //定义菜单模板
  buildDarwinTemplate(): MenuItemConstructorOptions[] {
    const subMenuAbout: DarwinMenuItemConstructorOptions = {
      //菜单标题
      label: 'Electron',
      //子菜单
      submenu: [
        //下一层子菜单
        { label: 'Services', submenu: [] },
        //分割线
        { type: 'separator' },
        { label: 'Show All', selector: 'unhideAllApplications:' },
        {
          label: 'Quit',
          //快捷键
          accelerator: 'Command+Q',
          //点击事件
          click: () => {
            app.quit();
          },
        },
      ],
    };
    const subMenuEdit: DarwinMenuItemConstructorOptions = {
      label: 'Edit',
      submenu: [
        { label: 'Cut', accelerator: 'Command+X', selector: 'cut:' },
        { label: 'Copy', accelerator: 'Command+C', selector: 'copy:' },
        { label: 'Paste', accelerator: 'Command+V', selector: 'paste:' },
        {
          label: 'new BrowserWindow',
          click: () => {
            new BrowserWindow({
              width: 500,
              height:500
            })
          },
        },
      ],
    };
    const subMenuViewDev: MenuItemConstructorOptions = {
      label: 'View',
      submenu: [
        {
          label: 'Reload',
          accelerator: 'Command+R',
          //刷新页面
          click: () => {
            this.mainWindow.webContents.reload();
          },
        },
        {
          label: 'Toggle Full Screen',
          accelerator: 'Ctrl+Command+F',
          //全屏
          click: () => {
            this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
          },
        },
        {
          label: 'Toggle Developer Tools',
          accelerator: 'Alt+Command+I',
          //打开开发工具
          click: () => {
            this.mainWindow.webContents.toggleDevTools();
          },
        },
      ],
    };
    const subMenuHelp: MenuItemConstructorOptions = {
      label: 'Help',
      submenu: [
        settingMenu,
        {
          label: 'Learn More',
          click() {
            shell.openExternal('https://electronjs.org');
          },
        },
      ],
    };

    return [subMenuAbout, subMenuEdit, subMenuViewDev, subMenuHelp];
  }
}

main.ts

import MenuBuilder from './menu';
const createWindow = async () => {
...
  mainWindow = new BrowserWindow({...})

  const menuBuilder = new MenuBuilder(mainWindow);
  menuBuilder.buildMenu();
...
}

setting.ts

...
export const settingMenu = {
  label: '&设置',
  accelerator: 'Ctrl+S',
  click: () => {
    createSettingWindow();
  },
};
...