Electron制作右键菜单

一、菜单快捷键绑定

绑定快捷键的属性是accelerator属性，比如我们新打开一个窗口，我们就的代码可以写成这样。

accelerator:`ctrl+n`

全部代码如下：

const { Menu ,BrowserWindow} = require('electron')
var template = [
    {
        label:'凤来怡洗浴会所',
        submenu:[
            {
                label:'精品SPA',
                accelerator:`ctrl+n`,
                click:()=>{
                    win = new BrowserWindow({
                        width:500,
                        height:500,
                        webPreferences:{ nodeIntegration:true}
                    })
                    win.loadFile('yellow.html')
                    win.on('closed',()=>{
                        win = null
                    })

                }
            },
            {label:'泰式按摩'}
        ]

    },
    {
        label:'大浪淘沙洗浴中心',
        submenu:[
            {label:'牛奶玫瑰浴'},
            {label:'爱情拍拍手'}
        ]
    }
]
var m = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(m)

写完代码后，在终端中输入electron . 运行程序，再用快捷键ctrl+n就可以新建一个页面了。这就实现了新建页面的方法。

二、创建右键菜单

右键菜单的响应事件是写在渲染进程中的，也就是写在index.html中的，所以要是使用，就用到到remote模块进行操作了。

先来看看右键的相应事件，我们打开render文件夹，然后打开demo2.js文件，编写一个右键菜单的监听事件，代码如下：

window.addEventListener('contextmenu',function(){
    alert(111);
})

当我们要使用Menu模块,它是主线中的模块，如果想在渲染线程中使用，就必须使用remote。代码如下：

const { remote} = require('electron')

var rigthTemplate = [
    {label:'粘贴'},
    {label:'复制'}
]

var m = remote.Menu.buildFromTemplate(rigthTemplate)



window.addEventListener('contextmenu',function(e){

    //阻止当前窗口默认事件
    e.preventDefault();
    //把菜单模板添加到右键菜单
    m.popup({window:remote.getCurrentWindow()})

})

在就可以有右键菜单了，我们可以在终端中输入electron .打开程序进行测试。

三、程序打开调试模式

由于我们已经定义了顶部菜单，没有了打开调试模式的菜单了，这时候可以使用程序来进行打开。在主进程中加入这句代码就可以了。

mainWindow.webContents.openDevTools()

全部代码如下:

var electron = require('electron') 

var app = electron.app   

var BrowserWindow = electron.BrowserWindow;

var mainWindow = null ;
app.on('ready',()=>{
    mainWindow = new BrowserWindow({
        width:500,
        height:500,
        webPreferences:{ nodeIntegration:true}
    })
    mainWindow.webContents.openDevTools()

    require('./main/menu.js')

    mainWindow.loadFile('demo2.html')

    mainWindow.on('closed',()=>{
        mainWindow = null
    })

})

这样就实现了打开窗口，直接进入调试模式，极大的提高了调试效率。