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

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

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



监听快捷键:



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

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


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

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

  1. 注册的函数:globalShortcut.register('快捷键', '回调函数')
  2. 反注册函数:globalShortcut.unregister('快捷键')
  3. 判断是否被注册:globalShortcut.isRegistered('快捷键')

案例1:监听ctrl+k:

2.png


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

3.png


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

4.png注:监听最好在主进程中注册,在渲染进程注册可能会导致主进程异常,从而监听不到按键事件。


托盘图标的设置:


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


注册并时图片闪烁:

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

5.png

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

6.png7.png


托盘菜单设置:

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


总结:


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


相关文章
|
22天前
|
数据采集 搜索推荐 API
小红书笔记详情 API 接口的开发、应用与收益
小红书(RED)作为国内领先的生活方式分享平台,汇聚了大量用户生成内容(UGC),尤其是“种草”笔记。小红书笔记详情API接口为开发者提供了获取笔记详细信息的强大工具,包括标题、内容、图片、点赞数等。通过注册开放平台账号、申请API权限并调用接口,开发者可以构建内容分析工具、笔记推荐系统、数据爬虫等应用,提升用户体验和运营效率,创造新的商业模式。本文详细介绍API的开发流程、应用场景及潜在收益,并附上Python代码示例。
195 61
|
8天前
|
存储 API 文件存储
单页图床HTML源码+本地API接口图床系统源码
图床系统是一种用于存储和管理图片文件的在线服务。它允许用户上传图片文件,并生成相应的图片链接,从而方便用户在网页、社交媒体或其他平台上分享图片。
22 2
单页图床HTML源码+本地API接口图床系统源码
|
17天前
|
人工智能 Rust 安全
DeepClaude:结合 DeepSeek R1 和 Claude AI 各自优势开发的 AI 应用平台,支持 API 调用和零延迟的即时响应
DeepClaude 是一个开源的 AI 应用开发平台,结合了 DeepSeek R1 和 Claude 模型的优势,提供即时响应、端到端加密和高度可配置的功能。
252 4
DeepClaude:结合 DeepSeek R1 和 Claude AI 各自优势开发的 AI 应用平台,支持 API 调用和零延迟的即时响应
|
17天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
50 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
3天前
|
Cloud Native 安全 Serverless
云原生应用实战:基于阿里云Serverless的API服务开发与部署
随着云计算的发展,Serverless架构日益流行。阿里云函数计算(Function Compute)作为Serverless服务,让开发者无需管理服务器即可运行代码,按需付费,简化开发运维流程。本文从零开始,介绍如何使用阿里云函数计算开发简单的API服务,并探讨其核心优势与最佳实践。通过Python示例,演示创建、部署及优化API的过程,涵盖环境准备、代码实现、性能优化和安全管理等内容,帮助读者快速上手Serverless开发。
|
20天前
|
缓存 Java 应用服务中间件
java语言后台管理若依框架-登录提示404-接口异常-系统接口404异常如何处理-登录验证码不显示prod-api/captchaImage 404 (Not Found) 如何处理-解决方案优雅草卓伊凡
java语言后台管理若依框架-登录提示404-接口异常-系统接口404异常如何处理-登录验证码不显示prod-api/captchaImage 404 (Not Found) 如何处理-解决方案优雅草卓伊凡
70 5
|
23天前
|
供应链 搜索推荐 数据挖掘
阿里巴巴热卖商品推荐 API 接口的开发、应用与收益
阿里巴巴热卖商品推荐API为开发者提供了获取平台热卖商品信息的强大工具,涵盖商品标题、价格、销量等数据。通过注册开放平台账号、申请API权限并调用接口,开发者可构建热卖商品推荐系统、数据分析工具及供应链管理系统等应用,提升用户体验与运营效率,创造新的商业模式。该API采用RESTful风格,支持多种应用场景,助力电商从业者实现创新与增值。
116 7
|
25天前
|
供应链 数据挖掘 API
1688APP 原数据 API 接口的开发、应用与收益
1688作为阿里巴巴旗下的B2B平台,汇聚海量供应商和商品资源。其APP原数据API接口为开发者提供获取商品详细信息的强大工具,涵盖商品标题、价格、图片等。通过注册开放平台账号、申请API权限并调用接口,开发者可构建比价工具、供应链管理及自动化上架工具等应用,提升用户体验与运营效率,创造新的商业模式。示例代码展示了如何使用Python调用API并解析返回结果。
98 8
|
23天前
|
搜索推荐 数据挖掘 API
亚马逊详情 API 接口的开发、应用与收益
亚马逊详情API接口是亚马逊开放平台提供的强大工具,允许开发者编程获取商品的详细信息,如标题、价格、描述等。通过注册账号、申请权限并调用API,开发者可构建比价工具、推荐系统和数据分析工具等应用,提升用户体验与运营效率,创造新商业模式。本文详细介绍其开发流程、应用场景及潜在收益,并附代码示例。
48 6
|
2月前
|
人工智能 移动开发 JavaScript
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
223 18

热门文章

最新文章