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

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.kler.cn/a/326102.html

相关文章:

  • pycharm分支提交操作
  • shell脚本_永久环境变量和字符串操作
  • SpringBoot多环境配置的实现
  • 后台管理系统(开箱即用)
  • 孙赢利_11月17日_超分周报
  • LeetCode题解:17.电话号码的数字组合【Python题解超详细,回溯法、多叉树】,知识拓展:深度优先搜索与广度优先搜索
  • 微服务--Docker
  • 前端vue3中父div width: 40%; height: 62%; 子div如何设置相对父位置不变
  • 边缘计算网关:轻工行业的智能化新引擎
  • 数据权限的设计与实现系列11——前端筛选器组件Everright-filter集成功能完善2
  • 物业管理小程序开发
  • 微软SCCM:企业级系统管理的核心工具
  • 精密制造的革新:光谱共焦传感器与工业视觉相机的融合
  • JS设计模式之观察者模式:观察者与可观察对象的巧妙互动
  • 计算机毕业设计 基于Python国潮男装微博评论数据分析系统的设计与实现 Django+Vue 前后端分离 附源码 讲解 文档
  • 企业微信:客户联系自带群发工具和聊天工具
  • 【前端安全】burpsuite前端jsEncrypter插件详解
  • Python网络爬虫获取Wallhaven壁纸图片(源码)
  • 成都网安周暨CCS2024 | 大模型安全与产业应用创新研讨活动成功举办
  • 什么是javascript的事件循环
  • 如何使用ssm实现基于BS的库存管理软件设计与实现+vue
  • 河南移动:核心营业系统稳定运行超300天,数据库分布式升级实践|OceanBase案例
  • SpringCloud 2023 LoadBalancer介绍、使用、获取服务列表原理、负载均衡算法
  • 【2024保研经验帖】中科院信工所夏令营经验分享
  • 【Git原理与使用】Git初识基本操作
  • 企业微信 标准年级对照表