This is the third day of my participation in the August Text Challenge.More challenges in August

The electron + vue3 + TS realizes the desktop gadget the next day

preface

Yesterday we set up the Electron + vue3 + TS development environment, today we are going to learn the Electron BrowserWindow module.

introduce

Electron inherits the multi-process architecture from Chromium, which makes the framework architecturally very similar to a modern web browser.

Electron divides the main process and the render process.

The main process

Each Electron application has a single main process that serves as the entry point for the application. And the main process runs in the Nodejs environment, which means we can use Nodejs in the main process. I’m starting to have a lot of ideas.

The main purpose of the main process is to create and manage application Windows using the BrowserWindow module. We’ll cover the BrowserWindow module later.

Rendering process

Each Electron app generates a separate renderer process for each BrowserWindow opened (with each webpage embedded).

You can simply think of the rendering process as an open Web interface,

BrowserWindow module

In background.ts we can find his use to create and control the browser window.

use

const { BrowserWindow } = require('electron');
const top = new BrowserWindow()
Copy the code

When BrowserWindow is used, you can pass an optional options argument. We can create the window we want by setting the parameters.

Parameter names explain type
title Window title, default: Electron string
icon Path to the window icon string
width The width of the window in pixels. The default value is800 number
height The height of the window, in pixels. The default value is600 number
x The positioning of the window on the left side of the screen, centered by default number
y The position of the window at the top of the screen, centered by default number
useContentSize willwidth 和 heightSet to the size of the Web page. The default value isfalse boolean
center Whether the window is centered in the screen boolean
minWidth The minimum width of the window, default is0 number
minHeight The minimum height of the window, default is0 number
maxWidth The minimum width of the window. The default value is unlimited number
maxHeight The minimum height of the window. The default value is unlimited number
resizable Whether the window size can be adjusted. The default istrue boolean
alwaysOnTop Top or not, default valuefalse boolean
fullscreen Full screen: Default valuefalse boolean
fullscreenable Whether the window can enter the full-screen state. Default valuetrue boolean
frame Whether a window has a border. The default istrue boolean

The above are individual parameters of Options. For details, go to BrowserWindow

conclusion

Today we learned the parameters of BrowserWindow module, and tomorrow we can set our application window according to the parameters

Ps: Another dull day