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