客户端开发（Electron）系统级API使用2

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

监听快捷键：

实现网页按键事件的监听：

当我们在开发PC端网站时就可能会用到快捷键事件的监听处理，XDM有用到过吗？防止别人扒网页或者调试你的JavaScript页面的时候我们就会禁用调开发者工具，我们实现网页按键事件监听就和禁用调试开发者工具一样。

image.png

图中的代码通过监听onkeydown事件，来判断按键是否同时满足ctrl+s（ascll码），mateKey值Mac系统的花键。这种监听快捷键的特点是只能在窗口处于激活的时候才能触发，但你会发现我们使用系统的一些快捷键是可以唤醒应用的，那这种非激活状态应用的快捷键监听就只能通过Electron提供的系统级API来实现了。

实现全局按键事件的监听：

     我们在使用电脑软件时也遇到过快捷键冲突的问题，我们总是要更改一个新的快捷键来使用，那我们给应用注册一个全局快捷键监听的时候也要考虑是否避免常见的快捷键，或者我们在注册前就预先检测是否已被占用了。

1. 注册的函数：globalShortcut.register('快捷键', '回调函数')
2. 反注册函数：globalShortcut.unregister('快捷键')
3. 判断是否被注册：globalShortcut.isRegistered('快捷键') 案例1：监听ctrl+k：

image.png

案例2：监听ctrl+shift+k：

image.png

案例3：监听ctrl+shift+数字键盘8：

image.png

注：监听最好在主进程中注册，在渲染进程注册可能会导致主进程异常，从而监听不到按键事件。 托盘图标的设置： 托盘图标指的就是在电脑底部的任务栏右侧经常会闪动的QQ头像，还有快捷设置离线状态的菜单等，我们就用Electron的API来实现一下这两个小功能吧。 注册并时图片闪烁：

1. 通过简单的API就可以实现注册托盘：new Tray(path)，我们注册了一个安卓小logo。

image.png

1. 闪烁的实现我们可以通过定时切换两种图片来实现：

image.png

GIF 2022-2-14 22-28-06.gif

托盘菜单设置：

菜单的创建和前一篇是一致的，我们同样适用的Electron提供的Menu对象，我们这次是将Menu的配置设置到实例化后的tray对象中。

image.png

总结：

本篇学习了在客户端应用中监听按键实现快捷键的两种方式，但也要注意避免快捷键的冲突和滥用，也学习了常见的托盘图标的设置和菜单的设置，知道了我们如何在有新消息送达时和QQ一样来闪烁起来，学习阶段化繁为简，实战时大刀阔斧，加油各位XDM。