这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

electron + vue3 + ts 实现桌面小工具第二天

前言

昨天我们搭建了electron + vue3 + ts的开发环境，今天我们要水学习一下electron的BrowserWindow模块。

Electron 继承了来自 Chromium 的多进程架构，这使得此框架在架构上非常相似于一个现代的网页浏览器。

electron分为主进程和渲染进程。

每个Electron应用都有一个单一的主进程，作为应用程序的入口点。并且主进程在Nodejs环境中运行，这意味着我们可以在主进程中使用Nodejs。我已经开始有很多骚想法了。

主进程的主要目的是使用BrowserWindow模块创建和管理应用程序窗口。稍后我们将介绍BrowserWindow模块。

每个 Electron 应用都会为每个打开的 BrowserWindow ( 与每个网页嵌入 ) 生成一个单独的渲染器进程.

可以简单的把渲染进程理解为一个打开的web界面，

在background.ts中我们就可以找到他的使用创建并控制浏览器窗口。

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

在使用BrowserWindow时，可传一个可选的options参数。我们可以通过参数的设置来创建我们想要的窗口。

参数名	解释	类型
title	窗口标题，默认：Electron	string
icon	窗口图标的路径	string
width	窗口的宽度(以像素为宽度)。默认值为 `800`	number
height	窗口的高度(以像素为单位)。默认值为 `600`	number
x	相当于窗口位于屏幕左侧的定位，默认居中	number
y	相当于窗口位于屏幕顶部的定位，默认居中	number
useContentSize	将`width` 和 `height` 设置为 web 页面的尺寸。默认值为 `false`	boolean
center	窗口是否在屏幕居中	boolean
minWidth	窗口的最小宽度，默认为`0`	number
minHeight	窗口的最小高度，默认为`0`	number
maxWidth	窗口的最小宽度，默认值不限	number
maxHeight	窗口的最小高度，默认值不限	number
resizable	窗口大小是否可调整，默认为`true`	boolean
alwaysOnTop	是否置顶，默认值`false`	boolean
fullscreen	是否全屏，默认值`false`	boolean
fullscreenable	窗口是否可以进入全屏状态，默认值`true`	boolean
frame	窗口是否有边框，默认为`true`	boolean

以上为options的个别参数，详细参数前往BrowserWindow查看

今天学习了BrowserWindow模块的参数，明天可以根据参数去设置我们应用的窗口

ps：又是无趣的一天