如何在electron中注册快捷键?

1.为什么要注册快捷键

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

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

2.前置操作

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

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

3.挂载快捷键

js 复制代码

// ...应用初始化完毕,下面开始挂载快捷键
// 使用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));

4.逻辑解析

这里将所有的快捷键以及对应的处理函数存放到一个对象中,通过key:value的形式一一对应,方便进行挂载
在应用初始化完成后才进行快捷键的挂载,这是因为快捷键挂载是需要一个应用主窗口对象的,表示快捷键挂载到哪个主窗口,所以要初始化之后才能挂载
注意需要在窗口关闭时取消所有注册的快捷键

5.总结

之前已经出过一篇注册快捷键的博客了,为什么还需要再出一个呢?

因为之前注册快捷键的方法是依托于electron内部的js代码的,通过js代码进行处理,这一步骤多了一个与electron渲染现场通信的流程,并且限制较多,在评论中有个朋友指出了这个问题,在此感谢批评!

补充

如果大家有更好,更方便,更高效的方法欢迎私信或评论区讨论,接受批评才能进步!😁