本章主要内容

1. 添加自定义应用图标
2. 添加窗口置顶功能

到目前为止，我们的应用都是用的默认的应用图标，这章我们就添加我们自己的图标。

一、添加自定义图标

1. 引入图标

在根目录下新建一个名为public的文件夹，将我们的应用程序图标放入其中。

2. 修改main.js

const { app, BrowserWindow, Menu } = require('electron');const menu = require('./menu');const path = require('path');function createWindow () {  const win = new BrowserWindow({    width: 800,    height: 600,    icon: path.join(__dirname, 'public/favicon.ico')  })  win.loadFile('index.html')}app.whenReady().then(() => {  createWindow();  app.on('activate', () => {    if (BrowserWindow.getAllWindows().length === 0) {      createWindow()    }  });});app.on('window-all-closed', () => {  if (process.platform !== 'darwin') {    app.quit();  }});Menu.setApplicationMenu(menu);

3. 运行应用

npm start

我们可以看到应用的图标已经更换成功了。

二、添加窗口置顶功能

1.修改menu.js

const { Menu, dialog, BrowserWindow } = require('electron');let isAlwaysOnTop = false;const template = [  // 文件菜单  ...  // 编辑菜单 ....  // 查看菜单  {    label: '查看',    submenu: [      {        label: '开发者工具',        role: 'toggleDevTools'      },      {        type: 'separator'      },      {        label: '全屏',        role: 'togglefullscreen'      },      {        label: '窗口置顶',        click() {          isAlwaysOnTop = !isAlwaysOnTop;          const window = BrowserWindow.getFocusedWindow();          window.setAlwaysOnTop(isAlwaysOnTop);        }      }    ]  },  // 帮助菜单  ...    ]  }];const menu = Menu.buildFromTemplate(template);module.exports = menu;

2.运行应用程序

npm start

现在可以点击看“查看”菜单下的“窗口置顶”子菜单看看效果，我们可以看到窗口已经可以成功切换置顶和非置顶状态。

3.优化

这里可以对“窗口置顶”菜单进行优化，让它在选中时显示“被勾选”标记，未选中时去除标记，就像我们在实际生活使用应用时一样。

修改menu.js

{        label: '窗口置顶',        type: 'checkbox',        checked: isAlwaysOnTop,        click() {          isAlwaysOnTop = !isAlwaysOnTop;          const window = BrowserWindow.getFocusedWindow();          window.setAlwaysOnTop(isAlwaysOnTop);        }  }

再次执行第2步时的命令启动应用可以看到效果。