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

📚 推荐阅读

相关推荐
半点寒12W1 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端2 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~2 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程2 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏2 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083163 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头4 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's4 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫4 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim4 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron