博客园 首页 私信博主 显示目录 隐藏目录 管理 动画

electron快捷键

  • 我们分为在主进程中注册快捷键和在渲染进程中注册快捷键
  1. 在主进程中我们有两种方式

一 利用[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。

posted @ 2019-03-07 15:03  ants_double  阅读(2601)  评论(0)  编辑  收藏  举报