当前位置: 首页 > news >正文

electron教程(三)窗口设置

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

项目文件目录如下:

一、必要属性(3个)

width、height、webPreferences

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

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

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

  // 设置窗口大小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.窗口坐标

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

x: 100,
y: 50, 

2.是否展示窗体

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

show:true // true展示 false不展示

3.设置最大/最小宽高

具体数值根据需求来

  maxWidth: 1200,maxHeight: 800,minWidth: 300,minHeight: 500,

4.是否可以缩放

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

resizable: true // true缩放 false不能缩放

5.无边框窗口

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

frame: false // true不隐藏 false隐藏

6.窗口是否透明

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

transparent: true // true透明 false不透明

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

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

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

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

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

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

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

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

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

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

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

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

http://www.lryc.cn/news/449499.html

相关文章:

  • 图像增强论文精读笔记-Deep Retinex Decomposition for Low-Light Enhancement(Retinex-Net)
  • 2024年配置YOLOX运行环境+windows+pycharm24.0.1+GPU
  • vue-i18n在使用$t时提示类型错误
  • 大厂面试真题-什么是CAS单点登录?什么原理
  • 用Java提取PDF表格到文本、CSV、Excel工作表
  • OpenCV视频I/O(10)视频采集类VideoCapture之从视频流中检索一帧图像函数 retrieve()的使用
  • 【RocketMQ】SpringBoot整合RocketMQ
  • mysql replace无法替换空格?如何解决
  • Redis篇(环境搭建)
  • 【C++题目】7.双指针_和为 s 的两个数字
  • 网络通信1-传输层
  • 【JAVA源码授权】
  • tauri开发软件中,使用tauri自带的api用浏览器打开指定的url链接
  • OpenCV-图像拼接
  • C++【类和对象】(取地址运算符重载与实现Date类)
  • oracle 数据库中的异常和游标管理
  • 关于python 日志设定为INFO 但是DEBUG仍旧写入的问题
  • TypeScript 语法基础 第一部分 类型
  • GO Serial 学习与使用
  • 安卓app开发系列之-常用工具与库
  • 视频汇聚EasyCVR视频监控平台调取接口提示“认证过期”是什么原因?
  • uniapp视频禁止用户推拽进度条并保留进度条显示的解决方法——方案二
  • mysql复合查询 -- 多表查询(介绍,笛卡尔积,使用),自连接(介绍,使用)
  • 【个人笔记】数据一致性的解决方案
  • 【WPF】多屏幕展示
  • vue admin 若依框架 解决无权限时进入死循环的问题 auths
  • kubernetes存储入门(kubernetes)
  • 局部代理有什么好处?为什么不使用全局代理?
  • ssm模糊知识点整合
  • 2、Spring Boot 3.x 集成 Feign