一文详解Electron 快捷键使用技巧及示例

目录
  • 引言
  • 全局快捷键
    • 其中参数的含义
    • 示例代码
  • 应用快捷键

引言

Electron 中可以设置全局快捷键和应用快捷键,全局快捷键就是注册到系统里面的,全局生效的快捷键;而应用快捷键是指当用户使用该应用程序时才生效的快捷键,它们的实现逻辑是不一样的,接下来就为大家详细介绍。

全局快捷键

Electron 提供的 globalShortcut 模块可以用于注册或取消全局快捷键。使用方法为:

globalShortcut.register(accelerator, callback) // 注册单个快捷键
globalShortcut.registerAll(accelerators, callback) // 批量注册快捷键

其中参数的含义

  • accelerator 必须是有效的快捷键字符串
  • callback 是当注册成功后,用户按下快捷键之后执行的回调函数

有效的快捷键由多个功能键和一个键码中间用加号(+)组合而成,例如:

  • Ctrl + T
  • CmdOrCtrl + Shift + Z

常用的功能键和键码如下,设置快捷键的时候可以从功能键里面选择多个,从键码里面选择一个:

功能键 Cmd、Ctrl、CmdOrCtrl、Alt、Shift、Meta
键码 0~9、A~Z、F1~F24、Space、Tab、Backspace、Delete、Enter、Esc 等

不过有两点需要注意:

  • 如果快捷键字符串无效会直接报错,因此建议在使用此方法的时候加 try catch 语句,防止程序崩溃。
  • 该方法并不确保一定可以成功注册全局快捷键,因为有可能被电脑上的其他应用提前占用了,此时并不会报错,而是返回 false,因此我们可以通过返回值来判断快捷键是否注册成功。

示例代码

const { app, globalShortcut } = require('electron')
app.whenReady().then(() => {
  registerGlobalShortcut('Cmd+Alt+K')
})
function registerGlobalShortcut(shortcut) {
  if (!shortcut) return false
  let flag = false
  try {
    flag = globalShortcut.isRegistered(shortcut)
    if (flag) return true
    flag = globalShortcut.register(shortcut, () => {
      console.log('toggle shortcut')
    })
  } catch (e) {
    console.error(e)
  }
  return flag
}

注意 globalShortcut 的 API 需要在 app ready 之后才能调用,否则会直接退出:

Electron.app/Contents/MacOS/Electron exited with signal SIGTRAP

代码中有一行判断快捷键是否被注册的函数:

globalShortcut.isRegistered(accelerator)

该方法只能检测当前应用是否注册过这个快捷键,并不能检测到快键键是否被其他应用占用,即使被其他应用注册过了,该方法依然会返回 false,只有当前应用成功注册了这个全局快捷键,才会返回 true。

可以使用一些开源的工具来检测快捷键是否被占用,例如 Windows 系统上的 OpenArk ,Mac 上的 Shortcut Detective。

取消快捷键注册的方法:

globalShortcut.unregister(accelerator) // 取消注册指定快捷键
globalShortcut.unregisterAll() // 取消注册所有快捷键

应用快捷键

与全局快捷键不同,窗口快捷键是当窗口处于激活状态时,按下按键之后触发的行为。例如我们打开 word 或 photoshop 软件,可以用 ctrl + z 撤销上一步操作,用 ctrl + c 复制等。下图是 vscode 的菜单和对应的快捷键:

在 Electron 应用中,也提供了对应的功能,在创建菜单(Menu)的时候,可以指定窗口快键键,示例代码如下:

const { app, BrowserWindow, Menu } = require('electron')
app.whenReady().then(() => {
  createWindow()
})
let win
function createWindow() {
  win = new BrowserWindow({
    width: 600,
    height: 400,
  })
  const tpl = [
    {
      label: '自定义菜单',
      submenu: [
        {
          label: '打开控制台',
          role: 'toggleDevTools',
        },
        {
          label: '绑定快捷键',
          accelerator: 'Ctrl+Shift+K',
          click: () => {
            console.log('menu shortcut pressed')
          },
        },
      ],
    },
  ]
  if (process.platform === 'darwin') {
    tpl.unshift({ label: '' })
  }
  const menu = Menu.buildFromTemplate(tpl)
  Menu.setApplicationMenu(menu)
}

最终的效果是:系统菜单项绑定了快捷键,如下图所示:

当应用处于激活状态时,如果用户触发了 Ctrl+Shift+K 快捷键,会执行回调函数,打印相关信息:

再次强调,一定要在打开当前应用后触发快捷键才行,如果在别的应用中触发这个快捷键是没有效果的,正如官方文档中说的:

其实每个桌面软件都有注册了自己的「应用快捷键」,例如 ctrl+cctrl+v 这种通用的都属于应用快捷键。在 Windows 系统上,还可以为每个窗口设置不同的快捷键。例如,你可以在一个窗口中设置 Ctrl+O 快捷键打开文件,在另一个窗口中设置 Ctrl+S 快捷键保存文件。

在开发的时候,可能会想做这样的事情:注册一个不在菜单中显示的应用快捷键便于调试(例如打开控制台或者上传日志等),那有没有办法能够做到不注册菜单,只注册快捷键呢?有两种方案:

方法1:把菜单给隐藏掉

MenuItem 有个 visibile 属性用于设置菜单项是否展示,默认是 true,设置成 false 即可,不过 2015 年的一个 issue 说,在 macOS 系统上如果隐藏菜单,快捷键就失效了,但是经过笔者实际测试,发现并没有失效(macOS 12.6.3 系统),所以这种方法是可行的,而且非常简单,只需要修改一行代码即可:

const tpl = [
  {
    label: '自定义菜单',
    submenu: [
      {
        label: '打开控制台',
        role: 'toggleDevTools',
      },
      {
        label: '绑定快捷键',
        accelerator: 'Ctrl+Shift+K',
        visible: false, // 设置菜单项为隐藏菜单
        click: () => {
          console.log('menu shortcut pressed')
        },
      },
    ],
  },
]

方法2:利用 webContents.on('before-input-event') 事件

具体的内容可参见这个 issue,利用的是 webContentsbefore-input-event 事件。示例代码如下:

app.on('web-contents-created', function (event, wc) {
  wc.on('before-input-event', function (event, input) {
    if (input.key === 'x' && input.ctrl && !input.alt && !input.meta && !input.shift) {
      // Do something for Ctrl-X
      event.preventDefault()
    }
  })
})

社区有开发者基于此封装了 electron-localshortcut 包,可以非常方便的给不同的窗口(BrowserWindow)绑定快捷键,使用起来更简单:

const { app, BrowserWindow } = require('electron')
const localShortcut = require('electron-localshortcut')
app.whenReady().then(() => createWindow())
let win1, win2
function createWindow() {
  win1 = new BrowserWindow({ width: 600, height: 400 })
  win1.loadURL('https://www.baidu.com')
  localShortcut.register(win1, 'Ctrl+Shift+K', () => {
    console.log('register local shortcut for win1')
  })
  win2 = new BrowserWindow({ width: 600, height: 400 })
  win2.loadURL('https://www.taobao.com')
  localShortcut.register(win2, 'Ctrl+Shift+T', () => {
    console.log('register local shortcut for win2')
  })
}

以上就是Electron 中的快捷键的详细内容,更多关于Electron 快捷键的资料请关注我们其它相关文章!

(0)

相关推荐

  • Electron调用外接摄像头并拍照上传实现详解

    目录 背景 需求分析 实现 视频采集 MediaDevices.getUserMedia() 拍照生成图片 上传图片至CDN 1. 使用HTMLCanvasElement.toBlob() 语法 参数 2. 使用HTMLCanvasElement.toDataURL() 语法 参数 返回值 总结 背景 基于Electron实现的pc端智能验机应用,近期迭代了一个新的功能,需求是通过电脑外接摄像头对手机屏幕进行拍照,拍照后需将照片上传至服务端进行屏幕信息比对,确定被检测屏幕是否为原厂屏. 需求分析

  • 一文详解Electron 电源状态管理

    目录 Electron 电源相关模块 其中 powerMonitor 模块提供的接口 powerSaveBlocker 模块提供的方法 空闲状态监控 电源状态监控 锁屏和解锁 休眠和唤醒 系统行为阻断 Electron 电源相关模块 在 Electron 中有两个模块是跟电源相关的: powerMonitor:用于获取电源相关信息,监听电源相关事件 powerSaveBlocker:用于阻止系统进入睡眠状态 其中 powerMonitor 模块提供的接口 powerSaveBlocker 模块提

  • electron 中 webview的使用示例解析

    目录 正文 获取webview的dom webview 页面 webview页面的代码 新建public/preload.js文件 监听页面对否显示 禁止打开新窗口 刷新页面 上一页 下一页 正文 webview 想必都有所了解,比如:微信小程序嵌套H5 那么我们在electron中怎么使用webview呢? 我们先跟着官方文档展示一下,看是否能有效果: 若要在应用程序中嵌入网页, 请将 webview 标签添加到应用程序的被嵌入页面中 (这是将显示外来内容的应用程序页). 在最简单的例子中,

  • Electron 网络拦截实战示例详解

    目录 正文 自定义 UA 绕过跨域限制 请求转发 正文 Electron 提供的 webRequest API,允许开发者对网络进行过滤和监听,并且可以修改 header 字段甚至请求地址,功能非常强大,它的类结构如下: 不过需要注意,该模块只能在主进程中使用,接下来为大家介绍 webRequest 三个非常典型的使用场景: 自定义 UA 有些接口为了过滤非法请求,会首先校验 UserAgent,正常的浏览器是无法伪造 UA 的,不过在 Electron 里面可以很容易做到,webRequest

  • Electron 剪贴板实现示例详解

    目录 正文 availableFormats readText 和 writeText readHTML 和 writeHTML readImage 和 writeImage readRTF 和 writeRTF clear 正文 在浏览器中可以通过 JavaScript 脚本来读写剪贴板数据,常用的是 document.execCommand 方法: // 复制数据 const inputElement = document.querySelector('#input') inputEleme

  • 详解python算法常用技巧与内置库

    近些年随着python的越来越火,python也渐渐成为了很多程序员的喜爱.许多程序员已经开始使用python作为第一语言来刷题. 最近我在用python刷题的时候想去找点python的刷题常用库api和刷题技巧来看看.类似于C++的STL库文档一样,但是很可惜并没有找到,于是决定结合自己的刷题经验和上网搜索做一份文档出来,供自己和大家观看查阅. 1.输入输出: 1.1 第一行给定两个值n,m,用空格分割,第一个n决定接下来有n行的输入,m决定每一行有多少个数字,m个数字均用空格分隔. 解决办法

  • 一文详解SQL 中的三值逻辑

    目录 1. 前言 2. 两种 Null 3. 为什么是 is Null 而不是 = Null ? 4. 第三个真值 “unknown” 5. 包含三值逻辑的真值表 6. “排中律” 不再成立 7. CASE 表达式和 NULL 8. NOT IN 和 NOT EXISTS 不是等价的 9. 限定谓词和 NULL 10. 限定谓词和极值函数不是等价的 11. 聚合函数和 Null 1. 前言 大多数编程语言都是基于二值逻辑的,即逻辑真值只有真和假两个.而 SQL 语言则采用一种特别的逻辑体系——三

  • 详解Electron中如何使用SQLite存储笔记

    目录 前言 数据库的选择 安装 创建表 Service Controller 业务 总结 前言 上一篇,我们使用 remirror 实现了一个简单的 markdown 编辑器.接下来,我们要学习如何去存储这些笔记. 当然了,你也可以选择不使用数据库,不过若是你以后需要将该应用上架到 mac Apple Store ,就需要考虑这个了.因为上架 mac 应用需要启用 sandbox,当你第一次访问笔记中的媒体文件时,都要打开选择文件的弹窗,通过让用户主动选择来授权访问沙箱外的媒体文件.不过,如果你

  • 一文详解 OpenGL ES 纹理颜色混合的方法

    目录 一.混合API 二.参数含义 2.1 举个栗子 2.2 参数含义 三. 几种常用混合方式效果 3.1 混合(GL_ONE, GL_ZERO) 3.2 混合(GL_ONE, GL_ONE) 3.3 混合(GL_ONE, GL_ONE_MINUS_DST_ALPHA) 3.4 混合 (GL_SRC_ALPHA, GL_ONE) 3.5 混合 (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) 在OpenGL中绘制的时候,有时候想使新画的颜色和已经有的颜色按照一定的方式

  • 一文详解JS私有属性的6种实现方式

    目录 _prop Proxy Symbol WeakMap #prop ts private 总结 class 是创建对象的模版,由一系列属性和方法构成,用于表示对同一概念的数据和操作. 有的属性和方法是对外的,但也有的是只想内部用的,也就是私有的,那怎么实现私有属性和方法呢? 不知道大家会怎么实现,我梳理了下,我大概用过 6 种方式,我们分别来看一下: _prop 区分私有和公有最简单的方式就是加个下划线 _,从命名上来区分. 比如: class Dong { constructor() {

  • 一文详解JS中的事件循环机制

    目录 前言 1.JavaScript是单线程的 2.同步和异步 3.事件循环 前言 我们知道JavaScript 是单线程的编程语言,只能同一时间内做一件事,按顺序来处理事件,但是在遇到异步事件的时候,js线程并没有阻塞,还会继续执行,这又是为什么呢?本文来总结一下js 的事件循环机制. 1.JavaScript是单线程的 JavaScript 是一种单线程的编程语言,只有一个调用栈,决定了它在同一时间只能做一件事.在代码执行的时候,通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行.在

  • 一文详解如何用原型链的方式实现JS继承

    目录 原型链是什么 通过构造函数创建实例对象 用原型链的方式实现继承 方法1:Object.create 方法2:直接修改 [[prototype]] 方法3:使用父类的实例 总结 今天讲一道经典的原型链面试题. 原型链是什么 JavaScript 中,每当创建一个对象,都会给这个对象提供一个内置对象 [[Prototype]] .这个对象就是原型对象,[[Prototype]] 的层层嵌套就形成了原型链. 当我们访问一个对象的属性时,如果自身没有,就会通过原型链向上追溯,找到第一个存在该属性原

  • 一文详解Java拦截器与过滤器的使用

    目录 流程图 拦截器vs过滤器 SpringMVC技术架构图 项目Demo 依赖 Interceptor拦截器 Filter过滤器 1.多Filter不指定过滤顺序 2.多Filter指定过滤顺序 流程图 拦截器vs过滤器 拦截器是SpringMVC的技术 过滤器的Servlet的技术 先过过滤器,过滤器过完才到DispatcherServlet: 拦截器归属于SpringMVC,只可能拦SpringMVC的东西: 拦截器说白了就是为了增强,可以在请求前进行增强,也可以在请求后进行增强,但是不一

  • 一文详解Vue如何整合Echarts实现可视化界面

    目录 一.什么是可视化 二.什么是Echarts 三.Echarts的优点 四.Vue 整合Echarts 下载Echarts依赖 Vue引入Echarts 测试使用Echarts 五.效果图 一.什么是可视化 可视化就是可以通过视觉进行传达的. 再专业一点就可以解释为可视化(Visualization)是利用计算机图形学和图像处理技术,将数据转换成图形或图像在屏幕上显示出来,再进行交互处理的理论.方法和技术. 将数据通俗的在屏幕中展现出来! 二.什么是Echarts 一个纯JavaScript

随机推荐