AutoHotkey禁用热键以及Electron中的使用

    AutoHotkey是一个用来定义热键的脚本工具,可以通过编写脚本语言设置或者禁用热键。
    由于之前的Electron项目需要全屏显示,并且禁用掉包括Windows,Alt + Tab之类的热键,为了确保安全性,使用权限来控制应用程序的退出。

首先来介绍一下需求:

  1. 全屏显示及注册快捷键(之前的electron文章中有介绍‘点击查看’)
  2. 禁用退出热键
  3. electron启动时调用脚本,退出全屏时终止进程
  4. 退出权限验证

AutoHotkey

关于AutoHotkey,这里不过多介绍,具体可以查看‘官网’;

安装

首先需要做的是安装‘点击下载’

使用

简单来讲,创建一个完整的AutoHotkey脚本步骤

  1. 新建一个.ahk后缀的文件,用来编写脚本语言,可以直接运行
  2. 将其转换为.exe方便使用(可以使用Ahk2Exe.exe或其他工具进行转换)

和退出全屏有关的快捷键设置如下:

1
2
3
4
5
LWin::return
RWin::return // windows
Alt::return
!Tab::return // Alt + Tab
^Esc::return // Ctrl + Esc

写入到ahk文件后启动脚本即可禁用相关键位。

Electron中调用

首先我们需要找到electron的主进程文件src/main/index.js,可以看到主进程的启动方法

1
app.on('ready', createWindow);

好了,接下来要做的就是在createWindow方法中启动脚本,在自定义的退出方法中,终止脚本。
这里我选择使用了node的‘child_process’中的exec方法,启动子进程通过命令行工具,启动脚本,相关代码如下:

1
2
3
4
5
6
7
8
9
10
import { exec } from 'child_process';

function toggleFullScreen (bol) {
if (bol) {
exec('.\\AutoHotkey.exe'); // 命令行启动脚本
} else {
exec('TASKKILL /IM AutoHotkey.exe'); // 终止进程
}
mainWindow.setFullScreen(bol);
}

封装了一下切换全屏显示的方法,方便使用。

我将AutoHotkey的exe文件跟ahk文件放在了打包后的根目录,注意要使用.\\而不是./

注册快捷键

这里使用到了两个快捷键:F11全屏,Esc验证权限退出全屏写了两个方法进行了注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function registerFull () {
globalShortcut.register('F11', () => {
toggleFullScreen(true);
registerEsc(); // 由于退出全屏时注销了Esc,所以每次全屏都要注册一下
});
}

function registerEsc () {
globalShortcut.register('ESC', () => {
if (mainWindow.isFullScreen()) { // 判断是否为全屏
mainWindow.webContents.send('esc', true); // 向渲染进程发送信息,下文会有介绍
}
});
}

客户端交互

关于这一部分,需要实现的功能为,当点击Esc键时,主进程通知渲染进程验证权限,在权限验证通过后,渲染进程通知主进程退出全屏显示。
对于客户端(渲染进程)和主进程之前的通信,electron有相关的api:

  1. ‘ipcRenderer’渲染进程发送和接收消息
  2. ‘ipcMain’主进程接收消息
  3. ‘webContents’主进程发送消息

那么问题就好解决了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 渲染进程
import { ipcRenderer } from 'electron';

ipcRenderer.on('esc', () => { // 接收主进程Esc事件触发
this.$refs.permissionDialog.show().then(() => { // 权限验证通过
ipcRenderer.send('exit'); // 向主进程发送消息,退出全屏
})
})

// 主进程
import { ipcMain } from 'electron';

ipcMain.on('exit', () => {
globalShortcut.unregister('ESC'); // 注销Esc快捷键
toggleFullScreen(false); // 退出全屏
});

这里之所以要注销Esc快捷键,是因为electron注册的是全局快捷键,会影响其他应用程序的操作,所以在推出时注销,F11全屏时再次注册

源码

贴一下这部分相关的所有源码,首先是主进程的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import { app, globalShortcut, BrowserWindow, ipcMain } from 'electron';
import { exec } from 'child_process';

let mainWindow;

function createWindow () {
mainWindow = new BrowserWindow({
height: 768,
width: 1024,
autoHideMenuBar: true, // 隐藏导航
webPreferences: {
webSecurity: false // 解决跨域,之前文章有介绍
}
});

toggleFullScreen(true); // 默认全屏,注册快捷键
registerEsc();
registerFull();

……

ipcMain.on('exit', () => { // 退出
globalShortcut.unregister('ESC');
toggleFullScreen(false);
});
}

app.on('ready', createWindow);

function registerFull () { // 注册F11全屏快捷键
globalShortcut.register('F11', () => {
toggleFullScreen(true);
registerEsc();
});
}

function registerEsc () { // 注册Esc退出全屏快捷键
globalShortcut.register('ESC', () => {
if (mainWindow.isFullScreen()) {
mainWindow.webContents.send('esc', true);
}
});
}

function toggleFullScreen (bol) { // 切换全屏显示
if (bol) {
exec('.\\AutoHotkey.exe');
} else {
exec('TASKKILL /IM AutoHotkey.exe');
}
mainWindow.setFullScreen(bol);
}

注意,我这里只列举了相关的代码,主进程自身功能代码没有包含

渲染进程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { ipcRenderer } from 'electron';

export default {
components: {
'PermissionDialog': require('./components/Widget/PermissionDialog.vue').default
},
created () {
ipcRenderer.on('esc', () => {
this.onExit();
})
},
methods: {
onExit () {
if (this.checkPermission()) { //验证当前用户权限
ipcRenderer.send('exit');
} else {
this.$refs.permissionDialog.show().then(() => { // 权限验证
ipcRenderer.send('exit');
})
}
},
checkPermission () {
……
}
}
}

文章目录
  1. 1. AutoHotkey
    1. 1.1. 安装
    2. 1.2. 使用
  2. 2. Electron中调用
  3. 3. 注册快捷键
  4. 4. 客户端交互
  5. 5. 源码
|