当前位置：首页 > article >正文

如何在electron中注册快捷键?

article 2025/3/20 19:01:32

1.为什么要注册快捷键

关于为什么需要在electron中注册快捷键有多个原因

在调试模式下需要自定义的打开控制台,关闭控制台,刷新页面等等,而直接打开的electron应用是不能像浏览器一样,通过快捷键刷新页面,打开控制台,关闭控制台等等操作
注册快捷键后可以提供更方便的服务提供给用户,提升用户的体验感,操作简便,很多应用都会有快捷键,目的就是为了让用户少动用鼠标来移动点击,可以直接通过键盘来操作软件,这也是

2.前置操作

在electron中注册快捷键需要下载一个库electron-localshortcut

npm i electron-localshortcut

注意点: 挂载快捷键必须要等到应用初始化之后才能挂载

3.挂载快捷键

// ...应用初始化完毕,下面开始挂载快捷键
// 使用require导入localShortcut库
const localShortcut = require('electron-localshortcut');

// 定义快捷键对象,这里的key为快捷键,value为对应的快捷键处理函数
const shortcutKeys = {
      // 控制台开关快捷键(Ctrl+Shift+L)
      'Ctrl+Shift+I': () => {
        // 判断当前是否打开控制台
        const isOpen = mainWindow.webContents.isDevToolsOpened();

        // 根据当前控制台的状态选择关闭/打开控制台
        mainWindow.webContents[isOpen ? 'closeDevTools' : 'openDevTools']();
      },
      // 应用退出/进入全屏快捷键(Ctrl+Shift+F)
      'Ctrl+Shift+F': () => {
        // 判断当前是否全屏
        const isFullScreen = mainWindow.isFullScreen();

        // 根据当前全屏的状态选择退出/进入全屏
        mainWindow.setFullScreen(!isFullScreen);
      },
      // 应用刷新快捷键(Ctrl+Shift+R)
      'Ctrl+Shift+R': () => mainWindow.reload(),
      // 应用刷新快捷键(Ctrl+R)
      'Ctrl+R': () => mainWindow.reload(),
      // 应用刷新快捷键(F5)
      'F5': () => mainWindow.reload()
    }
    
// 循环注册快捷键
Object.keys(shortcutKeys).forEach((item) => localShortcut.register(mainWindow, item, shortcutKeys[item]))

// 窗口关闭时取消所有注册的快捷键
mainWindow.on('close', () => localShortcut.unregisterAll(mainWindow));