西安企业网站大学生网页设计作业
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));
4.逻辑解析
- 这里将所有的快捷键以及对应的处理函数存放到一个对象中,通过key:value的形式一一对应,方便进行挂载
- 在应用初始化完成后才进行快捷键的挂载,这是因为快捷键挂载是需要一个应用主窗口对象的,表示快捷键挂载到哪个主窗口,所以要初始化之后才能挂载
- 注意需要在窗口关闭时取消所有注册的快捷键
5.总结
之前已经出过一篇注册快捷键的博客了,为什么还需要再出一个呢?
因为之前注册快捷键的方法是依托于electron内部的js代码的,通过js代码进行处理,这一步骤多了一个与electron渲染现场通信的流程,并且限制较多,在评论中有个朋友指出了这个问题,在此感谢批评!
补充
如果大家有更好,更方便,更高效的方法欢迎私信或评论区讨论,接受批评才能进步!😁