【Electron】vue+electron快捷键设置

一、前言

本文主要介绍electron应用如何注册销毁快捷键、以及如何动态更换快捷键的方式。在一个桌面应用中，快捷键是必不可少的，因为这会极大地方便用户的操作，使之体验更加快捷、美好。

二、实施方案

1.注册快捷键

根据查看electron官方文档，我们可以很快的找到对应快捷键的模块，点击查看详情，其中部分内容如下

globalShortcut 模块可以在操作系统中注册/注销全局快捷键, 以便可以为操作定制各种快捷键。

注意: 快捷方式是全局的; 即使应用程序没有键盘焦点, 它也仍然在持续监听键盘事件。在 app 模块的 ready 事件就绪之前，这个模块不能使用。

// 之前文章提到过得记录日志的工具
import log from './ElectronLog'
const { app, globalShortcut } = require('electron')
app.whenReady().then(() => {// 注册一个'CommandOrControl+X' 快捷键监听器const ret = globalShortcut.register('CommandOrControl+X', () => {// 如果注册成功了，当用户按下该快捷键时，会执行这里的内容console.log('用户按下了 CommandOrControl+X')})if (!ret) {log.warning('CommandOrControl+X -- 快捷键注册失败')}// 检查快捷键是否注册成功console.log(globalShortcut.isRegistered('CommandOrControl+X'))
}) 
1
2
3
4
5

这里我们在程序的ready事件之后去注册快捷键。但是一般情况下，如果我们的应用不希望用户一打开就能使用一些快捷键的话，比如说我们希望用户在登陆成功之后才可以使用截图快捷键，如果遇到这种情况，我们可以在主进程中添加一个注册监听，如下

import { ipcMain, globalShortcut } from 'electron'
// 监听登录成功
ipcMain.on('login', (event, arg) => {// 设置快捷键-截图globalShortcut.register('CommandOrControl+Alt+d', () => {// do something})
}) 
1
2
3
4

2.注销快捷键

这个事情在electron官网中也有写到点击查看详情，具体书写方式如下

const { app, globalShortcut } = require('electron')
app.on('will-quit', () => {// 注销快捷键globalShortcut.unregister('CommandOrControl+X')// 注销所有快捷键globalShortcut.unregisterAll()
}) 
1
2
3

我们在应用退出的时候调用globalShortcut.unregisterAll()这个方法就可以了，该方法会注销所有的全局快捷键（清空该应用程序的所有全局快捷键）。

如果不手动清除这些快捷键的话，它们会一直存在下去，有可能导致其他程序的快捷键无法使用。

3.动态更改快捷键

延续上面的说，比如说你的应用有截图这个功能，我们给了用户默认的截图快捷键指令，一般在应用设置中，也会在多出来一个快捷键设置，如图

这里我们就来讲讲，这里是怎么实现的，但在这之前，要先说明一下，因为截图快捷键这种数据，一般是存储在用户本地的，所以这里我们要引用一个插件localforage，将数据存入本地数据库中。安装方式在之前讲【Electron】vue+electron实现图片视频本地缓存的时候讲过，如此配置下

// 创建一个本地用户数据库表
import localforage from 'localforage'
window.$useInfo = localforage.createInstance({name: 'useInfo'
}) 
1
2
3
4

这里大家也可以使用别的方法，如果要存入到后端数据库的话，就直接调接口就好了。

之后我们开始写页面

// ShortcutKeySettings.vue



 
1
2
3
4
5
6
7
8
9

在主进程中监听

// 修改截图快捷键
ipcMain.on('setShortKeys', (e, data) => {// 注销快捷键globalShortcut.unregister(data.old)// 设置快捷键globalShortcut.register(data.new, () => {// 调用截图方法})
}) 
1
2
3

以上我们就实现了快捷键的动态设置了！