electron 页面Menu、鼠标右键Menu和自定义快捷键globalShortcut

最新推荐文章于 2024-08-05 15:43:22 发布

weixin_46852620

最新推荐文章于 2024-08-05 15:43:22 发布

阅读量530

点赞数

分类专栏：学习electron

本文链接：https://blog.csdn.net/weixin_46852620/article/details/111831531

版权

学习electron 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

electron menu模块

const { app, BrowserWindow, globalShortcut } = require('electron')
const path = require('path')
var mainWindow = null // 声明要打开的主窗口
const { Menu } = require('electron')

app.on('ready', () => {
  // 设置窗口的高度和宽度
  mainWindow = new BrowserWindow({
    width: 800,
    height: 800,
    webPreferences: {
      nodeIntegration: true, // 设置开启nodejs环境
      enableRemoteModule: true // enableRemoteModule保证renderer.js可以可以正常require('electron').remote，此选项默认关闭且网上很多资料没有提到
    }
  })
  // 加载 指定路径的页面
  mainWindow.loadFile('./src/index.html')
  // 菜单的配置
  var menuTemplate = [
    {
      label: '菜单1',
      submenu: [{
        label: '菜单11', // 子菜单的名字
        accelerator: 'ctrl+1', // 菜单的快捷键
        click: () => { // 点击 菜单触发的事件
          var newWin = new BrowserWindow({
            width: 400,
            height: 400,
            webPreferences: {
              nodeIntegration: true, // 设置开启nodejs环境
              enableRemoteModule: true // enableRemoteModule保证renderer.js可以可以正常require('electron').remote，此选项默认关闭且网上很多资料没有提到
            }
          })
          const pagePath = path.resolve(__dirname, './src/html/subPage.html')
          newWin.loadFile(pagePath)
          // 开启窗口之后，需要定义关闭窗口指针为空，防止内存溢出
          newWin.on('close', () => {
            newWin = null
          })
        }
      }, { label: '菜单11' }]
    },
    {
      label: '菜单2',
      submenu: [{ label: '菜单21' }, { label: '菜单22' }]
    }
  ]
  // 根据配置信息创建 menu 对象
  var menuObj = Menu.buildFromTemplate(menuTemplate)
  // 将对象作用当当前应用中
  Menu.setApplicationMenu(menuObj)
  
  // 全局注册 快捷键
  globalShortcut.register('ctrl+x', function() {
    console.log('ctrl+x is pressed')
  })

  // 开启渲染进程中的调试模式
  mainWindow.webContents.openDevTools()
  // 监听窗口关闭 销毁引用
  mainWindow.on('closed', () => {
    mainWindow = null
  })
})

// 退出的时候，注销所有的快捷键
app.on('will-quit', function() {
  console.log('unregister "ctrl+x"')
  // Unregister a shortcut.
  globalShortcut.unregister('ctrl+x')

  // Unregister all shortcuts.
  globalShortcut.unregisterAll()
})

知识点说明：

1.菜单快捷键的配置属性是 accelerator
2.全局注册需要使用require(‘electron’).globalShortcut
3.MenuItem 是在主进程中渲染的
4.退出窗口的事件是will-quit，在此回调函数中需要注销对应的快捷键，防止快捷键一直被占用

鼠标右键菜单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>first electron</title>
</head>
<body>
  
</body>
<script src="./js/readFile.js"></script>
<script>
// 定制鼠标右键菜单
const {remote, clipboard } = require('electron');
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;

// 定制右键菜单
var menu = new Menu();
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log('item 1 clicked'); } }));
// 分割线
menu.append(new MenuItem({ type: 'separator' }));
// 多选，是被选中的状态
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));

window.addEventListener('contextmenu', function (e) {
  // 要阻止默认鼠标右键的事件，然后处理自身的逻辑
  e.preventDefault();
  menu.popup(remote.getCurrentWindow());
}, false)

  </script>
</html>

如何重新加载修改代码和打开调试工具的Menu？

如果自定menu之后，则开发者工具和重新加代码的能力就消失了，解决办法是 —— 还原这两个菜单，配置如下

  // 菜单的配置
  var menuTemplate = [
    {
      label: 'tools',
      submenu: [
        {
          label: 'Reload', // 重新加载代码
          accelerator: 'CmdOrCtrl+R',
          click: function (item, focusedWindow) {
            if (focusedWindow) {
              focusedWindow.reload()
            }
          }
        },
        {
          label: 'Toggle Developer Tools', // 打开开发者工具
          accelerator: (function() {
            if (process.platform === 'darwin') { return 'Alt+Command+I' } else { return 'Ctrl+Shift+I' }
          })(),
          click: function(item, focusedWindow) {
            if (focusedWindow) { focusedWindow.toggleDevTools() }
          }
        }
      ]
    }
  ]

weixin_46852620

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
electron 页面Menu、鼠标右键Menu和自定义快捷键globalShortcut

electron menu模块const { app, BrowserWindow, globalShortcut } = require('electron')const path = require('path')var mainWindow = null // 声明要打开的主窗口const { Menu } = require('electron')app.on('ready', () => { // 设置窗口的高度和宽度 mainWindow = new BrowserWi
复制链接

扫一扫

专栏目录