系统托盘，对Windows来说是右下角的应用程序小图标，对Mac来说是右上角的应用程序小图标。有系统托盘的好处是，在不打开应用程序主界面的情况下进行一些便捷处理，甚至对于一些功能简单的小程序来说甚至只保留系统托盘而不需要程序主界面，因此系统托盘对于一个应用程序来说是非常重要的。
如下图，是我电脑应用程序的一些系统托盘图标：
本文同样参考了Tauri2.0官方教程，但是官方文档比较简略，因此在这里重新整理一下。
一、Cargo.toml文件中添加features
tauri = { version = "2.0.6", features = [ "tray-icon", "image-png" ] }
二、前端安装@tauri-apps/api依赖
npm install @tauri-apps/api
三、在tray.js里面创建托盘图标并添加菜单,然后再main.js引入
tray.js内容：
import {TrayIcon} from '@tauri-apps/api/tray';
import {Menu} from '@tauri-apps/api/menu';
export default async function tray_init() {
const menu = await Menu.new({
items: [
{
id: 'info',
text: '关于',
action: () => {
console.log("info press")
}
},
{
id: 'quit',
text: '退出',
action: () => {
// 退出逻辑
const appWindow = new Window('main');
appWindow.close()
}
},
],
});
const options = {
icon: "C:\Users\xxx\RustProjects\star-app\src\assets\qq.png",
menu,
menuOnLeftClick: false,
// 托盘行为
action: (event) => {
switch (event.type) {
case 'Click':
console.log(
`mouse ${event.button} button pressed, state: ${event.buttonState}`
);
break;
case 'DoubleClick':
console.log(`mouse ${event.button} button pressed`);
break;
case 'Enter':
console.log(
`mouse hovered tray at ${event.rect.position.x}, ${event.rect.position.y}`
);
break;
case 'Move':
console.log(
`mouse moved on tray at ${event.rect.position.x}, ${event.rect.position.y}`
);
break;
case 'Leave':
console.log(
`mouse left tray at ${event.rect.position.x}, ${event.rect.position.y}`
);
break;
}
},
};
const tray = await TrayIcon.new(options);
}
main.js文件中添加第4-6行
import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import tray_init from "./tray.js";
// 初始化系统托盘
tray_init()
createApp(App).mount('#app')
上述内容配置完成以后再启动程序，在右下角会显示托盘图标，我程序的托盘图标就是上面图片中第一个白色背景的qq图标，如果右键点击会显示菜单，如图：
打包app，双击exe程序也会显示和上述效果一样的内容。
这里有个坑，如果tray.js文件中的内容放到main.js里面，本地运行可以成功，但是如果运行npx tauri build会报如下错误：
x Build failed in 1.74s
error during build:
[vite:esbuild-transpile] Transform failed with 1 error:
assets/index-!~{001}~.js:7484:13: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
7482| }
7483|
7484| const menu = await Menu.new({
| ^
7485| items: [
7486| {
at failureErrorWithLog (C:\Users\yulei\RustProjects\star-app\node_modules\esbuild\lib\main.js:1472:15)
at C:\Users\yulei\RustProjects\star-app\node_modules\esbuild\lib\main.js:755:50
at responseCallbacks.<computed> (C:\Users\yulei\RustProjects\star-app\node_modules\esbuild\lib\main.js:622:9)
at handleIncomingPacket (C:\Users\yulei\RustProjects\star-app\node_modules\esbuild\lib\main.js:677:12)
at Socket.readFromStdout (C:\Users\yulei\RustProjects\star-app\node_modules\esbuild\lib\main.js:600:7)
at Socket.emit (node:events:394:28)
at addChunk (node:internal/streams/readable:315:12)
at readableAddChunk (node:internal/streams/readable:289:9)
at Socket.Readable.push (node:internal/streams/readable:228:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:199:23)
beforeBuildCommand `npm run build` failed with exit code 1
Error beforeBuildCommand `npm run build` failed with exit code 1
四、总结
本文实现了以下功能：
- 添加系统托盘并替换系统托盘图标
- 添加系统托盘菜单
- 监听系统托盘图标的各种行为
