快捷键与系统 #
一、全局快捷键 #
1.1 globalShortcut 模块 #
javascript
const { globalShortcut, app } = require('electron');
app.whenReady().then(() => {
// 注册全局快捷键
globalShortcut.register('CommandOrControl+Shift+D', () => {
console.log('快捷键被触发');
mainWindow.show();
});
// 注册多个快捷键
globalShortcut.register('CommandOrControl+Alt+L', () => {
lockScreen();
});
});
// 应用退出时注销所有快捷键
app.on('will-quit', () => {
globalShortcut.unregisterAll();
});
1.2 快捷键组合 #
javascript
// 常用修饰键
// Windows/Linux: Ctrl, Alt, Shift, Super
// macOS: Cmd (Command), Option (Alt), Shift, Control
// 示例
'CommandOrControl+A' // macOS: Cmd+A, Windows/Linux: Ctrl+A
'CommandOrControl+Shift+S' // 保存为
'Alt+F4' // 关闭窗口
'F5' // 刷新
'MediaPlayPause' // 媒体键
1.3 检查与注销 #
javascript
// 检查快捷键是否已注册
if (globalShortcut.isRegistered('CommandOrControl+X')) {
console.log('快捷键已被占用');
}
// 注销单个快捷键
globalShortcut.unregister('CommandOrControl+Shift+D');
// 注销所有快捷键
globalShortcut.unregisterAll();
1.4 快捷键管理器 #
javascript
// shortcutManager.js
class ShortcutManager {
constructor() {
this.shortcuts = new Map();
}
register(accelerator, callback) {
if (this.shortcuts.has(accelerator)) {
console.warn(`快捷键 ${accelerator} 已注册`);
return false;
}
const success = globalShortcut.register(accelerator, callback);
if (success) {
this.shortcuts.set(accelerator, callback);
}
return success;
}
unregister(accelerator) {
if (this.shortcuts.has(accelerator)) {
globalShortcut.unregister(accelerator);
this.shortcuts.delete(accelerator);
return true;
}
return false;
}
unregisterAll() {
globalShortcut.unregisterAll();
this.shortcuts.clear();
}
isRegistered(accelerator) {
return globalShortcut.isRegistered(accelerator);
}
getAll() {
return Array.from(this.shortcuts.keys());
}
}
module.exports = new ShortcutManager();
1.5 动态快捷键 #
javascript
// 根据应用状态动态注册快捷键
function updateShortcuts(isPlaying) {
if (isPlaying) {
shortcutManager.register('MediaPlayPause', pausePlayback);
shortcutManager.unregister('MediaPlay');
} else {
shortcutManager.register('MediaPlayPause', startPlayback);
shortcutManager.unregister('MediaPause');
}
}
二、窗口快捷键 #
2.1 菜单快捷键 #
javascript
// 通过菜单定义快捷键
const template = [
{
label: '文件',
submenu: [
{
label: '新建',
accelerator: 'CmdOrCtrl+N',
click: () => createNew()
},
{
label: '打开',
accelerator: 'CmdOrCtrl+O',
click: () => openFile()
},
{
label: '保存',
accelerator: 'CmdOrCtrl+S',
click: () => saveFile()
}
]
}
];
2.2 本地快捷键 #
javascript
// 在渲染进程中监听键盘事件
document.addEventListener('keydown', (e) => {
// Ctrl/Cmd + S
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
e.preventDefault();
saveFile();
}
// Ctrl/Cmd + Shift + S
if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'S') {
e.preventDefault();
saveFileAs();
}
// Escape
if (e.key === 'Escape') {
closeModal();
}
});
2.3 加速器字符串 #
javascript
// 加速器格式
'CommandOrControl' // macOS: Command, Windows/Linux: Control
'Super' // Windows: Windows键, Linux: Super键
'Cmd' // Command (macOS)
'Ctrl' // Control
'Shift' // Shift
'Alt' // Alt
'Option' // Option (macOS)
// 组合示例
'CmdOrCtrl+Shift+K'
'Alt+Enter'
'F11'
'PageUp'
'Delete'
'Insert'
'Home'
'End'
'ArrowUp'
'ArrowDown'
'ArrowLeft'
'ArrowRight'
// 媒体键
'VolumeUp'
'VolumeDown'
'VolumeMute'
'MediaNextTrack'
'MediaPreviousTrack'
'MediaStop'
'MediaPlayPause'
三、剪贴板 #
3.1 clipboard 模块 #
javascript
const { clipboard } = require('electron');
// 写入文本
clipboard.writeText('Hello, World!');
// 读取文本
const text = clipboard.readText();
console.log(text); // 'Hello, World!'
// 写入 HTML
clipboard.writeHTML('<b>Bold text</b>');
// 读取 HTML
const html = clipboard.readHTML();
// 写入图片
const image = nativeImage.createFromPath('image.png');
clipboard.writeImage(image);
// 读取图片
const img = clipboard.readImage();
// 清空剪贴板
clipboard.clear();
// 检查格式
const formats = clipboard.availableFormats();
console.log(formats); // ['text/plain', 'text/html']
3.2 剪贴板监听 #
javascript
// 监听剪贴板变化
let lastText = clipboard.readText();
setInterval(() => {
const currentText = clipboard.readText();
if (currentText !== lastText) {
lastText = currentText;
console.log('剪贴板内容变化:', currentText);
onClipboardChange(currentText);
}
}, 500);
3.3 自定义格式 #
javascript
// 写入自定义数据
clipboard.write({
text: 'plain text',
html: '<b>html</b>',
bookmark: 'bookmark title'
});
// 读取特定格式
const bookmark = clipboard.read('bookmark');
四、系统集成 #
4.1 shell 模块 #
javascript
const { shell } = require('electron');
// 在默认浏览器中打开 URL
await shell.openExternal('https://example.com');
// 在默认应用中打开文件
await shell.openPath('/path/to/file.pdf');
// 显示文件在文件夹中
shell.showItemInFolder('/path/to/file.pdf');
// 移动文件到回收站
shell.trashItem('/path/to/file.txt');
// 播放系统提示音
shell.beep();
// 写入快捷方式(Windows)
if (process.platform === 'win32') {
shell.writeShortcutLink('shortcut.lnk', {
target: 'C:\\path\\to\\app.exe',
workingDirectory: 'C:\\path\\to',
args: '--arg1'
});
}
4.2 默认应用 #
javascript
// 打开默认邮件客户端
await shell.openExternal('mailto:example@email.com');
// 打开默认电话应用
await shell.openExternal('tel:+1234567890');
// 打开默认地图应用
await shell.openExternal('https://maps.google.com/?q=location');
4.3 协议处理 #
javascript
// 注册自定义协议
app.setAsDefaultProtocolClient('myapp');
// 处理协议调用
app.on('open-url', (event, url) => {
event.preventDefault();
console.log('协议调用:', url);
// myapp://action?param=value
});
五、屏幕信息 #
5.1 screen 模块 #
javascript
const { screen } = require('electron');
// 获取主显示器
const primaryDisplay = screen.getPrimaryDisplay();
console.log('分辨率:', primaryDisplay.size);
console.log('缩放因子:', primaryDisplay.scaleFactor);
console.log('工作区:', primaryDisplay.workAreaSize);
// 获取所有显示器
const displays = screen.getAllDisplays();
displays.forEach((display, index) => {
console.log(`显示器 ${index + 1}:`);
console.log(' 分辨率:', display.size);
console.log(' 位置:', display.bounds);
console.log(' 工作区:', display.workArea);
});
// 获取鼠标位置
const cursorPosition = screen.getCursorScreenPoint();
console.log('鼠标位置:', cursorPosition);
// 获取指定位置的显示器
const displayAtPoint = screen.getDisplayNearestPoint({ x: 100, y: 100 });
5.2 显示器事件 #
javascript
// 显示器添加
screen.on('display-added', (event, newDisplay) => {
console.log('新显示器:', newDisplay);
});
// 显示器移除
screen.on('display-removed', (event, oldDisplay) => {
console.log('移除显示器:', oldDisplay);
});
// 显示器变化
screen.on('display-metrics-changed', (event, display, changedMetrics) => {
console.log('显示器变化:', changedMetrics);
// changedMetrics: ['bounds', 'workArea', 'scaleFactor', 'rotation']
});
5.3 窗口位置管理 #
javascript
// 将窗口居中到鼠标所在的显示器
function centerWindowOnCurrentDisplay(win) {
const cursorPos = screen.getCursorScreenPoint();
const display = screen.getDisplayNearestPoint(cursorPos);
const [width, height] = win.getSize();
const x = display.workArea.x + (display.workArea.width - width) / 2;
const y = display.workArea.y + (display.workArea.height - height) / 2;
win.setPosition(Math.round(x), Math.round(y));
}
六、电源管理 #
6.1 powerMonitor 模块 #
javascript
const { powerMonitor } = require('electron');
// 系统挂起
powerMonitor.on('suspend', () => {
console.log('系统即将挂起');
saveState();
});
// 系统恢复
powerMonitor.on('resume', () => {
console.log('系统已恢复');
restoreState();
});
// 电源状态变化
powerMonitor.on('on-ac', () => {
console.log('使用交流电源');
});
powerMonitor.on('on-battery', () => {
console.log('使用电池');
});
// 锁屏
powerMonitor.on('lock-screen', () => {
console.log('屏幕已锁定');
});
// 解锁
powerMonitor.on('unlock-screen', () => {
console.log('屏幕已解锁');
});
// 获取电池状态
const battery = powerMonitor.getBatteryState();
console.log('电池状态:', battery);
// { charging: true, level: 0.85, ... }
6.2 阻止系统休眠 #
javascript
const { powerSaveBlocker } = require('electron');
// 阻止系统休眠
const id = powerSaveBlocker.start('prevent-display-sleep');
console.log('阻止休眠 ID:', id);
// 检查是否在阻止
const isStarted = powerSaveBlocker.isStarted(id);
// 停止阻止
powerSaveBlocker.stop(id);
// 阻止类型
// 'prevent-app-suspension' - 阻止应用被挂起
// 'prevent-display-sleep' - 阻止显示器休眠
七、进程管理 #
7.1 child_process #
javascript
const { spawn, exec, execFile } = require('child_process');
// spawn - 流式输出
const child = spawn('ls', ['-la']);
child.stdout.on('data', (data) => {
console.log(`输出: ${data}`);
});
child.stderr.on('data', (data) => {
console.error(`错误: ${data}`);
});
child.on('close', (code) => {
console.log(`进程退出,代码: ${code}`);
});
// exec - 缓冲输出
exec('ls -la', (error, stdout, stderr) => {
if (error) {
console.error(`错误: ${error}`);
return;
}
console.log(`输出: ${stdout}`);
});
// execFile - 执行文件
execFile('node', ['--version'], (error, stdout) => {
console.log(`Node 版本: ${stdout}`);
});
7.2 打开外部程序 #
javascript
// Windows
if (process.platform === 'win32') {
exec('start "" "C:\\path\\to\\app.exe"');
}
// macOS
if (process.platform === 'darwin') {
exec('open -a "App Name"');
}
// Linux
if (process.platform === 'linux') {
exec('xdg-open /path/to/file');
}
八、最佳实践 #
8.1 快捷键配置 #
javascript
// 用户可配置的快捷键
const defaultShortcuts = {
'show-window': 'CommandOrControl+Shift+W',
'quick-capture': 'CommandOrControl+Shift+C',
'toggle-devtools': 'CommandOrControl+Shift+I'
};
function loadShortcuts() {
const userShortcuts = store.get('shortcuts', defaultShortcuts);
Object.entries(userShortcuts).forEach(([action, accelerator]) => {
shortcutManager.register(accelerator, () => {
handleShortcutAction(action);
});
});
}
function handleShortcutAction(action) {
switch (action) {
case 'show-window':
mainWindow.show();
break;
case 'quick-capture':
startCapture();
break;
case 'toggle-devtools':
mainWindow.webContents.toggleDevTools();
break;
}
}
8.2 跨平台处理 #
javascript
// 跨平台路径处理
const path = require('path');
// 获取应用数据目录
const appDataPath = app.getPath('appData');
// 获取配置文件路径
const configPath = path.join(
app.getPath('userData'),
'config.json'
);
// 获取临时目录
const tempPath = app.getPath('temp');
九、总结 #
9.1 核心要点 #
| 要点 | 说明 |
|---|---|
| 全局快捷键 | globalShortcut 注册系统级快捷键 |
| 窗口快捷键 | 菜单或渲染进程监听键盘事件 |
| 剪贴板 | clipboard 读写剪贴板内容 |
| 系统集成 | shell 打开外部应用和链接 |
| 屏幕信息 | screen 获取显示器信息 |
| 电源管理 | powerMonitor 监听电源事件 |
9.2 下一步 #
现在你已经掌握了快捷键与系统集成,接下来让我们学习 本地存储,深入了解 Electron 应用的数据持久化!
最后更新:2026-03-28