如何在Electron中使用键盘控制库

最新推荐文章于 2024-03-06 16:47:44 发布
VIP文章 最新推荐文章于 2024-03-06 16:47:44 发布
阅读量4k 收藏 6
点赞数 2
分类专栏： electron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011554976/article/details/107121927
版权

如何在Electron中使用键盘控制库

关键词: electron ,vue,robotjs,ihook

最近闲来无事，看按键精灵极其不顺眼，但是没办法，快速创建脚本还是觉得按键精灵方便，但是在逻辑上实在是很难操作，因为它的语法很怪（我觉得除了注释符号都一样之外其他都不一样！），曾经尝试在脚本中加个标志判断（没错，就是判断是不是收藏品，ff14警告），捣鼓了20分钟的if语法和用户变量，最后还是失败了。于是就准备自己撸一个带界面的脚本工具，其实脚本逻辑都很简单，界面的搭建也很简单，重点就是在于键盘的控制方面，看了一下python的库很丰富也很简单，但是QT我真的没学过，于是想到了曾经使用过一次的electron，作为目前非常火的基于Nodejs桌面端开发框架，我觉得它应该没有问题（maybe）

既然使用Electron，那么自然需要使用JS的键盘库，so，我找到了robotJs

基于robotJs，还有一个比较火的再封装库叫iohook

一个是键盘自动化操作库，一个是按键监听库，功能齐全，语义简便，于是我尝试了cnpm install，果然事情没有那么顺利，出问题了。

由于robotJs中的代码大多数是c，所以需要重新打包成electron支持的库，问题就出现在打包上。它必须和electron的版本进行匹配

最低0.47元/天 解锁文章
正经男大学生BRLF
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
K_Macros:一个由React和Electron制作的简单的键盘宏桌面应用程序
05-25
K-宏 一个由React和Electron制作的简单键盘宏桌面应用程序。 怎么跑 导航到项目的根文件夹，然后运行npm start以在开发人员模式下运行。 要构建生产版本，请在项目的根文件夹中运行npm run electron-pack 。 这个怎么运作 用户添加他们想要的键盘宏，并以json格式存储。 该应用程序使用ioHook监听电子主线程上的键盘事件。 如果检测到注册的宏，则检索对应的键映射并以编程方式按下该键映射。 DFS图形遍历用于检测给定宏序列中的任何循环。 例如：假设以下宏序列1 -> 2 -> 3 -> 2 显然，此宏序列包含一个循环，可能会引起问题。 这可以通过对宏建模来解决排序成有向图，然后使用DFS遍历检查是否两次访问了节点。 屏幕截图 未来的工作 使用Robotjs软件包代替当前使用的软件包。 消除100ms引入的延迟。 添加更多设置和建议的选项。
使用Electron构建桌面应用
02-24
即使在移动端和云端大行其道而，桌面端日渐落末的现在，我的心中仍然为桌面应用留有一个特殊的位置。和Web应用比起来桌面应用的优点还是很多的：只要把它们放在开始菜单栏或者dock上，你就能随时打开它们；还可以通过alt-tab或者cmd-tab切换应用；和操作系统之间的交互更良好（快捷键，通知栏等）。使用JavaScript开发桌面应用意味着在打包（packageapplication）的时候你会需要根据操作系统的不同发出不同的命令。这一行为是将原生桌面应用兼容不同平台的概念抽象出来，方便维护应用。现在，我们可以借助Electron或者NW.js开发一个桌面应用。其实这两者提供的或多或少差不多的特
electorn实现调用windows系统软键盘
最新发布
m0_57005111的博客
03-06 468
触发windows虚拟键盘及修改软盘大小
JS实现电脑虚拟键盘的操作
11-20
本文实例为大家分享了JS实现电脑虚拟键盘的具体代码，供大家参考，具体内容如下 需求： 1.当输入框光标聚焦时，电脑虚拟键盘弹出 2.在输入框输入内容时，键盘跟着变化 具体实现代码如下： Html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compa
Electron 调用C# 动态库DLL
09-13
使用electron-edge-js组件调用dll文件的对应方法。
Electron中通过globalShortcut实现监听键盘事件进而实现快捷键功能示例代码.zip
06-03
Electron中通过globalShortcut实现监听键盘事件进而实现快捷键功能示例代码;Electron中通过globalShortcut实现监听键盘事件进而实现快捷键功能示例代码
Electron + Vue 实现输入法自动刷字数
biaov
12-19 1969
Electron + Vue 实现输入法自动刷字数
Electron 窗口吸附和模拟按键操作示例
weixin_37737765的博客
07-27 1309
模块来获取当前操作系统的活跃窗口信息，并通过判断活跃窗口的名称来决定是否需要进行窗口吸附操作。然后，我们通过遍历所有窗口，将当前主窗口移动到活跃窗口的旁边，实现窗口吸附效果。现在，我们已经成功实现了窗口吸附和模拟按键操作的功能。启动应用，你将看到窗口能够自动吸附在其他窗口的旁边，并且在输入框中可以通过粘贴按钮和发送按钮来实现模拟按键操作。应用程序窗口将会打开，你可以在输入框中输入文本，并通过点击粘贴按钮或发送按钮来触发相应的功能。中监听操作系统当前活跃窗口的信息，并判断是否需要进行窗口吸附。
【electron】监听快捷键打开新窗口
qq_45406325的博客
11-05 545
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。
electron引入iohook来监听系统全局键盘鼠标事件-踩坑记录解决xxx\builds\electron-v70-win32-x64\build\Release\iohook.node报错
非完美主义的博客
11-23 2332
这一大推报错信息属实看得脑壳疼、这个时候我们根据报错信息去看下node_modules下的[email protected]这个包、摁~找到问题原因了、这个包下面确实缺失builds文件夹及以下的关键文件。然后再运行程序、完美！程序正常运行无报错、控制台也能打印出监听得到的信息、好了可以开启我们的自由发挥时刻了！这个时候只能尝试手动导入这个builds文件夹了、去github上下载依赖资源、进入到。好、一切都正常进行、最后在main.js插入以下代码来验证下。在一切都有条不紊的进行中意外发生了、窗口报错了。
electron中引入iohook来监听系统级鼠标键盘事件
热门推荐
hhy1006894859的博客
10-13 1万+
iohook官网：https://wilix-team.github.io/iohook/usage.html https://nodejs.ctolib.com/article/releases/98298 本人项目的版本号：electron5.0.0node12.16.1 一、准备工作 使用node-abi来获取electron和node对应的abi版本 npm install node-abi --save-dev console.log(nodeAbi.getAbi('12.16..
electron中使用bootstrap的示例代码
10-17
主要介绍了electron中使用bootstrap的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于node-bindings无法在Electron中使用的解决办法
10-17
今天小编就为大家分享一篇关于关于node-bindings无法在Electron中使用的解决办法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
Electron中通过globalShortcut实现监听键盘事件进而实现快捷键功能
BADAO_LIUMANG_QIZHI的博客
06-03 3963
场景 用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106413828 Electron怎样进行渲染进程调试和使用浏览器和VSCode进行调试： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106414541 在上面搭建好项目以及知道怎样进行调试后，那
Electron学习之旅2，bootstrap小记，全局监听键盘事件，useRef（记值、获取节点)，react-fontawesome，清除黄色边框，状态提升，解构拿事件对象，classnames
qq_40196738的博客
11-27 1046
1、全局监听键盘事件 // 避免组件的重复监听 document.addEventListener('keyup', handleInputEvent); 2、useRef 使react提供的hook，用于记录值或节点。 let number = useRef(1); number.current++; // 计数累加2,3,4... let node = useRef(null); cons...
Electron学习之旅5，dialog模块，path模块取文件名，Menu模块，元素contains以及类名contains，data-*存储信息，hooks存在数据闭包
qq_40196738的博客
12-01 497
Dialog模块 1、dialog.showOpenDialog
electron-vue中调用系统屏幕键盘（linux与windows）
前端小白
06-10 7950
文章目录应用场景实现思路具体代码结尾 应用场景 公司项目需要放在一体机上，没有外接键盘与鼠标，并且要求客户端软件全屏。因此在某些需要输入中文的地方，使用系统自带的屏幕键盘无疑是最好的选择。 实现思路 由于electron-vue是采用的electron2.0.4，因此我们可以在渲染进程中随便调用node.js API.而无需其他的配置。 因为要兼容linux与windows两个平台。因此需要借助node的os模块 因为需要使用子进程打开屏幕键盘，因此需要借助node的child_process模块 通过以上
Windows7下ELectron应用的Input输入框在拼音输入中的失焦问题?
湖北太米网络科技有限公司
11-22 430
Windows7下ELectron应用的Input输入框在拼音输入中的失焦问题主要是为了解决虚拟键盘(使用的simple-keyboard)的拼音输入问题(Windows自带的虚拟键盘因为不够方便和美观，所以没有采用；simple-keyboard其实也支持拼音输入，但是更不好用)，最后决定通过Koffi(ffi,ffi-...
electron在vue中使用electron-log
07-14
### 回答1： Electron是一个用于构建跨平台桌面应用程序的开源框架，而Vue是一个前端框架，用于构建用户界面。在Vue中使用Electron时，可以通过引入electron-log来处理日志。 electron-log是一个基于Electron的日志记录库，它提供了一种简单易用的方式来记录和管理应用程序的日志。它可以在Electron主进程和渲染进程中使用。 使用electron-log，我们可以轻松地在Vue中记录日志。首先，我们需要在项目中安装electron-log包。可以通过npm或yarn进行安装：npm install electron-log。 然后，在Vue项目的主进程文件（main.js）中引入electron-log： import log from 'electron-log' 接下来，你可以在Vue的任何组件中使用log对象来记录日志。例如，在某个方法中记录日志： methods: { exampleMethod() { log.info('This is an info log') log.warn('This is a warning log') log.error('This is an error log') } } 这样，当exampleMethod被调用时，相应的日志信息将被记录下来。 此外，electron-log还提供了自定义日志文件的功能，可以配置日志文件的保存路径、日志格式、日期格式等。 综上所述，使用electron-log可以很方便地在Vue中记录和管理日志，为应用程序的开发和调试提供了便利。 ### 回答2： 在Vue中使用electron-log，可以帮助我们在Electron应用程序中管理和记录日志。 首先，我们需要在Vue项目中安装electron-log。可以使用npm或yarn进行安装。在项目的根目录下打开终端，然后运行以下命令进行安装： ``` npm install electron-log ``` 或 ``` yarn add electron-log ``` 安装完成后，我们可以在main.js（Electron主进程）文件中导入electron-log： ```javascript import log from 'electron-log' ``` 接下来，我们可以在Vue应用的主文件（通常是main.js或App.vue）中设置全局日志对象，以便在整个应用程序中使用它： ```javascript Vue.prototype.$log = log ``` 现在，我们可以在Vue组件中使用`this.$log`来访问electron-log的各种功能。 例如，我们可以使用以下函数来记录一些日志信息： ```javascript this.$log.info('This is an info log.') this.$log.error('This is an error log.') this.$log.warn('This is a warning log.') ``` 我们还可以设置日志级别，以决定日志应该显示哪些级别的信息。例如，我们可以在`createWindow`函数中设置日志级别： ```javascript function createWindow() { // ... log.transports.console.level = 'silly' log.transports.file.level = 'silly' // ... } ``` 在上述示例中，我们将日志级别设置为'silly'，这将允许所有级别的日志信息显示在控制台和日志文件中。 通过在Vue中使用electron-log，我们可以更好地管理和记录Electron应用程序的日志，以便进行调试和错误追踪。 ### 回答3： 在Vue中使用Electron和electron-log，可以方便地记录和显示程序的日志信息。 首先，要在Vue项目中安装`electron-log`，可以通过命令行运行`npm install electron-log`来进行安装。 接下来，在Vue的主进程文件（通常是`main.js`）中，引入并配置`electron-log`。可以在文件的开头添加以下代码： ```javascript const log = require('electron-log'); const { app } = require('electron'); // 配置electron-log log.transports.console.level = 'info'; log.transports.file.level = 'info'; log.transports.file.file = `${app.getPath('userData')}/log.log`; log.transports.file.format = '{h}:{i}:{s} {level}: {text}'; log.transports.file.maxSize = 5 * 1024 * 1024; // 限制日志文件大小为5MB // 在Renderer进程中通过global.log访问electron-log global.log = log; ``` 上述代码中，我们将`electron-log`的输出级别设置为`info`，并将日志保存在用户数据目录下的`log.log`文件中。可以根据需要修改输出级别和文件路径。 在Vue组件中，可以直接通过`global.log`来调用`electron-log`的各种方法，例如记录日志、显示弹窗等。下面是一个示例： ```javascript export default { name: 'MyComponent', methods: { logInfo() { global.log.info('This is an information log.'); }, logError() { global.log.error('This is an error log.'); }, showMessageBox() { global.log.info('Displaying a message box.'); global.log.info('I am a message box!'); }, }, }; ``` 在上述示例中，我们分别定义了`logInfo`、`logError`和`showMessageBox`三个方法，分别记录了信息日志、错误日志和显示一个带有自定义文本的弹窗。 通过以上步骤，我们就可以在Vue中方便地使用`electron-log`来记录和显示日志。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值