electron 改变窗体大小

最新推荐文章于 2024-08-18 21:33:01 发布
最新推荐文章于 2024-08-18 21:33:01 发布
阅读量1.6w 收藏 6
点赞数 3
分类专栏： electron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ucmir183/article/details/89277510
版权
在Electron应用开发中，可以通过ipcRenderer和ipcMain的通讯，或者使用remote模块来改变窗口大小。ipcRenderer发送同步消息到主进程，主进程通过ipcMain监听并处理。另一种方式是直接使用remote模块的getCurrentWindow()方法获取窗体对象进行修改。虽然两者本质相同，但使用remote模块更为简便。推荐使用remote方式实现窗口大小调整。
摘要由CSDN通过智能技术生成

相关链接:
electron-vue 集成 element-ui
在开发 electron 的时候遇到了需要在 render 中修改 BrowserWindow 窗口大小的方式，经过一番尝试，有两种方法实现:

  1. 通过 ipcRenderer 与 ipcMain 的通讯来实现
  2. 通过 render 的 remote 模块来实现

ipcRenderer 和 ipcMain 实现

实现原理是 render 进程通过 ipcRenderer 与 ipcMain 进行通讯以通知 main 进程操作窗体操作。

在 render 引入 ipcRenderer

let {ipcRenderer} = require('electron')

发送同步消息给 main 进程

ipcRenderer.sendSync('synchronous-message','logined')

在 main 中监听同步消息，并处理 logined 消息操作

ipcMain.on('synchronous-message', (event, arg) =&g
最低0.47元/天 解锁文章
云溪111
关注
专栏目录
electron 改变窗体 大小_electron-vue跨平台桌面应用开发实战教程（四）——窗口样式&打开新窗口...
weixin_39914938的博客
11-11 972
> 本文我们讲解下怎么修改窗口样式，系统默认的窗口非常普通，通常与设计不符，所以我们要自定义，接下来我们讲解下怎么去掉原有样式，怎么实现实现窗口的最小化，最大化和关闭按钮。还有怎么打开一个新页面前三篇文章传送门electron-vue跨平台桌面应用开发实战教程（一）——Hello Worldelectron-vue跨平台桌面应用开发实战教程（二）——主进程常用配置electron-vue跨...
Electron无边框窗口（最小化、最大化、关闭、拖动）以及动态改变窗口大小
06-09
对应博客地址：https://blog.csdn.net/fukaiit/article/details/91351448 包括Electron无边框窗口原型和核心代码
electron仿微信，自定义置顶、最大化、最小化、关闭的封装方案
最新发布
yan1915766026的博客
08-18 429
electron仿微信，封装右上角的按钮组
electron自定义标题栏，并监听双击以及右键改变窗口大小。
weixin_45892086的博客
10-08 1668
当需要在标题栏添加一些额外的操作时候，比如添加 帮助 菜单，自带的标题栏开发起来比较困难（没了解不知道能不能实现），这时候，自己写一个标题栏就比较方便。
electron-vue跨平台桌面应用开发实战教程（三）——动态修改窗口大小
David1025的专栏
02-20 4503
前边两篇文字简单介绍了一下怎么搭建electron-vue项目，主进程的基本配置，主进程和渲染进程之间的通讯，有了这些基础知识之后，我们就能开发一个应用了。 这里我们开发一款密码管理器。现在各种不同类型的网站越来越多，我们注册的账号也越来越多，对应的密码也越来越多，我们也不可能都设置同样的密码，加入一个网站被黑了，我们的密码有可能被泄露了，这是非常可怕的。所以我们做一款密码管理器。主要包含以下...
【Eelectron-vue】构建桌面应用（16）-electron窗口大小设置
chenqk_123的专栏
10-26 6876
在使用electron进行桌面开发时，会随着业务的需要动态的改变窗口的大小，比如从登陆窗口跳转到主页面的时候需要去改变大小，退出登陆的时候也需要改变大小。发现在使用setSize去设置大小的时候，会出现有的时候可以改变大小，有的时候改变不了，经过一番尝试，可以和最大值最小值一起设置，无论在什么情况下都能改变大小。 import { app, BrowserWindow, ipcMain, Tray, Menu, dialog } from 'electron' let mainWindow mainWin
自动改变窗口大小_自动改变窗口大小_
09-30
例如，Python的Tkinter库提供`geometry`方法改变窗口大小，JavaScript的Electron框架允许通过`webContents.setSize`方法调整浏览器窗口尺寸。了解特定语言和库的API是实现自动改变窗口大小的关键。 5. **代码示例**...
【Electron-Vue】构建桌面应用（39）-Electron窗口最小化恢复后窗口大小发生变化
chenqk_123的专栏
07-02 1517
在使用Electron-vue构建桌面应用的时候，发现最小化之后，恢复窗口会导致窗口大小发生变化。我设置的height为150，当最小化后，点击任务栏中的应用时，恢复窗口展示，会发现窗口height变为179 ，比原先的要高出20多。当你拖拽后，窗口大小又恢复正常为150px。 然后去github上找相应的问题，发现挺多人都碰到这种问题。这是Electron自身的BUG。开发人员在测试的时候也出现过这种偏差： 出现的偏差在不同的环境中可能会有差异，官方给出的回复是在2016年，所以我查看了我是用的elec
Electron怎么动态修改视框大小
weixin_42097259的博客
07-11 526
其中，screen 模块可获取屏幕大小；setBounds是可以调整窗口大小和弹窗位置，也可采用setSize，但setSize只能改变窗口大小不能改变弹出位置。1.采用单独的@electron/remote模块进行替代。大致流程是在主进程初始化，渲染进程进行使用。大概意思就是，任何其他方法都比这个好。这是因为在渲染进程直接控制主进程是不安全的。正确的做法是采用ipc进行通信。大多数方法是采用electron的remote模块，但是remote模块早在electron14版本就已经废除。
Electron窗口尺寸
CairBin的博客
08-26 2004
与窗口尺寸有关的属性大致有这些xyshowwidthheightmaxWidthmaxHeightminWidthminHeightresizable。
electron-vue 修改窗口大小大函数
qq_30815659的博客
03-19 1730
newWin.setContentSize(1000, 620); //重新设置窗口客户端的宽高值（例如网页界面），这里win.setSize(x,y)并不生效。
electron 改变窗体 大小_一分钟学会使用electron将现有vue项目打包为exe桌面端应用...
weixin_39845113的博客
11-21 1026
前言最近有个项目前期是用vue开发的，开发完成之后，客户提了一个新需求，我能不能不在浏览器中打开呢？能不能直接在电脑桌面上打开呢？瞬间脑瓜子嗡嗡的。但是顾客就是上帝，必须得响应响应，作为一个资深的CV程序员，怎么可能闭门造车自己撸代码呢！！！网上一顿狂搜之后，发现了electron这个好东西。通过它可以直接将现有的vue项目打包成exe文件。友情提示，文末有福利！！！使用electron...
Electron 改变窗口大小 setSize失效
07-21 3428
直接 会直接看到大小变化，放在普通场景算正常，但是如果类似从登录界面切换到主界面或者从主界面切换到登陆页面，这时候直接变化大小看起来很奇怪，最好需要做点处理过渡一下。1、初始化窗口的函数 2、新建监听，用于设置窗口信息，延迟展示窗口 说明：关键代码在 ，先改成透明，然后设置大小、标题等等，然后执行最小化，最后延迟展示。注意代码顺序也会影响执行结果.........
Electron-窗口
qq_45903181的博客
12-23 1196
在新版本的 Electron 中，渲染进程无法直接操作窗口的放大、缩小和关闭功能。正确的做法是通过与主进程进行通信，在主进程中执行这些操作。// 渲染进程代码 (renderer.js)// 获取按钮元素// 绑定按钮点击事件});});});在上述代码中，我们使用对象来进行与主进程的通信。通过调用方法，我们向主进程发送指定的消息（‘window-action’），并传递相应的操作命令（‘maximize’、‘minimize’、‘close’）作为参数。
exe文件:electron设置窗口默认最大化(默认全屏)
AnRan0205的博客
03-14 3370
exe文件：electron设置窗口默认最大化(默认全屏)
electron改变窗口大小并记录当前大小
lbn2676043895的博客
12-16 9970
在electron中寻找api，终于找到关键getContentBounds(),调用mainWindow.getContentBounds()可以获取当前窗口大小 先在主进程中设置好窗口移动的监听事件 在渲染进程中作为接收处理分发出去 最后在业务代码中通过事件的调用来获取当前窗口的宽高并保存 最后在electron项目的初始页面中读取数据库中的窗口大小并设置当前窗口的宽...
Electron 应用开发实践指南 实战篇：自定义窗口的拖拽和缩放
sybh的博客
02-17 3408
默认情况，在构建的时候，会使用系统自带的原生窗口样式，比如在MacOS下的样式：在有些情况下，操作系统的原生窗口并不能符合我们的一些视觉和交互需求。所以，在使用electron创建桌面应用的时候，有时候我们希望能完全掌控窗口的样式，而隐藏掉系统提供的窗口边框和标题栏等。这个时候就需要用到自定义窗口。既然无法做到全屏拖拽移动窗口，那么有没有更好的办法呢？其实另一种方案就是自定拖拽移动，具体怎么做呢？Electron 需要拖拽的窗口的内容区域监听mousedown事件，如果是鼠标左键按下，则开启可拖拽开关。
electron怎么代码动态改变窗口尺寸
06-07
在 Electron 中，您可以使用 BrowserWindow 对象的 setSize 方法来动态更改窗口的大小。setSize 方法接受两个参数，分别是窗口的宽度和高度，以像素为单位。 以下是一个示例，演示如何在单击按钮时更改窗口大小： ```javascript const { BrowserWindow } = require('electron') let mainWindow = new BrowserWindow({ width: 800, height: 600 }) // 监听自定义事件，用于动态更改窗口大小 ipcMain.on('resize-window', (event, width, height) => { mainWindow.setSize(width, height) }) ``` 在上面的代码中，我们首先创建了一个 BrowserWindow 对象，然后使用 ipcMain 模块将一个名为 "resize-window" 的自定义事件绑定到主进程。 当事件被触发时，我们调用 setSize 方法来更改窗口的大小。 在您的渲染进程中，您可以使用以下代码来触发自定义事件： ```javascript const { ipcRenderer } = require('electron') // 单击按钮时触发事件 document.getElementById('resize-button').addEventListener('click', () => { ipcRenderer.send('resize-window', 1200, 800) }) ``` 在上面的代码中，我们使用 ipcRenderer 模块将 "resize-window" 事件发送到主进程，并传递新的窗口宽度和高度作为参数。 希望这可以帮助您实现在 Electron 中动态更改窗口大小。如果您有任何其他问题，请随时问我。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值