四 系统托盘

本章主要内容
1.优化程序，解决启动白屏的问题
2.添加系统托盘功能

本系列的源码地址：https://gitcode.net/leqi/electronapp

一、优化程序，解决启动白屏问题

现在，当我们在启动Electron应用时会发现应用会有一会儿只有带白屏的窗口，而正式的内容（这里是网页index.html）才会加载进窗口。这时，我们可以在创建窗口的时候先不让其显示，等网页加载完后我们再显示窗口。

1.修改 main.js

这里我们只需要修改createWindow()方法：

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    icon: path.join(__dirname, 'public/favicon.ico'),
    show: false
  });

  mainWindow.loadFile('index.html')
  mainWindow.on('ready-to-show', () => {
    mainWindow.show();
  });
}

2.运行命令启动应用

npm run start

npm run start等同于npm start。

现在我们可以看到，应用显示的时候我们的网页也展示了，已经看不到白屏。

二、添加系统托盘功能

1.修改 main.js

let iconPath = path.join(__dirname, 'public/favicon.ico');

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    icon: iconPath,
    show: false
  });

  mainWindow.loadFile('index.html')
  mainWindow.on('ready-to-show', () => {
    mainWindow.show();
  });
}

function createTray() {
  const tray = new Tray(iconPath);
  tray.setToolTip('这是electron应用！');
}

app.whenReady().then(() => {
  createWindow();
  createTray();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  });
});

2.运行程序

npm start

系统托盘已经显示了我们应用的图标。
当然，这里我们因为只是展示如何添加系统托盘功能，没有给它增加其它功能，所以直接修改了main.js，而在现实场景中，我们的应用程序的系统托盘功能可能非常复杂，这时就像我在前面添加菜单时所提到的，给系统托盘功能新建一个单独的文件将总会是一个最佳实践，否则我们的main.js最后会臃肿不堪，不便于维护。

3.新建 tray.js文件

const { Tray } = require("electron");

let appTray = null;

const tray = (icon) => {
  appTray = new Tray(icon);
  appTray.setToolTip('这是electron应用！');
}

module.exports = tray;

4.修改 main.js

const { app, BrowserWindow, Menu} = require('electron');
const menu = require('./menu');
const path = require('path');
const tray = require('./tray');

let iconPath = path.join(__dirname, 'public/favicon.ico');
let mainWindow = null;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    icon: iconPath,
    show: false
  });

  mainWindow.loadFile('index.html')
  mainWindow.on('ready-to-show', () => {
    mainWindow.show();
  });
}

app.on('ready', () => {
  createWindow();
  Menu.setApplicationMenu(menu);
  tray(iconPath);

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  });
});

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

再次运行程序可以看到如上面第2步一样的效果。
接下来我们就可以在tray.js中修改增加我们想要的功能。这里我们就以添加一个菜单为例。

5.给托盘添加菜单

这里我们只需要修改tray.js就行了，可以参考 electron跨平台桌面应用开发（二） menu.js中创建菜单的方法。

const { Tray, dialog, Menu, app } = require("electron");

let appTray = null;
const template = [
  {
    label: '关于electronapp',
    click() {
      dialog.showMessageBox({
        message: '这是一个Electron应用！',
        type: 'info',
        title: 'electron应用'
      });
    }
  },
  {
    type: 'separator'
  },
  {
    label: '退出',
    click() {
      app.quit();
    }
  }
];

const contextMenu = Menu.buildFromTemplate(template);

const tray = (icon) => {
  appTray = new Tray(icon);
  appTray.setToolTip('这是一个electron应用！');
  appTray.setContextMenu(contextMenu);
}

module.exports = tray;

再次运行程序可以看到效果。
可以点击菜单看看效果。