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

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

现在，当我们在启动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');    // 导入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就行了，可以参考二 自定义应用菜单 中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;

再次运行程序可以看到效果。

可以点击菜单看看效果。