三 自定义应用图标和窗口置顶

本章主要内容

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

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

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

一、添加自定义图标

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: 'close'
      }
    ]
  },
  // 编辑菜单
  {
    label: '编辑',
    submenu: [
      { label: '撤销', role: 'undo' },
      { label: '重做', role: 'redo' },
      { type: 'separator' },
      { label: '剪切', role: 'cut' },
      { label: '复制', role: 'copy' },
      { label: '粘贴', role: 'paste' },
      { label: '删除', role: 'delete' },
      { type: 'separator' },
      { label: '全选', role: 'selectAll' }
    ]
  },
  // 查看菜单
  {
    label: '查看',
    submenu: [
      {
        label: '开发者工具',
        role: 'toggleDevTools'
      },
      {
        type: 'separator'
      },
      {
        label: '全屏',
        role: 'togglefullscreen'
      },
      {
        label: '窗口置顶',
        click() {
          isAlwaysOnTop = !isAlwaysOnTop;
          const window = BrowserWindow.getFocusedWindow();
          window.setAlwaysOnTop(isAlwaysOnTop);
        }
      }
    ]
  },
  // 帮助菜单
  {
    label: '帮助',
    role: 'help',
    submenu: [
      {
        label: '关于electronapp',
        click() {
          dialog.showMessageBox({
            message: '这是一个Electron应用！',
            type: 'info',
            title: 'electron应用'
          });
        }
      }
    ]
  }
];

const menu = Menu.buildFromTemplate(template);

module.exports = menu;

2.运行应用程序

npm start

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