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);

}
相关推荐
Jerry25 分钟前
Compose 基础知识测试
前端
changuncle34 分钟前
Angular初学者入门第三课——工厂函数(精品)
前端·javascript·angular.js
ScottePerk1 小时前
前端安全之XSS和CSRF
前端·安全·xss
PineappleCoder1 小时前
Canvas 复杂交互步骤:从事件监听 to 重新绘制全流程
前端
日月晨曦1 小时前
JavaScript事件循环:一次浏览器线程的"约会"指南
javascript
s3xysteak1 小时前
我要成为vue高手01:上下文
前端·javascript·vue.js
复苏季风1 小时前
前端居中布局:从 "卡壳" 到 "精通" 的全方位指南
前端·css
qb1 小时前
vue3.5.18源码:computed 在发布订阅者模式中的双重角色
前端·vue.js·架构
南篱1 小时前
JavaScript原型链没那么难:一文彻底搞懂
javascript·面试
程序员张31 小时前
Vue3+ElementPlus倒计时示例
javascript·vue.js·前端框架