preface

Earlier we learned about Electron and how to do process communication.

For more information, click on Step 1, Teaching you to Develop desktop Applications with one Click and Electron 2, Process Communication.

Next, let’s do what desktop PC applications do. Window operation, tray setting, anti-application opening… Electron provides a complete method that we can easily implement with a simple setup

The Windows operating

Electron comes with a default set of Windows as well as a toolbar, as shown below

This may not be what we want. We have UI diagrams, and we want to customize the window toolbar. This is where you need to set the browser window parameter to no border when creating it.

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

Next, we can write the top menu button into the rendering process and implement some of the window’s column operations through the process communication from Part 2.

Maximum and minimum window

Window manipulation is simple, just take the browser window object we created above and call the built-in methods. Since the renderer cannot call methods in the main process directly, it needs process communication, first registering events in the main process:

Ipcmain. on('window-min', () => {win.minimize(); }) / / 2. Maximize window ipcMain. On (' window - Max, () = > {win. Maximize (); })Copy the code

Then call in the render process:

// Minimize window.ipcrenderer. send('window-min'); // Maximize window.ipcrenderer. send('window-max'); Note: HERE I put ipcRenderer in the window in preload.Copy the code
The window closed
// Force the window to close win.destroy(); // Exit APP app.quit(); Win.destory () forces the current window to close. You can also use app.quit() to close all Windows. But often in business, what we might want to do is not close, but minimize to the tray. // Hide window win.hide(); Win.setskiptaskbar (true); win.setskipTaskbar (true);Copy the code
Window is placed at the top
If (win.isalWaysonTop ()) {win.setalWaysonTop (false); BrowserWindow.getFocusedWindow().webContents.send('alwaysOnTop', false); } else {// set win.setalwaysonTop (true); BrowserWindow.getFocusedWindow().webContents.send('alwaysOnTop', true); }Copy the code

With the top set, we can give the render layer another notification to change the display state. You may also need to register a method that the rendering layer can call at any time to get the current top state.

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

The tray is set

The tray is a bunch of small ICONS on the right side of the menu bar in the Window. If you do not set the tray, you may find your application in the task manager after the minimize to tray method is completed. Below is a simple exit logic written in the tray.

Let tray = new tray (' here is ico map path '); // Const contextMenu = menu. buildFromTemplate([{label: 'exit ', click: () = > {win. Destroy ()}},]) / / tray. The tray click events on (' click '() = > {win. The show (); }) tray.setToolTip(' Here is the mouse hover tip ') Tray.setContextMenu (contextMenu)Copy the code

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

Prevent multiple applications

In a real-world application scenario, you probably don’t want the user to open a new application window every time he or she double-clicks an application on the desktop. We can set this in the main process to disable multiple applications from starting multiple times.

/ / this method return value indicates the success of your application instance made lock const gotTheLock = app. RequestSingleInstanceLock () if (! GotTheLock) {// If it fails to acquire the lock, you can assume that another application instance // has already acquired the lock and is still running, and immediately exits. app.quit() }Copy the code

conclusion

The simple setup makes the application more and more sophisticated, and Electron offers a wide variety of implementations that you may discover in the documentation. Oh, and I almost forgot there was another big one. In the next article, we’ll look at how to update an application.