【electron】electron-builder-start 實現系統托盤（tray）

練習代碼git：https://github.com/SmileEricXin/electronPractice.git

//src\main\index.js 做以下修改

// 新增調用
import * as tray from './tray'

// create main BrowserWindow when electron is ready
// 修改ready事件
app.on('ready', () => {
  mainWindow = createMainWindow()
  
  // create tray
  tray.creatTray()
})

// 增加函數
export function getWin () {
  return mainWindow
}

// 新建文件 src\main\tray\index.js

import { Menu, Tray, app, dialog } from 'electron'
import path from 'path'
import { getWin } from '../index'

let tray = null

// 激活窗口
function activeMainWin () {
  let win = getWin()
  if ( win ) {
    if (win.isVisible()) {
      win.focus()
    }
  }
}

// 退出銷燬對象
app.on('quit', () => {
  tray && tray.destroy()
  tray = null
})

// 新建非模態窗口


// 創建系統托盤
export function creatTray () {
  // 寫法一
  // 路徑是：.\dist\win-ia32-unpacked\resources\static\resource\win, 後面部分不要加static
  // tray = new Tray(path.join(__static, './resource/win/icon.ico'))

  // 寫法二
  // 路徑是：.\dist\win-ia32-unpacked\resources\app.asar\..\static\resource\win
  tray = new Tray(path.join(__dirname, '../static/resource/win/icon.ico'))

 // 記得放置icon: .\static\resource\win\icon.ico 

  const contextMenu = Menu.buildFromTemplate([
    { 
      label: '關於',
      click (menuItem, win, event) {
        console.log('menuItem:', menuItem)
        console.log('win:', win) // win: null
        console.log('event:', event) // { shiftKey: true, ctrlKey: true, altKey: true, metaKey: false }

        dialog.showMessageBox ({
          message: 'this is a test project by eric xin.'
        })
      }
    },
    { type: 'separator' }, // 分割線
    { 
      label: '退出',
      click (menuItem, win, event) {
        app.quit()
      }
    }
  ])

  tray.setToolTip('This is my test project')

  tray.on('click', (event, bounds, pos) => { // 左鍵點擊
    try {
      // 激活窗口
      activeMainWin()
    } catch (err) {
      console.error(err)
    }
  })
  .on('right-click', (event) => { // 右鍵點擊
    // 彈出菜單
    tray.popUpContextMenu(contextMenu)
  })
}

【bug】

new tray 的最初寫法是：

tray = new Tray('./static/resource/win/icon.ico')

上面寫法在yarn build後，會出現如下錯誤提示：

從報錯得知是路徑加載錯誤，通過此錯誤恰好可以瞭解項目 js 其實打包到 ./resources/app.asar/webpack:中去了；也可以瞭解到 __static 和 __dirname 的作用及區別。