electron教程(三)窗口设置

news/2024/9/30 8:27:32 标签: electron, javascript, 前端

在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.niftyadmin.cn/n/5684721.html

相关文章

MyBatis<foreach>标签的用法与实践

foreach标签简介 实践 demo1 简单的一个批量更新&#xff0c;这里传入了一个List类型的集合作为参数&#xff0c;拼接到 in 的后面 &#xff0c;来实现一个简单的批量更新 <update id"updateVislxble" parameterType"java.util.List">update model…

华为云LTS日志上报至观测云最佳实践

华为云LTS简介 华为云云日志服务&#xff08;Log Tank Service&#xff0c;简称 LTS&#xff09;&#xff0c;用于收集来自主机和云服务的日志数据&#xff0c;通过海量日志数据的分析与处理&#xff0c;可以将云服务和应用程序的可用性和性能最大化&#xff0c;为您提供实时、…

贝锐蒲公英网盘首发,秒建私有云,高速远程访问

虽然公共网盘带来了不少便利&#xff0c;但是大家对隐私泄露和重要数据泄密的担忧也随之增加。如果想要确保数据安全&#xff0c;自建私有云似乎是一条出路&#xff0c;然而面对搭建私有云的复杂步骤&#xff0c;许多人感到力不从心&#xff0c;NAS设备的成本也往往让人望而却步…

机器学习:opencv--背景建模

目录 一、背景建模是什么&#xff1f; 二、背景建模的目的 三、背景建模的方法及原理 四、代码实现 1.创建卷积核 2.创建混合高斯模型 3.处理图像 4.绘制人形轮廓 5.条件退出 一、背景建模是什么&#xff1f; 指在计算机视觉中&#xff0c;从视频序列中提取出静态背景…

常用激活函数总结

文章目录 什么是激活函数激活函数的作用常用激活函数1.Sigmoid函数2.Softmax函数3.Tanh函数4.Relu函数5.LeakyRelu函数6.PRelu函数7.ELU函数8.SELU函数 什么是激活函数 激活函数&#xff0c;通俗讲&#xff0c;就是一个函数&#xff0c;针对某个神经元&#xff0c;就是将输入经…

解决R语言bug ‘sh‘ is not recognized as an internal or external command

安装源码包‘httr2’ trying URL ‘https://cran.rstudio.com/src/contrib/httr2_1.0.5.tar.gz’ Content type ‘application/x-gzip’ length 230632 bytes (225 KB) downloaded 225 KB installing source package ‘httr2’ … ** package ‘httr2’ successfully unpacked…

paypal支付v2.0(php)支付代码

第一步&#xff1a;获取access_token: <?php$clientId ; // 替换为你的 PayPal Client ID $clientSecret ; // 替换为你的 PayPal Client Secret// PayPal API 请求的 URL $url "https://api-m.sandbox.paypal.com/v1/oauth2/token";// 初始化 cURL $ch …

SpringCloud-Alibaba第二代微服务快速入门

1.简介 Spring Cloud Alibaba其实是阿里的微服务解决方案&#xff0c;是阿里巴巴结合自身微服务实践,开源的微服务全家桶&#xff0c;在Spring Cloud项目中孵化成为Spring Cloud的子项目。第一代的Spring Cloud标准中很多组件已经停更,如&#xff1a;Eureak,zuul等。所以Sprin…