Electron 从入门到实践03

使用Electron API 创建原生的菜单

1、使用模版创建菜单

在原来的项目目录基础上，修改main.js文件

const { app, BrowserWindow, Menu } = require('electron')  // 引入Menu 
// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win

function createWindow () {
  win = new BrowserWindow({
    // 设置窗口大小
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  // 使用模版创建菜单
  const template = [{
        label: '文件',   // 设置菜单项文本
        submenu: [    // 设置子菜单
          {
              label: '关于',
              role: 'about',       // 设置菜单角色（关于），只针对 Mac  OS X 系统
              click: (menuItem, browserWindow, event)=>{     // 设置单击菜单项的动作（弹出一个新的模态窗口）
                  var aboutWin = new BrowserWindow({width:300,height:200,parent:win,modal: true});
                  aboutWin.loadURL('https://blog.csdn.net/haeasringnar');
                  console.log('role:', menuItem.role)
                }
          },
          {
              type: 'separator'       // 在此处为菜单加分隔栏
          },
          {
              label: '关闭',
              accelerator: 'Ctrl+Q',      // 设置菜单快捷键
              click: ()=>{win.close()}
          }
        ]
    }];
  const menu = Menu.buildFromTemplate(template);
  //  开始设置菜单
  Menu.setApplicationMenu(menu);

  // 加载index.html文件
  win.loadFile('index.html')
  ..........

运行后效果如下

2、使用菜单项创建菜单

修改main.js文件，在template下增加以下代码

{
    label: '调试',
    submenu: [
        {
            label: '显示调试工具',
            role:'toggleDevTools'
        }
    ]
  },
  {
    label: '编辑',
    submenu: [
        {
              label: '撤销',
              role:'undo',
              click:()=>{win.webContents.undo()} // 在点击时执行撤销命令
          },
          {
              label: '重做',
              role:'redo',
              click:()=>{win.webContents.redo()} // 在点击时执行重做命令
          },
          {
            type:'separator'   // 设置菜单项分隔条
          },
          {
              label: '剪切',
              role:'cut'
          },
          {
              label: '复制',
              role:'copy',
              click:()=>{win.webContents.copy()} // 在点击时执行复制命令
          },
          {
              label: '粘贴',
              role:'paste',
              click:()=>{win.webContents.paste()} // 在点击时执行粘贴命令
          }
    ]
  }

运行后效果如下