AutoHotkey是一个用来定义热键的脚本工具，可以通过编写脚本语言设置或者禁用热键。
由于之前的Electron项目需要全屏显示，并且禁用掉包括Windows，Alt + Tab之类的热键，为了确保安全性，使用权限来控制应用程序的退出。
首先来介绍一下需求：
- 全屏显示及注册快捷键(之前的electron文章中有介绍‘点击查看’)
- 禁用退出热键
- electron启动时调用脚本，退出全屏时终止进程
- 退出权限验证
AutoHotkey
关于AutoHotkey，这里不过多介绍，具体可以查看‘官网’;
安装
首先需要做的是安装‘点击下载’
使用
简单来讲，创建一个完整的AutoHotkey脚本步骤
- 新建一个
.ahk后缀的文件，用来编写脚本语言，可以直接运行 - 将其转换为
.exe方便使用(可以使用Ahk2Exe.exe或其他工具进行转换)
和退出全屏有关的快捷键设置如下：1
2
3
4
5LWin::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
10import { 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
14function registerFull () {
globalShortcut.register('F11', () => {
toggleFullScreen(true);
registerEsc(); // 由于退出全屏时注销了Esc，所以每次全屏都要注册一下
});
}
function registerEsc () {
globalShortcut.register('ESC', () => {
if (mainWindow.isFullScreen()) { // 判断是否为全屏
mainWindow.webContents.send('esc', true); // 向渲染进程发送信息，下文会有介绍
}
});
}
客户端交互
关于这一部分，需要实现的功能为，当点击Esc键时，主进程通知渲染进程验证权限，在权限验证通过后，渲染进程通知主进程退出全屏显示。
对于客户端（渲染进程）和主进程之前的通信，electron有相关的api：
- ‘ipcRenderer’渲染进程发送和接收消息
- ‘ipcMain’主进程接收消息
- ‘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
52import { 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
26import { 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 () {
……
}
}
}