electron快捷键
- 我们分为在主进程中注册快捷键和在渲染进程中注册快捷键
- 在主进程中我们有两种方式
一 利用[Menu]来模拟快捷键,只有app获得焦点时才生效,很少使用
const { Menu, MenuItem } = require('electron')
const menu = new Menu()
menu.append(new MenuItem({
label: 'Print',
accelerator: 'CmdOrCtrl+P',
click: () => { console.log('time to print stuff') }
}))
二 就是全局快捷键（意思就是不强求app获得焦点）,r所以这就不是模拟菜单事件了，我们要监听键盘，因为快捷键的根本操作就是响应键盘的按键
我们可以用globalShortcut来实现
- 引用globalShortcut模块
const { app, BrowserWindow, ipcMain, globalShortcut } = require('electron');
- 注册快捷键（在mac10.14 上，客户端没有被信任操作音视频的快捷键失效
const ret = globalShortcut.register('CommandOrControl+X', () => {
console.log('CommandOrControl+X is pressed')
});
- 检测是否注册成功
if (!ret) {
console.log('registration failed')
}
// 检查快捷键是否注册成功
console.log(globalShortcut.isRegistered('CommandOrControl+X'))
- 注销快捷键
app.on('will-quit', () => {
// 注销快捷键
globalShortcut.unregister('CommandOrControl+X')
// 注销所有快捷键
globalShortcut.unregisterAll()
})
2.在渲染进程中我们也有二种方式
一 可以利用浏览窗口监听键盘事件,这是一种常规的方式，自己判断什么键按下
window.addEventListener('keyup', doSomething, true)
注意第三个参数 true，这意味着当前监听器总是在其他监听器之前接收按键，以避免其它监听器调用 stopPropagation()。
二 我们可以利用第三方模块比如MOUSETRAP
- 安装模块,我们也可以用Script标签引入
npm install mousetrap --save
- 使用(我们在html页面引入index.js文件，文件内容如下)
const Mousetrap = require('mousetrap');
// #region 快捷键
// single keys
Mousetrap.bind('esc', () => {
console.log('escape');
}, 'keyup');
Mousetrap.bind('4', () => {
console.log('4');
})
Mousetrap.bind("?", () => {
console.log('show shortcuts!');
});
// combinations
Mousetrap.bind('command+shift+k', () => {
console.log('command shift k');
});
// map multiple combinations to the same callback
Mousetrap.bind(['command+k', 'ctrl+k'], () => {
console.log('command k or control k');
// return false to prevent default browser behavior
// and stop event from bubbling
return false;
});
// gmail style sequences
Mousetrap.bind('g i', () => {
console.log('go to inbox');
});
Mousetrap.bind('* a', () => {
console.log('select all');
});
// konami code!
Mousetrap.bind('up up down down left right left right b a enter', () => {
console.log('konami code');
});
// #endregion
- 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-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>This is test pag!</p>
<script type="text/javascript" src="./views/js/index.js"></script>
</body>
</html>
开发工作中如果要主进程响应的就用全局快键盘，如果是页面中的快键操作，就可以直接用mousetrap。
electron快捷键的更多相关文章
- 从零开始学Electron笔记（四）
在之前的文章我们介绍了一下Electron的这个remote模块,接下来我们继续说一下Electron的右键菜单的制作. 在我们日常我们使用的软件中都会存在右键菜单的情况,比如我们用到的浏览器,开发所 ...
- Electron 项目在 Mac 下复制和粘贴快捷键失效的解决办法
公司的一个项目需要开发跨平台,由于整个项目完全由我一个人开发,本人也是初次接触 Electron,开发过程中遇到了不少坑,同样的代码 Windows 下复制和粘贴没有问题,Mac 下复制和粘贴失效,在 ...
- 使用electron为贪吃蛇游戏创建全局快捷键
上图就是我们的简体版贪吃蛇游戏,我们可以看到使用键盘上面的上下左右可以对贪吃蛇进行控制. The picture above is our simplified version of Snake Ea ...
- 【Electron】Electron开发入门（二）：创建项目Hello Word
创建简单的Electron程序 1.首先,切换到你的项目空间,我的在 D:\ProjectsSpace\ElectronProjects\ElectronTest,ElectronTest是案例项目文 ...
- 现在,以编程方式在 Electron 中上传文件,是非常简单的!
必要的上下文 想尽快熟悉上下文语境的,可以点这里: https://github.com/electron/electron/issues/749 这段讨论,其实本来是讨论如何自动设置 input 标 ...
- electron + vue 实践项目
github地址 本地安装环境准备 安装node: * https://nodejs.org/en/download/ 配置webpack: npm install -g webpack(sudo权限 ...
- electron 学习笔记
一.快速搭建一个electron 项目结构 # 克隆示例项目的仓库 $ git clone https://github.com/electron/electron-quick-start # 进入这 ...
- Electron: 从零开始写一个记事本app
Electron介绍 简单来说,Electron就是可以让你用Javascript.HTML.CSS来编写运行于Windows.macOS.Linux系统之上的桌面应用的库.本文的目的是通过使用Ele ...
- 关于electron的跨域问题，有本地的图片的地址，访问不了本地的图片
项目中有上传图片功能,自定义input type=file 改变透明度和超出部分隐藏,把按钮和 点击的图标放在上传文件的按钮上面,然后又碰到到获取input里面的图片的本地的路径, 在electron ...
随机推荐
- [Pandas] 02 - Tutorial of NumPy
Ref: NumPy 教程 这里主要是查缺补漏一些常用方法. 初步认识 矩阵常见知识点 矩阵操作 Ref: [Python] 01 - Number and Matrix[总结过一部分] 一.矩阵 ( ...
- Mac搭建pyhton+selenium+pycharm实现web自动化测试
安装pip或者安装pip3: sudo easy_install pip 二选一安装 sudo easy_install python3-pip 安装selenium: sudo pip3 insta ...
- 搭建大数据开发环境-Hadoop篇
前期准备 操作系统 hadoop目前对linux操作系统支持是最好的,可以部署2000个节点的服务器集群:在hadoop2.2以后,开始支持windows操作系统,但是兼容性没有linux好.因此,建 ...
- OpenGL在ubuntu下的成功配置
sudo apt-get update sudo apt-get install build-essential sudo apt-get install libgl1-mesa-dev sudo a ...
- JAVA Atm测试实验心得
通过一个假期的自学,完成了老师布置的样卷任务.使用Escipse编写一个学生成绩的管理系统. 一开始两眼摸黑,通过观看Java课程的视频,地址:https://www.bilibili.com/vid ...
- Redis数据库之服务器主从配置
目的 主要培养对分布式REDIS主从复制架构运用的能力.理解并掌握REPLICATION工作原理的同时,能独立配置Replication ,使数据库运行在主从架格上.针对主从复制架构的运用,着力掌握S ...
- thymeleaf 语法
一.语法: 1. 简单表达式 (simple expressions) ${...} 变量表达式 *{...} 选择变量表达式 #{...} 消息表达式 @{...} 链接url表达式 2.字 ...
- Docker系列（五）：.Net Core实现k8s健康探测机制
k8s通过liveness来探测微服务的存活性,判断什么时候该重启容器实现自愈.比如访问 Web 服务器时显示 500 内部错误,可能是系统超载,也可能是资源死锁,此时 httpd 进程并没有异常退出 ...
- Event Hub小白入门指南
Event Hub事件中心 本文的目的在于用最白的大白话,让你从“完全不懂”开始,理解什么是分布式大数据流平台Event Hub,并且理解它的关键概念,并且初步理解其收发数据API. 定义,Event ...
- ThinkPHP5实现定时任务
ThinkPHP5实现定时任务 最近使用ThinkPHP5做了个项目,项目中需要定时任务的功能,感觉有必要分享下 TP5做定时任务使用到command.php的 步骤如下: 1.配置command.p ...