关于前端:客户端开发Electron系统级API使用2

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

     Electron 是一个应用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到 二进制的 Electron 容许您放弃一个 JavaScript 代码代码库并创立 在 Windows 上运行的跨平台利用 macOS 和 Linux——不须要本地开发 教训。

监听快捷键：

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

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

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

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

     咱们在应用电脑软件时也遇到过快捷键抵触的问题，咱们总是要更改一个新的快捷键来应用，那咱们给利用注册一个全局快捷键监听的时候也要思考是否防止常见的快捷键，或者咱们在注册前就事后检测是否已被占用了。

1. 注册的函数：globalShortcut.register(‘ 快捷键 ’, ‘ 回调函数 ’)
2. 反注册函数：globalShortcut.unregister(‘ 快捷键 ’)

3. 判断是否被注册：globalShortcut.isRegistered(‘ 快捷键 ’)

   案例 1：监听 ctrl+k：

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

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

   
   注：监听最好在主过程中注册，在渲染过程注册可能会导致主过程异样，从而监听不到按键事件。

   托盘图标的设置：

        托盘图标指的就是在电脑底部的任务栏右侧常常会闪动的 QQ 头像，还有快捷设置离线状态的菜单等，咱们就用 Electron 的 API 来实现一下这两个小性能吧。

   注册并时图片闪动：

4. 通过简略的 API 就能够实现注册托盘：new Tray(path)，咱们注册了一个安卓小 logo。

2. 闪动的实现咱们能够通过定时切换两种图片来实现：

托盘菜单设置：

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

总结：

     本篇学习了在客户端利用中监听按键实现快捷键的两种形式，但也要留神防止快捷键的抵触和滥用，也学习了常见的托盘图标的设置和菜单的设置，晓得了咱们如何在有新音讯送达时和 QQ 一样来闪动起来，学习阶段化繁为简，实战时大刀阔斧，加油各位 XDM。

欢送关注我的公众号“前端小鑫同学”，原创技术文章第一工夫推送。