Electron Part 3--Basic Function Implementation

foreword

Earlier we learned what Electron is and how to communicate with processes.

If you want to know, you can click to move the first article "Teach you to develop desktop applications with one click" and the second article "Electron second article - process communication"

Next, let's do a little bit of what a PC desktop application should do. Window operation, tray settings, anti-app multi-opening, etc... Electron provides a complete method, which allows us to easily implement only simple settings

window operation

Electron provides a set of default windows and toolbars, as shown below

This may not be what we want. We have UI diagrams and we want to customize the window toolbar. Here, you need to set the parameters as a borderless window when creating the browser window.

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

Next, we can write the top menu button in the rendering process, and then implement some series of operations on the window through the process communication in the second article.

Window max and min

The window operation is very simple, you only need to get the browser window object we created above and call the built-in method. Because the rendering process cannot directly call the method in the main process, process communication is required, first register the event in the main process:

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

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

Then in the render process call:

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

window closes

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

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

window on top

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

After setting the top, we can give the rendering layer a notification to change the display state. In addition, you may also need to register a method for the rendering layer to call at any time to obtain the current top state.

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

Tray settings

The tray is a bunch of small icons on the right side of the menu bar in the window.
If you don't set the tray, the above method of minimizing to tray may be executed, and you can only find your application in the task manager. The following simply writes an exit logic in the tray.

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)

To achieve more, you can expand your right-click menu in contextMenu.

Prevent multiple apps from opening

In practical application scenarios, you may not want users to open a new application window every time they double-click an application on the desktop. We can make this setting in the main process to prevent multiple applications from starting multiple times.

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

Summarize

Simple settings make the application more and more complete, Electron provides a lot of various implementation methods, and you may also find new things in the documentation. By the way, I almost forgot that there is another important point. In the next article, let's look at how to update the application.

{{o.name}}

{{m.name}}