3. Tauri实现全局快捷键创建新窗口

发表于 分类于

引言

在前端开发中，我们经常需要为桌面应用添加快捷键功能来提升用户体验。本文将介绍如何使用Tauri框架实现通过全局快捷键（如Alt+A）快速创建新窗口的功能。这个功能非常适合需要快速调出辅助窗口的应用场景。

技术栈

  • Tauri - 构建小型、快速、安全的桌面应用框架
  • tauri-plugin-global-shortcut - Tauri全局快捷键插件
  • Vue.js - 前端框架（也可以使用React或其他框架）

基本概念

1. Tauri Webview窗口

Tauri中的WebviewWindow允许我们创建和管理多个浏览器窗口。每个窗口可以加载不同的HTML内容或路由。

2. 全局快捷键

全局快捷键是指在整个操作系统范围内都能响应的快捷键组合，即使应用没有获得焦点也能触发。

3. 进程间通信

Tauri前端（Web）和后端（Rust）通过事件系统进行通信，这使得我们可以在Rust中监听快捷键，然后通知前端创建窗口。

实现步骤

1. 安装必要依赖

首先确保你已经创建了Tauri项目，然后安装全局快捷键插件：

1
pnpm tauri add global-shortcut

依赖安装完后，会自动在 Rust 启动代码里引用插件
add global shortcut plugin

2. 添加创建窗口逻辑

在前端（如Vue组件）中添加窗口创建逻辑：

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 { WebviewWindow } from '@tauri-apps/api/webviewWindow';

const createOrShowShortcutWindow = async () => {
  // 检查窗口是否已存在
  const existingWindow = await WebviewWindow.getByLabel('shortcut-window');
  if (existingWindow) {
    await existingWindow.setFocus(); // 存在则聚焦
    return;
  }

  // 创建新窗口
  const webview = new WebviewWindow('shortcut-window', {
    url: '/', // 加载的路由
    center: true,     // 居中显示
    width: 300,      // 宽度
    height: 600,     // 高度
    alwaysOnTop: true // 置顶
  });

  // 处理窗口创建事件
  webview.once('tauri://created', () => webview.show());
  webview.once('tauri://error', (e) => {
    console.error('窗口创建失败:', e);
  });
};

3. 根组件挂载时注册快捷键

1
2
3
4
5
6
7
8
9
10
import {register} from '@tauri-apps/plugin-global-shortcut';

onMounted(async () => {
  await register('Alt+A', (event) => {
    if (event.state === "Pressed") {
      console.log('Shortcut triggered');
      createOrShowShortcutWindow()
    }
  });
});

4. 配置权限

在src-tauri/capabilities/desktop.json中添加必要的权限：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "identifier": "desktop-capability",
  "platforms": [
    "macOS",
    "windows",
    "linux"
  ],
  "windows": [
    "main"
  ],
  "permissions": [
    "global-shortcut:default",
    "global-shortcut:allow-is-registered",
    "global-shortcut:allow-register",
    "global-shortcut:allow-unregister",
    "core:webview:allow-create-webview",
    "core:webview:allow-create-webview-window",
    "core:window:allow-show",
    "core:window:allow-set-focus",
    "core:window:allow-destroy"
  ]
}

config permission

5. 启动查看效果

1
pnpm tauri dev

按下快捷键 Alt+A, 应该会看到新窗口弹出。
multiple window

示例验证

  1. 运行应用后，按下Alt+A应该会弹出新窗口
  2. 再次按下组合键，如果窗口已存在则会聚焦到该窗口
  3. 可以尝试修改窗口大小、位置等参数查看效果

常见问题

Q: 快捷键没有生效？
A: 检查：

  • 是否正确安装了插件
  • 权限配置是否正确
  • 快捷键是否被其他应用占用

Q: 窗口创建失败？
A: 检查：

  • 新窗口配置的路由是否存在
  • 窗口label是否唯一
  • 控制台错误信息

进阶学习

想要了解更多高级功能，可以参考官方文档：

结语

通过本文，我们学习了如何在Tauri应用中实现全局快捷键创建窗口的功能。这个功能可以大大提升应用的易用性。Tauri的强大之处在于它让前端开发者也能轻松实现原生功能，而无需深入了解系统级编程。