用Electron创建跨平台应用（三）Menu菜单设置和右键设置

Menu与MenuItem 模块用于主进程，用于创建原生应用菜单和上下文菜单。
使用MenuItem类可以添加菜单项至 Electron 应用程序菜单和上下文菜单当中。

主进程代码（index.js），加在ready事件里：

const { app, BrowserWindow, Menu, shell, ipcMain } = require('electron')
 //菜单Type说明： normal常规菜单项；separator分割线；submenu子菜单；checkbox复选菜单项；radio单选菜单项
  const template = [
    {
      label: '文件',
      submenu: [
        {
          label: '新建',
          click() { },
        },
        {
          label: '打开',
          accelerator: 'ctrl+q',
          click() { },
        },
        {
          label: '保存',
          click() {

          },
        },
        {
          type: 'separator',  // 分割线
        },
        {
          label: '打印',
          click() { },
        },
        {
          label: '退出',
          accelerator: 'ctrl+x',
          click() { app.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: 'zoomin',
        },
        {
          label: '放大',
          role: 'zoomout',
        },
        {
          label: '重置缩放',
          role: 'resetzoom',
        },
        {
          type: 'separator',
        },
        {
          label: '全屏',
          role: 'togglefullscreen',
        },
      ],
    },
    {
      label: '帮助',
      submenu: [
        {
          label: '关于',
          click() {
            shell.openExternal('http://jiweiv.cn');
          },
        },
      ],
    },
  ];
  const m = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(m);

  // 右键菜单
  const contextMenuTemplate = [
    {
      label: '撤销',
      role: 'undo',
    },
    {
      label: '恢复',
      role: 'redo',
    },
    {
      type: 'separator',
    },
    {
      label: '剪切',
      role: 'cut',
    },
    {
      label: '复制',
      role: 'copy',
    },
    {
      label: '粘贴',
      role: 'paste',
    },
    {
      type: 'separator',
    },  // 分隔线
    {
      label: '全选',
      role: 'selectall',
    },
    // Select All菜单项
  ];
  const contextMenu = Menu.buildFromTemplate(contextMenuTemplate);

  // 监听右键事件
  ipcMain.on('contextMenu', () => {
    contextMenu.popup(BrowserWindow.getFocusedWindow());
  });

渲染进程代码（index.html）：

<script>
  const { ipcRenderer } = require("electron");
  document.addEventListener('contextmenu', function (e) {
    // 右键事件触发
    e.preventDefault();
    ipcRenderer.send('contextMenu');
  })
</script>

TIM截图20191017122520.png