1.修改打包后的应用名称和修改应用icon
// 修改应用名称:在package.json中修改productName的名称即可`在这里插入代码片`
"productName": '应用名称'
// 修改应用icon:在.electron-vue中的build.config.js中修改icon的地址即可
icon: path.join(__dirname, '../build/icons/xxx')
2.最小化到托盘中
// 在src/main/index.js中修改
import { app, BrowserWindow, ipcMain, Tray, Menu } from 'electron'
const path = require('path');
// 托盘对象
var appTray = null;

if (process.env.NODE_ENV !== 'development') {
  global.__static = require('path').join(__dirname, './static').replace(/\\/g, '\\\\')
}

let mainWindow
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080`
  : `file://${__dirname}/index.html`

function createWindow() {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 390,
    useContentSize: true,
    width: 402,
    transparent: true, // 透明 要想实现打开客户端后显示透明效果 要默认关闭控制台
    frame: false, // 是否拖拽
    resizable: false, // 是否缩放
    skipTaskbar: true //是否隐藏任务栏中的应用图标
  })
  // 打开控制台 
  mainWindow.webContents.openDevTools()
  // 关闭控制台
  // mainWindow.webContents.closeDevTools()
  ipcMain.on('min', e => mainWindow.minimize()) //监听自定义的最小化方法
  // 系统托盘右键菜单
  var trayMenuTemplate = [
    {
      'label': '设置',
      click: function () { }
    },
    {
      'label': '帮助',
      click: function () { }
    },
    {
      'label': '退出',
      click: function () { mainWindow.close() } //关闭客户端
    }
  ]
  //系统托盘图标目录
  appTray = new Tray(path.join(__dirname, '../../static/icon.ico')) // 引入托盘中的小图标本地测试相对路径
  // appTray = new Tray(path.join(__dirname, '/static/icon.ico')) // 打包使用绝对路径
  //图标的上下文菜单
  const contextMenu = Menu.buildFromTemplate(trayMenuTemplate); 
  appTray.setContextMenu(contextMenu);
  // 点击托盘中的图标显示客户端
  appTray.on('click', function () {
    mainWindow.show();
  })
  mainWindow.loadURL(winURL)

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

3.设置开机自启动
// 在主进程中添加代码
const path = require('path');
const ex = process.execPath;
const updateExe = path.resolve(ex, '..', 'xxx.exe') 打包后生成的exe文件
const exeName = path.basename(process.execPath)

// 开机自启动
  // ipcMain.on('openAutoStart', () => {
  app.setLoginItemSettings({
    openAtLogin: true,
    openAsHidden: true,
    path: updateExe,
    args: [
      '--processStart', `"${exeName}"`,
      '--process-start-args', `"--hidden"`
    ]
  });

遇到的问题:

1.以为业务需要需要右键托盘中的图标显示菜单并调用接口,但是在主进程中不能使用js的一些方法和axios调用接口,所以写到了渲染进程中,但是开机自启动后托盘中的图标过一会就会自己消失,解决方案如下:

// 主进程中createWindow函数中添加代码
mainWindow.webContents.on('did-finish-load', function () {
    mainWindow.webContents.send('ping', 'whoooooooh!'); //主进程发送消息ping
  });
// 渲染进程中去使用这个方法并把托盘代码放到这个方法中
// 托盘开始
let appTray = null;
electron.ipcRenderer.on('ping', function (event, message) {
  // appTray = new electron.remote.Tray(path.join(__dirname, '../../static/icon.ico'))
  appTray = new electron.remote.Tray(path.join(__dirname, '/static/icon.ico'))
  // 系统托盘右键菜单
  var trayMenuTemplate = [
  ]
  let contextMenu = electron.remote.Menu.buildFromTemplate(trayMenuTemplate);
  appTray.setContextMenu(contextMenu);
  appTray.setToolTip('校园e点通');
  appTray.on('click', function () {
    electron.ipcRenderer.send('show')
  })
  // 托盘结束
})
Logo

前往低代码交流专区

更多推荐