Electron第三篇--基础功能实现

2023-11-24 15:57:51

前言

前面我们一起了解了什么是Electron，了解了如何进行进程通信。

想要了解的可以点击移步第一篇《教你一键开发桌面应用程序》与第二篇《Electron第二篇–进程通信》

接下来，让我们干点儿PC桌面应用程序该干的事儿。窗口操作、托盘设置、防应用多开等等…Electron提供了完整的方法，让我们只需要简单的设置即可轻松实现

窗口操作

Electron提供了一套默认的窗口以及工具栏，如下图

这可能不是我们想要的。我们有UI图，我们想要定制化窗口工具栏。这里就需要在创建浏览器窗口的时候给与参数设置为无边框窗口。

 let win = new BrowserWindow({
        ...
        frame: false,
        ...
 })

紧接着，我们可以把顶部菜单按钮写在渲染进程中，再通过第二篇中的进程通信来实现窗口的一些列操作。

窗口最大最小化

窗口操作很简单，只需要拿到上面我们创建的浏览器窗口对象，调用其中内置的方法即可。因为渲染进程无法直接调用到主进程中的方法，因此需要进程通信，首先在主进程中注册事件：

// 1. 窗口 最小化
ipcMain.on('window-min', () => {
    win.minimize();
})

// 2. 窗口 最大化
ipcMain.on('window-max', () => {
    win.maximize();
})

然后在渲染进程中调用：

// 窗口最小化
window.ipcRenderer.send('window-min');
// 窗口最大化
window.ipcRenderer.send('window-max');
注：此处我是在preload中将ipcRenderer放到了window中，故有此写法。

窗口关闭

// 强制关闭窗口
win.destroy();
// 退出APP
app.quit();
    win.destory()可以强制关闭当前窗口。当然也可以使用app.quit()来关闭所有窗口。但是常常在业务中，我们可能想要的不是关闭，而是最小化到托盘。

 // 隐藏窗口
 win.hide();
 // 使窗口不显示在任务栏中
 win.setSkipTaskbar(true);

窗口置顶

// 当前是否为置顶状态
if (win.isAlwaysOnTop()) {
    // 取消置顶
    win.setAlwaysOnTop(false);
    BrowserWindow.getFocusedWindow().webContents.send('alwaysOnTop', false);
} else {
    // 置顶
    win.setAlwaysOnTop(true);
    BrowserWindow.getFocusedWindow().webContents.send('alwaysOnTop', true);
}

设置好了置顶，我们可以再给渲染层一个通知，来更改显示状态。另外你可能还需要注册一个方法，供渲染层随时调用获取当前的置顶状态。

ipcMain.on('get-window-top', () => {
    BrowserWindow.getFocusedWindow().webContents.send('alwaysOnTop', win.isAlwaysOnTop());
});

托盘设置

托盘就是window中菜单栏右侧的那一堆小图标了。
若不设置托盘，可能上面的最小化至托盘的方法执行完，你就只能在任务管理器中找到你的应用了。下面简单写了一个退出逻辑在托盘中。

let tray = new Tray('此处为ico图路径');
// 托盘右键菜单
const contextMenu = Menu.buildFromTemplate([
    {
        label: '退出', click: () => {
            win.destroy()
        }
    },
])
// 托盘点击事件
tray.on('click', () => {
    win.show();
})
tray.setToolTip('此处为鼠标hover时候的tip提示语')
tray.setContextMenu(contextMenu)

想要实现更多可以在contextMenu中拓展你的右键菜单。

防止应用多开

实际应用场景中你可能不希望用户每次双击桌面上的应用程序就打开一个新的应用窗口。我们可以在主进程中进行此设置，来禁止多次应用程序多次启动。

//此方法的返回值表示你的应用程序实例是否成功取得了锁  
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
//如果它取得锁失败，你可以假设另一个应用实例
//已经取得了锁并且仍旧在运行，并立即退出。
    app.quit()
}

总结

简单的设置使得应用程序越来越完善，Electron提供了非常多各式各样的实现方法，在文档中你可能也会有新的发现。对了，差点儿忘了还有一个重头呢。下一篇，我们来研究一下如何进行应用程序的更新。

码农公寓

前言