Electron 制作右键菜单

Question

一、菜单快捷键绑定

绑定快捷键的属性是 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
  })

})

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