【Electron-vue】创建桌面应用（13）- Electron应用隐藏到托盘

现在大多数的应用程序，在点击关闭的时候不会再任务栏显示，而是隐藏到托盘中，然后点击托盘中的程序图标，就会打开应用面板。

electron提供了一些插件来实现这种需求，主要是Tray, Menu这两个插件。
由于代码比较少，所以就不啰嗦了。

有些小伙伴在实现的过程中会出现各种问题，这里把优化之后的完整代码粘贴一下，由于这个代码包含了一些业务处理，可以只关注Tray和Menu相关的代码，如果有疑问，请留言：

import {
   
    app, BrowserWindow, ipcMain, Tray, Menu } from 'electron'
import log from 'electron-log'
import fs from 'fs'
import cp from 'child_process'
import path from 'path'

// 设置最大监听数
require('events').EventEmitter.prototype._maxListeners = 100

// 创建日志文件目录
if (!fs.existsSync(process.env.USERPROFILE + '/Dynarose')) {
   
   
  fs.mkdir(process.env.USERPROFILE + '/Dynarose')
}
// fs.mkdir(process.env.USERPROFILE + '/Dynarose')
// 仅用于开发环境日志输出，生产环境下请注销所有日志输出
log.transports.file.file = process.env.USERPROFILE + "/Dynarose/client.log"

let mainWindow
let cmdStr
let startMsg
let child
let tray = null
let isNotPassword = true

// 未登录菜单
const loginContextMenu = Menu.buildFromTemplate([
  {
   
   
    label: '退出', click: () => {
   
   
      exitExe()
    }
  }
])

// 登录后的菜单
const homeContentMenu = Menu.buildFromTemplate([
  {
   
   
    label: '修改密码', click: () => {
   
   
      // 修改密码，调整窗口大小，并且切换主页面显示内容
      setWindowSize(400, 200)
      mainWindow.show()
      mainWindow.webContents.send("show-password")
    }
  },
  {
   
   
    type: 'separator',
  },
  {
   
   
    label: '注销', click: () => {
   
   
      logout()
    }
  },
  {
   
   
    type: 'separator',
  },
  {
   
   
    label: '退出', click: () => {
   
   
      exitExe()
    }
  }
])


// 生产环境 打包后exe文件放入到打包后可执行文件同一目录
if (process.env.NODE_ENV !== 'development') {
   
   //生成环境
  cmdStr = './main.exe'
} else {
   
   //研发环境
  cmdStr = `${
     
     __dirname}/main.exe`
}
/**
 * Set `__static` path to static files in production
 * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
 */
if (process.env.NODE_ENV !== 'development') {
   
   
  global.__static = path.join(__dirname, '/static').replace(/\\/g, '\\\\')
}


const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080`
  : `file://