Electron + Vue 3 开发 Mac 版日历：配置 Tray 显示功能

Electron + Vue 3 + TypeScript + Vite 开发 Mac 版日历 (22)——配置 Tray 显示功能

随着 Mac 版日历的开发进程不断深入，我们迎来了一个新的里程碑——配置托盘 (Tray) 显示功能。托盘，又称系统托盘，是一个位于屏幕右上角、用于容纳应用程序图标和显示各种通知的小区域。

Tray 的优势

将应用程序集成到托盘中具有以下优势：

• 便于访问： 应用程序图标始终显示在托盘中，即使窗口被最小化或隐藏。
• 快速更新： 托盘图标可以动态更新，以指示应用程序的状态或显示通知。
• 用户友好： 托盘功能是 Mac 操作系统的一个熟悉元素，因此用户可以轻松与之交互。

配置 Tray 显示功能

在 Electron + Vue 3 项目中配置 Tray 显示功能的过程相对简单：

1. 安装依赖项

首先，我们需要安装 Electron Tray 模块：

npm install electron-tray

2. 创建 Tray 组件

接下来，我们创建一个 Vue 组件来处理 Tray 的功能：

// Tray.vue
<template>
  <div id="tray">
    <img src="icon.png" alt="Calendar Icon">
  </div>
</template>

<script>
import { app, Tray } from 'electron'

export default {
  mounted() {
    const tray = new Tray('./icon.png')
    tray.setToolTip('My Calendar App')
    tray.on('click', () => {
      if (app.dock) {
        app.dock.show()
      } else {
        app.show()
      }
    })
  }
}
</script>

3. 在主进程中创建 Tray

在我们的 Electron 主进程脚本中，我们需要实例化 Tray 组件：

// main.js
const { BrowserWindow, Tray } = require('electron')
const createTray = () => {
  const tray = new Tray('./icon.png')
  tray.setToolTip('My Calendar App')
  tray.on('click', () => {
    if (mainWindow) {
      mainWindow.show()
    } else {
      createWindow()
    }
  })
}

4. 在 UI 中使用 Tray

现在，我们可以在 UI 中使用我们的 Tray 组件：

<!-- App.vue -->
<template>
  <tray />
</template>

结语

通过配置 Tray 显示功能，我们大大提升了 Mac 版日历的便利性和用户体验。用户可以轻松地在托盘中访问应用程序，随时获取日历通知，并在需要时快速显示应用程序窗口。在开发应用程序时，考虑集成 Tray 功能是一个值得考虑的选择，因为它可以显著增强用户交互体验。