客户端开发(Electron)系统级API使用2

Posted 前端小鑫同学

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了客户端开发(Electron)系统级API使用2相关的知识,希望对你有一定的参考价值。


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


     Electron是一个使用 javascripthtml 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

监听快捷键:

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

     当我们在开发PC端网站时就可能会用到快捷键事件的监听处理,XDM有用到过吗?防止别人扒网页或者调试你的JavaScript页面的时候我们就会禁用调开发者工具,我们实现网页按键事件监听就和禁用调试开发者工具一样。客户端开发(Electron)系统级API使用2_Electron     图中的代码通过监听​onkeydown​事件,来判断按键是否同时满足​ctrl​+​s​(ascll码),​mateKey​值​Mac​系统的花键。这种监听快捷键的特点是只能在窗口处于激活的时候才能触发,但你会发现我们使用系统的一些快捷键是可以唤醒应用的,那这种非激活状态应用的快捷键监听就只能通过Electron提供的系统级API来实现了。

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

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

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

客户端开发(Electron)系统级API使用2_按键事件_02

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

客户端开发(Electron)系统级API使用2_Electron_03

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

客户端开发(Electron)系统级API使用2_Electron_04注:监听最好在主进程中注册,在渲染进程注册可能会导致主进程异常,从而监听不到按键事件。

托盘图标的设置:

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

注册并时图片闪烁:

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

客户端开发(Electron)系统级API使用2_托盘图标_05

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

客户端开发(Electron)系统级API使用2_Electron_06客户端开发(Electron)系统级API使用2_前端_07

托盘菜单设置:

     菜单的创建和前一篇是一致的,我们同样适用的Electron提供的Menu对象,我们这次是将Menu的配置设置到实例化后的​tray​对象中。客户端开发(Electron)系统级API使用2_快捷键_08

总结:

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


欢迎关注我的公众号“前端小鑫同学”,原创技术文章第一时间推送。

以上是关于客户端开发(Electron)系统级API使用2的主要内容,如果未能解决你的问题,请参考以下文章

electron调用摄像头直播

使用Electron开发PC客户端----入门篇

electron——通知

electron——通知

使用Electron开发PC客户端

使用electron开发一个h5的客户端应用创建http服务模拟后台接口mock