Electron 后台常驻服务实现(托盘 + 开机自启)

基于 electron-vite-vue 项目结构

本篇将详细介绍如何为 Electron 应用实现后台常驻运行,包括:

  • ✅ 创建系统托盘图标(Tray)
  • ✅ 支持点击托盘菜单控制窗口显示/退出
  • ✅ 实现开机自启功能(Auto Launch)

📁 项目结构建议

复制代码
electron-vite-vue/
├── electron/
│   ├── main/
│   │   ├── index.ts        # 主进程入口
│   │   ├── tray.ts         # 托盘功能实现
│   │   └── autostart.ts    # 开机启动功能
├── resources/
│   └── iconTemplate.png    # 托盘图标
├── src/
│   └── App.vue
└── package.json

🖼️ 1. 托盘功能实现(electron/main/tray.ts)

ts 复制代码
import { Tray, Menu, BrowserWindow, nativeImage, app } from 'electron'
import path from 'path'

let tray: Tray | null = null

export function createTray(win: BrowserWindow) {
  const icon = nativeImage.createFromPath(
    path.join(__dirname, '../../resources/iconTemplate.png')
  )
  icon.setTemplateImage(true) // macOS 支持暗黑模式适配

  tray = new Tray(icon)
  tray.setToolTip('我的 Electron 应用')

  const contextMenu = Menu.buildFromTemplate([
    { label: '显示窗口', click: () => win.show() },
    { label: '退出', click: () => { app.quit() } }
  ])
  tray.setContextMenu(contextMenu)

  tray.on('click', () => {
    win.isVisible() ? win.hide() : win.show()
  })

  tray.on('double-click', () => {
    win.show()
  })
}

🧩 2. 主窗口关闭时隐藏到托盘(electron/main/index.ts)

ts 复制代码
mainWindow.on('close', (e) => {
  if (!app.isQuiting) {
    e.preventDefault()
    mainWindow.hide()
  }
})

⚙️ 3. 开机启动功能(electron/main/autostart.ts)

ts 复制代码
import { app } from 'electron'

export function enableAutoLaunch() {
  app.setLoginItemSettings({
    openAtLogin: true,
    path: app.getPath('exe') // 自动获取应用路径
  })
}

Windows/macOS 默认支持。Linux 需要创建 .desktop 文件或使用 auto-launch 库。


🔗 4. 在主进程入口中调用(electron/main/index.ts)

ts 复制代码
import { enableAutoLaunch } from './autostart'
import { createTray } from './tray'

app.whenReady().then(() => {
  mainWindow = createWindow()
  enableAutoLaunch()
  createTray(mainWindow)
})

🧪 注意事项(平台兼容)

功能 Windows macOS Linux
托盘 ✅ 完全支持 ✅ 支持(建议使用 Template 图标) ⚠️ 依赖桌面环境
开机自启 ✅(需签名或添加权限) ⚠️ 建议用 auto-launch

✅ 效果总结

功能项 效果说明
托盘交互 支持点击/双击托盘控制窗口
窗口关闭 不退出程序,仅隐藏
托盘菜单 显示主界面 / 退出程序
开机自启 系统启动时自动运行 Electron 应用

📚 推荐阅读

相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架