tauri2应用添加系统托盘Tray

官网文档：https://v2.tauri.app/learn/system-tray/

有两种方式可以添加系统托盘，一种是在js中，一种是在rust中，官方都有使用案例，其中要注意：

要记得在配置文件中添加这个特性。

这里我记录一下在js中添加托盘后，图标不显示问题：

可能是因为我使用了defaultWindowIcon图标作为托盘图标？但是官方说是可以的：

后来我重启了项目就显示了，我这里是通过js添加的托盘，这里的图标路径是相对于src-tauri的：

我的案例代码：

<template> <h1 class="cardTitle" @click="openUrl('https://v2.tauri.app/learn/system-tray/')" > tray </h1> <p> The tray module provides utilities for working with the system tray. This package is also accessible </p> <div class="cardBox"> <el-tooltip content="create tray" placement="bottom"> <el-button>{{ t('waitDev') }}</el-button> </el-tooltip> </div> <div class="codeDemo"> <h2>发送通知</h2> <p class="description">调用系统通知API发送消息通知</p> <CodeEdit lang="javascript" :code="Codes.notification.trim()" :disabled="true" /> </div> </template> <script setup lang="ts"> import { openUrl } from '@/utils/common' import { TrayIcon } from '@tauri-apps/api/tray' import { Menu } from '@tauri-apps/api/menu' import { useI18n } from 'vue-i18n' import Codes from '@/utils/codes' // import ppIcon from '@/assets/images/pakeplus.png' import { onMounted } from 'vue' const { t } = useI18n() const textarea = defineModel('textarea', { type: String, default: '', }) let tray: any = null const createTray = async () => { const menu = await Menu.new({ items: [ { id: 'quit', text: 'Quit', action: () => { console.log('quit pressed') }, }, ], }) const options = { menu, menuOnLeftClick: true, icon: 'icons/icon.png', } tray = await TrayIcon.new(options) } onMounted(async () => { createTray() }) </script> <style scoped lang="scss"></style>