Electron 有全局快捷键和局部快捷键设置功能供大家方便地使用。如果是我们遇到的业务都是写死快捷键，那么也就不需要有这篇文章了，但事实上，我们往往会需要遇到重设设快捷键的需求，那么这时如何设计整个快捷键实现逻辑才比较优雅呢？这篇文章整理了多译的快捷键设计思路。
在 Electron 中，我们需要打交道的主要是 globalShortcut 模块，可以让我们方便地注册快捷键和注销快捷键。
先简单梳理一下和快捷键相关的程序运行逻辑，整个流程大致为两个环节：全局快捷键初始化和用户对快捷键修改。
全局快捷键初始化
全局快捷键初始化分两步：1、注册已有快捷键，2、监听快捷键注册和注销。
注册已有快捷键的逻辑很简单，就是根据存储的快捷键数据集绑定对应的功能。
而监听快捷键的则用于重新绑定快捷键。
注册快捷键
第一步需要我们定义好快捷键数据集，这个数据集需要我们持久化存储。
// shortcut.ts
const shortcut = {
TRANSLATE: process.platform === 'darwin' ? 'CmdOrCtrl+`' : 'F6',
SHOW: 'CmdOrCtrl+alt+`',
PREFERENCE: process.platform === 'darwin' ? 'CmdOrCtrl+,' : 'CmdOrCtrl+alt+S',
};
第二步则需要我们再定义对应的功能数据集，这数据集存储我们需要的函数功能。
// shortcutFn.ts
export default {
TRANSLATE: async () => {
// 翻译功能函数
},
SHOW: () => {
// 显示函数
},
PREFERENCE: () => {
// 偏好设置函数
},
};
最后将其导入并完成快捷键注册
// shortcutInit.ts
import shortcutFn from './shortcutFn';
import shortcut from './shortcut';
export default () => {
globalShortcut.register(shortcut.TRANSLATE, () => {
shortcutFn.TRANSLATE();
});
globalShortcut.register(shortcut.SHOW, () => {
shortcutFn.SHOW();
});
// ...
};
当然如果快捷键数量很多，可以考虑使用 map 的方式来完成注册。（如果遇到回调函数，可以考虑改变 shortcutFn 的结构，做对应的判断进行注册）
// shortcutInit.ts
import shortcutFn from './shortcutFn';
import shortcut from './shortcut';
const shortcutArray = Object.entries(shortcut); // 将对象转变为数组格式
export default () => {
shortcutArray.map((shortcutItem) => {
const [ key , value ] = shortcutItem; // 取出快捷键Key value
globalShortcut.register(value, shortcutFn[ ]); // 将快捷键 Key 对应功能注册给对应的快捷键值
});
};
最后在main/index.ts 中完成快捷键注册。
// main/index.ts
import shortcutInit from './shortcutInit';
app.on('ready', () => {
// ....
shortcutInit();
// ...
})
监听快捷键注册和注销
因为我们已经初始化对应的全局快捷键了，所以在用户实际修改快捷键的过程中，如果不进行注销，程序将直接执行对应的功能，renderer 窗口无法捕捉到对应被按下的键。
因此我们需要创建监听函数，当接收到注销或者注册新号时，完成对应快捷键的注销和注册。
这一步，我们可以集成进之前的 shortcutInit.ts 文件中。
网友评论