应用菜单

替换设置应用程序菜单

创建应用菜单模块
创建一个新的名为application-menu.js文件，

const { app, BrowseWindow, Menu, shell } = require('electron');
const mainProcess = require('./main');

//创建数组模板，它描述了整个菜单的完整结构
const template = [
    {
        label: 'Edit',
        submenu: [
            {
                label: '复制',
                accelerator: 'CommandOrControl+C', //accelerator属性定义键盘快捷键
                role: 'copy'
            },
            {
                label: '粘贴',
                accelerator: 'CommandOrControl+V', //accelerator属性定义键盘快捷键
                role: 'paste'
            }
        ]
    }
];
//macOS系统:总是将第一个菜单作为应用菜单，故将Edit菜单及其以后的菜单都往后移一个位置
if (process.platform === 'darwin') {
    const name = 'Fire Sale';
    template.unshift({ label: name }); //向数组的开头添加一个或更多元素，并返回新的长度
}

//https://www.cnblogs.com/fayin/p/6831071.html
module.exports = Menu.buildFromTemplate(template);

main.js 已入并设置应用菜单

const {..., Menu } = require('electron');
const applicationMenu = require('./application-menu'); //引入应用菜单模块
...
app.on('ready', () => {
    Menu.setApplicationMenu(applicationMenu); //设置应用菜单
    mainWindow = createwindow();
});

知识点

module.exports = Menu.buildFromTemplate(template);

Menu.setApplicationMenu(applicationMenu); //设置应用菜单

macOS系统:总是将第一个菜单作为应用菜单，故将Edit菜单及其以后的菜单都往后移一个位置

菜单项的role 属性

每一种role属性都关联到一种操作系统内置的功能，有如下值：

undo
redo
cut
copy
paste
selectall
minimize
close

补上macOS系统的应用菜单

大部分macOS应用都具备的应用菜单功能，electron为macOS系统提供一组额外的role

if (process.platform === 'darwin') {
  const name = 'Firesale';
  template.unshift({
    label: name,
    submenu: [
      {
        label: `About ${name}`,
        role: 'about',
      },
      { type: 'separator' },
      {
        label: 'Services',
        role: 'services',
        submenu: [],
      },
      { type: 'separator' },
      {
        label: `Hide ${name}`,
        accelerator: 'Command+H',
        role: 'hide',
      },
      {
        label: 'Hide Others',
        accelerator: 'Command+Alt+H',
        role: 'hideothers',
      },
      {
        label: 'Show All',
        role: 'unhide',
      },
      { type: 'separator' },
      {
        label: `Quit ${name}`,
        accelerator: 'Command+Q',
        click() { app.quit(); }, // A
      },
    ],
  });

知识点

 #### 自定义菜单项的点击事件： { label:xxx, click() { app.quit(); }}  
 #### 菜单项分割线  { type: 'separator' }

Window role

仅在macOS系统中用 Window role，会在菜单的末尾添加一个包含当前应用所有窗口的列表

不支持 Window role 的系统自动略过
窗口的最大化，最小化，关闭等

 {
    label: 'Window',
    submenu: [
      {
        label: 'Minimize',
        accelerator: 'CommandOrControl+M',
        role: 'minimize',
      },
      {
        label: 'Close',
        accelerator: 'CommandOrControl+W',
        role: 'close',
      },
    ],
  },

...
  //为macOS系统中用Window role
  const windowMenu = template.find(item => item.label === 'Window'); // B
  windowMenu.role = 'window';
  windowMenu.submenu.push(
    { type: 'separator' },
    {
      label: 'Bring All to Front',
      role: 'front',
    }
  );

help菜单

大部分macOS系统使用这个功能，按下 command+shift+?, 用户就可以使用这个菜单搜索功能
一般可以在help菜单中添加打开开发者工具

 {
    label: 'Help',
    role: 'help',
    submenu: [
      {
        label: 'Visit Website',
        click() { /* To be implemented */ }
      },
      {
        label: 'Toggle Developer Tools',
        click(item, focusedWindow) {
          if (focusedWindow) focusedWindow.webContents.toggleDevTools();
        }
      }
    ]
  }

特有的功能菜单

New File、Open File、Save File、Export Html

applicatoinMenu.js

{
        label: 'File',
        submenu: [
            {
                label: 'New File',
                accelerator: 'CommandOrControl+N',
                click() {
                    mainProcess.createWindow();
                }
            },
            {
                label: 'Open File',
                accelerator: 'CommandOrControl+O',
                click(item, focusedWindow) {
                    if (focusedWindow) {
                        return mainProcess.getFileFromUser(focusedWindow);
                    }

                    const newWindow = mainProcess.createWindow();

                    newWindow.on('show', () => {
                        mainProcess.getFileFromUser(newWindow);
                    });
                },
            },
            {
                label: 'Save File',
                accelerator: 'CommandOrControl+S',
                click(item, focusedWindow) {
                    if (!focusedWindow) {
                        return dialog.showErrorBox(
                            'Cannot Save or Export',
                            'There is currently no active document to save or export.'
                        );
                    }
                    focusedWindow.webContents.send('save-markdown');
                },
            },
            {
                label: 'Export HTML',
                accelerator: 'Shift+CommandOrControl+S',
                click(item, focusedWindow) {
                    if (!focusedWindow) {
                        return dialog.showErrorBox(
                            'Cannot Save or Export',
                            'There is currently no active document to save or export.'
                        );
                    }
                    focusedWindow.webContents.send('save-html');
                },
            },
        ],
    },

renderer.js

ipcRenderer.on('save-markdown', () => {
  mainProcess.saveMarkdown(currentWindow, filePath, markdownView.value);
});

ipcRenderer.on('save-html', () => {
  mainProcess.saveHtml(currentWindow, htmlView.innerHTML);
});

上下文菜单

const markdownContextMenu = Menu.buildFromTemplate([{},{}])->markdownContextMenu.popup();

renderer.js

const { remote, ...} = require('electron');
const { Menu } = remote;
...
//上下文菜单
const markdownContextMenu = Menu.buildFromTemplate([
    { label: 'Open File', click() { mainProcess.getFileFromUser(); } },
    { type: 'separator' },
    { label: 'Cut', role: 'cut' },
    { label: 'Copy', role: 'copy' },
    { label: 'Paste', role: 'paste' },
    { label: 'Select All', role: 'selectall' },
]);

markdownView.addEventListener('contextmenu', (event) => {
    event.preventDefault();
    markdownContextMenu.popup();
});