tauri2应用添加系统托盘Tray

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

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

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

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

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

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

我的案例代码：

javascript 复制代码

<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>