preface

Earlier, we learned what Electron is and how to communicate in process.

If you want to know more about it, you can click the first article "teach you to develop desktop applications with one click" and the second article "Electron Chapter 2 - process communication"

Next, let's do something about PC desktop applications. Window operation, tray setting, anti application multi opening, etc... Electron provides a complete method, so that we can easily achieve it with 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 a UI diagram. We want to customize the window toolbar. Here, you need to set the parameter to borderless window when creating browser window.

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

Next, we can write the top menu button in the rendering process, and then realize some column operations of the window through process communication in Chapter 2.

Window max min

The window operation is very simple. Just get the browser window object we created above and call the built-in method. Because the rendering process cannot directly call methods in the main process, process communication is required. First, register events in the main process:

// 1. Window minimization
ipcMain.on('window-min', () => {
    win.minimize();
})

// 2. Window maximization
ipcMain.on('window-max', () => {
    win.maximize();
})

Then, in the rendering process, we call:

// window minimizing
window.ipcRenderer.send('window-min');
// window maximizing
window.ipcRenderer.send('window-max');
Note: Here I am preload Lieutenant general ipcRenderer Put it window Therefore, it is written in this way.

window closing

// Force close window
win.destroy();
// Exit APP
app.quit();
    win.destory()You can force the current window to close. Of course, it can also be used app.quit()To close all windows. But often in business, what we may want is not to close, but to minimize to the tray.

 // Hide window
 win.hide();
 // Make the window not appear in the taskbar
 win.setSkipTaskbar(true);

Window top

// Is it currently in the top status
if (win.isAlwaysOnTop()) {
    // Cancel topping
    win.setAlwaysOnTop(false);
    BrowserWindow.getFocusedWindow().webContents.send('alwaysOnTop', false);
} else {
    // Topping
    win.setAlwaysOnTop(true);
    BrowserWindow.getFocusedWindow().webContents.send('alwaysOnTop', true);
}

After setting the top, we can give another notification to the render layer to change the display state. In addition, you may need to register a method for the render 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 the pile 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 completed, and you can only find your application in the task manager. An exit logic is simply written in the tray below.

let tray = new Tray('Here is ico Graph path');
// Tray right-click menu
const contextMenu = Menu.buildFromTemplate([
    {
        label: 'sign out', click: () => {
            win.destroy()
        }
    },
])
// Tray click event
tray.on('click', () => {
    win.show();
})
tray.setToolTip('Mouse here hover Time tip Prompt language')
tray.setContextMenu(contextMenu)

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

Prevent application over opening

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

//The return value of this method indicates whether your application instance successfully acquired the lock  
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
//If it fails to acquire the lock, you can assume another application instance
//The lock has been acquired and is still running and exits immediately.
    app.quit()
}

summary

Simple settings make the application more and more perfect. Electron provides a wide variety of implementation methods. You may also find new discoveries in the document. By the way, I almost forgot there was another important thing. Next, let's look at how to update the application.