【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后,会出现如下错误提示:

【electron】electron-builder-start 实现系统托盘(tray)_第1张图片

从报错得知是路径加载错误,通过此错误恰好可以了解项目 js 其实打包到 ./resources/app.asar/webpack:中去了;也可以了解到 __static 和 __dirname 的作用及区别。

你可能感兴趣的:(原创,electron)