electron教程(三)窗口设置

news/2024/10/4 12:00:49/

在main.js文件中,创建窗口时会设置窗口的大小,其实还有很多其他属性,可以根据实际需求选择设置,但部分属性存在局限性,官网也有明确告知:自定义窗口 | Electron (electronjs.org)

项目文件目录如下:

一、必要属性(3个)

width、height、webPreferences

一般初始化窗口,有这三个属性就可以了

javascript"> // 设置窗口大小const win = new BrowserWindow({/* -----以下3个为必要项----- */width: 800,height: 600,webPreferences: {// __dirname 指向当前正在执行的脚本的路径,在这里指向项目的根文件夹preload: path.join(__dirname, 'preload.js')},})
二、可选属性 

以下是我自己收集的一部分属性,不是全部,欢迎大家补充

javascript">  // 设置窗口大小const win = new BrowserWindow({/* -----以下3个为必要项----- */width: 800,height: 600,webPreferences: {// __dirname 指向当前正在执行的脚本的路径,在这里指向项目的根文件夹preload: path.join(__dirname, 'preload.js')},/* -----以下为可选项----- */// x: 100,// y: 50, // 窗口坐标// show: false, // 是否展示窗体,默认展示,不展示看不了内容哇,哈哈哈// maxWidth: 1200,// maxHeight: 800,// minWidth: 300,// minHeight: 500,// resizable: false, // 是否可以缩放// frame: false, // 无边框窗口(只保留主体部分,标题、icon、菜单栏、收起/全屏/关闭选项等全部隐藏)// transparent: true, // 窗口是否透明(当打开开发者工具时,窗口不透明)// autoHideMenuBar: true // 隐藏菜单// title: "测试-electron", // 这里设置了标题,页面中就不能再有title标签// icon: './img/cat.jpg', // icon图标// movable: true, // 窗口是否可移动// minimizable: false, // 窗口是否可以最小化// maximizable: true, // 窗口是否可以最大化// fullscreenable: true, // 窗口是否可以进入全屏状态// closable: true, // 窗口是否可以关闭})

1.窗口坐标

设置窗口坐标后,窗口打开会自动定位到屏幕对应位置 

javascript">x: 100,
y: 50, 

2.是否展示窗体

如果不写这个属性,默认是展示窗体,一般都是展示窗体,不展示就没有窗体弹出,啥都看不了,但是有不展示的需求,可以设置为false

javascript">show:true // true展示 false不展示

3.设置最大/最小宽高

具体数值根据需求来

javascript">  maxWidth: 1200,maxHeight: 800,minWidth: 300,minHeight: 500,

4.是否可以缩放

默认可缩放,不需要缩放就设置成false

javascript">resizable: true // true缩放 false不能缩放

5.无边框窗口

只保留主体部分,标题、icon、菜单栏、收起/全屏/关闭选项等全部隐藏 

javascript">frame: false // true不隐藏 false隐藏

6.窗口是否透明

当打开开发者工具时,就算设置了也还是不透明 。。。

javascript">transparent: true // true透明 false不透明

7.是否隐藏菜单
javascript">autoHideMenuBar: true // true隐藏 false不隐藏

8.窗口是否可移动
javascript">movable: true // true可移动 false禁止移动

9.窗口是否可最小化
javascript">minimizable: false // true可以 false不可以

10.窗口是否可最大化
javascript">maximizable: false // true可以 false不可以

11.窗口是否可进入全屏状态

点击缩放按钮时,如果不想切换到全屏状态,就要设置maxWidth、maxHeight两个属性;不设置时默认切换缩放为全屏模式

javascript">fullscreenable: false // true切换全屏模式 false切换最大化窗口,也就是要设置最大宽高
maxWidth: 900,
maxHeight: 800,

12.窗口是否可以关闭
javascript">closable: false // true可以 false不可以

13.设置标题
javascript">title: "测试-electron", // 这里设置了标题,页面中就不能再有title标签

14.设置icon图标
javascript">icon: './img/cat.jpg', // icon图标

各个属性如果组合使用,也会有不一样的效果,比如同时设置禁止最大/最小化,两个按钮直接不显示了,就不在此一一列举了。。。

javascript">minimizable: false, // 窗口是否可以最小化
maximizable: false, // 窗口是否可以最大化


http://www.ppmy.cn/news/1534399.html

相关文章

【GPT】对低阶版本的GPT探测:文学

诗名字一致,GPT就分不清了,还要多喂喂书,之前部分技术类的协议解析可以直接扔整本书给他自我学习。 温庭筠 相见欢 ChatGPT 说: ChatGPT 《相见欢》是温庭筠的一首经典词作,以其细腻的情感和优美的意象而著称。以下是…

[网络]NAT、代理服务、内网穿透、内网打洞

目录 一、NAT 1.1 NAT 技术背景 1.2 NAT IP 转换过程 1.3 NAPT(Network Address Port Translation) 1.地址转换表 2. NAPT(网络地址端口转换Network Address Port Translation) 3. NAT技术的缺陷 二、代理服务器 2.1 正向…

相机的内参 外参

相机的内参和外参是计算机视觉和摄影测量中的重要概念。以下是对它们的详细说明: 内参(Intrinsic Parameters) 内参定义了相机的内部特性,主要包括焦距、主点坐标以及畸变系数。内参矩阵 K 形式如下: 外参&#xf…

高级java每日一道面试题-2024年9月30日-服务器篇[Redis篇]-Redis持久化有几种方式?

如果有遗漏,评论区告诉我进行补充 面试官: Redis持久化有几种方式? 我回答: Redis 是一个高性能的键值存储系统,常用于缓存、消息队列和实时数据分析等场景。为了保证数据的持久性,Redis 提供了两种主要的持久化方式:RDB(Redi…

构建高效服装销售平台:Spring Boot与“衣依”案例

1系统概述 1.1 研究背景 如今互联网高速发展,网络遍布全球,通过互联网发布的消息能快而方便的传播到世界每个角落,并且互联网上能传播的信息也很广,比如文字、图片、声音、视频等。从而,这种种好处使得互联网成了信息传…

数造科技入选中国信通院《高质量数字化转型产品及服务全景图》三大板块

9月24日,2024大模型数字生态发展大会暨“铸基计划”年中会议在北京召开。会上,中国信通院发布了2024年《高质量数字化转型产品及服务全景图(上半年度)》和《高质量数字化转型技术解决方案(上半年度)》等多项…

使用 PHP 的 strip_tags函数保护您的应用安全

在现代 web 开发中,处理用户输入是一项常见的任务。然而,用户输入的内容往往包含 HTML 或 PHP 标签,这可能会导致安全漏洞,如跨站脚本攻击(XSS)。为了解决这个问题,PHP 提供了一个非常有用的函数…

【CKA】十二、持久化存储卷PersistentVolume

12、持久化存储卷PersistentVolume 1. 考题内容: 2. 答题思路: 按题目要求检查各个参数,我就是第一次没看清楚,把ReadWriteOnce写成ReadWriteMany了,幸亏做完检查了一遍 这个参数可有可无,加上也不影响 …