electron中自定义软件顶部菜单，自定义右键菜单，绑定快捷键

自定义顶部菜单

• 自定义菜单文件menu.js

// Menu是主进程模块
const {Menu}=require('electron');
// 创建菜单模板
// https://www.electronjs.org/zh/docs/latest/api/menu-item
const menuTemplate=[
    {
        label:'文件',
        submenu:[
            {
                label:'新建',
                accelerator:'ctrl+n',//定义快捷键
                click:()=>{
                    console.log('Ctrl+N')
                }
            },
            {
                label:'打开'
            },
            {
                label:'保存'
            }
        ]
    },{
        label:'编辑',
        submenu:[
            {
                label:'复制',
                role:'copy',
                // accelerator:'ctrl+c',ctrl+c定义复制和系统快捷键冲突，所以无效,可以使用role定义
                click:()=>{
                    console.log('复制')
                }
            },
            {
                type:'separator' //分割符
            },
            {
                label:'放大',
                role:'zoomin',
                // accelerator:'ctrl+c',ctrl+c定义复制和系统快捷键冲突，所以无效,可以使用role定义
                click:()=>{
                    console.log('放大')
                }
            }
        ]
    }
]
const menuBuilder=Menu.buildFromTemplate(menuTemplate);
Menu.setApplicationMenu(menuBuilder)

• 主进程中加载menu.js

const createWindow=()=>{
    // 可以有多个渲染进程
    const mainWindow=new BrowserWindow({
        width:600,
        height:600,
        webPreferences:{
            nodeIntegration:true,   //允许渲染进程使用node.js
            contextIsolation:false  //允许渲染进程使用node.js
        }
    })
    // 
    mainWindow.loadFile(path.join(__dirname,'index.html'))
    mainWindow.webContents.openDevTools()

    // 自定义顶部菜单
    require('./ipcMain/menu')
}

自定义右键菜单

1.方案一：使用主进程remote模块

• 主进程中设置remote模块

• 渲染进程中设置右键菜单
  

2.方案二：使用渲染进程和主进程通信（推荐）
https://www.electronjs.org/zh/docs/latest/api/menu

// renderer
window.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  ipcRenderer.send('show-context-menu')
})

ipcRenderer.on('context-menu-command', (e, command) => {
  // ...
})

// main
ipcMain.on('show-context-menu', (event) => {
  const template = [
    {
      label: 'Menu Item 1',
      click: () => { event.sender.send('context-menu-command', 'menu-item-1') }
    },
    { type: 'separator' },
    { label: 'Menu Item 2', type: 'checkbox', checked: true }
  ]
  const menu = Menu.buildFromTemplate(template)
  menu.popup(BrowserWindow.fromWebContents(event.sender))
})

• 使用进程通信，在主进程中实现右键菜单，主进程中加载contextMenu.js

const {ipcMain,Menu,BrowserWindow}=require('electron')
const menuContextTemplate = [
    {
        label: '复制',
        role: 'copy'
    }, {
        label: '粘贴',
        role: 'paste'//使用了role，click事件不起作用
    }, {
        type: 'separator'//分隔符
    }, {
        label: '其它功能',
        click: () => {
            console.log('其它功能')
        }
    }
]

const menuBuilder=Menu.buildFromTemplate(menuContextTemplate)
// 监听右键菜单触发
ipcMain.on('showContextMenu',()=>{
    console.log('主进程触发右键菜单')
    menuBuilder.popup({
        window:BrowserWindow.getFocusedWindow()
    })
})

• 渲染进程中触发主进程对应的函数：ipcrender.js

window.addEventListener('contextmenu',(e)=>{
        e.preventDefault()
        // 向主进程发送消息，触发右键菜单
        ipcRenderer.send('showContextMenu')
    })