electron 设置最小窗口缩放

1. 在主进程中设置(创建窗口时)

主进程是 Electron 应用的核心部分,负责管理窗口等重要操作。在主进程文件(通常是`main.js`)中,当创建窗口时,可以直接指定窗口的最小尺寸

javascript 复制代码
const { app, BrowserWindow } = require("electron");

function createWindow() {

  // 创建一个新的浏览器窗口

  let win = new BrowserWindow({

    width: 800,

    height: 600,

    minWidth: 400,

    minHeight: 300,

  });

  win.loadFile("index.html");

}

app.on("ready", createWindow);

2. 动态设置最小窗口尺寸(在主进程中)

有时候,你可能需要在应用运行过程中动态地改变窗口的最小尺寸。

javascript 复制代码
const { app, BrowserWindow } = require("electron");

let win;

function createWindow() {

  win = new BrowserWindow({

    width: 800,

    height: 600,

  });

  win.loadFile("index.html");

}

app.on("ready", createWindow);

app.on("activate", () => {

  if (win === null) {

    createWindow();

  }

});

// 假设这是一个按钮点击事件的处理函数

function onButtonClick() {

  win.setMinimumSize(400, 300);

}

3. 在渲染进程中通过 IPC(进程间通信)间接设置

渲染进程负责显示用户界面内容。如果要从渲染进程设置窗口最小尺寸,需要通过 IPC 与主进程通信。

首先,在主进程(`main.js`)中设置 IPC 通信:

javascript 复制代码
const { app, BrowserWindow, ipcMain } = require("electron");

let win;

function createWindow() {

  win = new BrowserWindow({

    width: 800,

    height: 600,

  });

  win.loadFile("index.html");

  // 监听来自渲染进程的消息

  ipcMain.on("set - min - size", (event, width, height) => {

    win.setMinimumSize(width, height);

  });

}

app.on("ready", createWindow);

app.on("activate", () => {

  if (win === null) {

    createWindow();

  }

});

然后,在渲染进程(假设是`index.html`对应的 JavaScript 文件,如`renderer.js`)中发送 IPC 消息来设置最小尺寸:

javascript 复制代码
const { ipcRenderer } = require("electron");

function setMinSize() {

  ipcRenderer.send("set - min - size", 400, 300);

}
相关推荐
是你的小橘呀20 小时前
深入理解 JavaScript 预编译:从原理到实践
前端·javascript
uhakadotcom20 小时前
在使用cloudflare workers时,假如有几十个请求,如何去控制并发?
前端·面试·架构
风止何安啊20 小时前
栈与堆的精妙舞剧:JavaScript 数据类型深度解析
前端·javascript
用户479492835691520 小时前
Chrome DevTools MCP:让 AI 助手直接操作浏览器开发工具
前端·javascript·chrome
Rysxt_21 小时前
Vuex 教程 从入门到实践
前端·javascript·vue.js
by__csdn21 小时前
Node.js版本与npm版本的对应关系
前端·npm·node.js
AI_567821 小时前
Webpack性能优化终极指南:4步实现闪电打包
前端·webpack·性能优化
xuehuayu.cn1 天前
js es6 class 类中的值是异步赋值, 子类中如何获取这个值?
javascript·es6
威风的虫1 天前
ES6 数组方法:告别循环,拥抱函数式编程
开发语言·前端·javascript
小杨快跑~1 天前
ES6 Promise:告别回调地狱的异步编程革命
前端·javascript·ecmascript·es6