技术文档中心
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
  • 基础入门

    • Electron 学习指南
    • 窗口管理
    • 进程通信
    • 对话框
  • 进阶内容

    • 菜单和托盘
    • 打包发布
    • Electron 自动更新
  • 框架集成

    • React + Electron
    • Vue + Electron

窗口管理

创建窗口

const { BrowserWindow } = require('electron');

const win = new BrowserWindow({
  width: 800,
  height: 600,
  x: 100,
  y: 100,
  minWidth: 400,
  minHeight: 300,
  maxWidth: 1200,
  maxHeight: 900,
  resizable: true,
  movable: true,
  minimizable: true,
  maximizable: true,
  closable: true,
  title: '我的应用',
  icon: 'icon.png',
  show: false,
  frame: true,
  transparent: false,
  alwaysOnTop: false,
  fullscreen: false,
  webPreferences: {
    nodeIntegration: false,
    contextIsolation: true,
    preload: path.join(__dirname, 'preload.js')
  }
});

窗口显示

// 延迟显示
win.once('ready-to-show', () => {
  win.show();
});

// 渐显
win.show();
win.setOpacity(0);
let opacity = 0;
const timer = setInterval(() => {
  opacity += 0.1;
  win.setOpacity(opacity);
  if (opacity >= 1) clearInterval(timer);
}, 50);

窗口状态

// 最小化
win.minimize();

// 最大化
win.maximize();

// 全屏
win.setFullScreen(true);

// 恢复
win.restore();

// 关闭
win.close();

// 隐藏
win.hide();

// 显示
win.show();

窗口事件

// 准备显示
win.on('ready-to-show', () => {
  console.log('窗口准备显示');
});

// 显示
win.on('show', () => {
  console.log('窗口显示');
});

// 隐藏
win.on('hide', () => {
  console.log('窗口隐藏');
});

// 关闭
win.on('close', (event) => {
  event.preventDefault(); // 阻止关闭
  win.hide();
});

// 已关闭
win.on('closed', () => {
  console.log('窗口已关闭');
});

// 最小化
win.on('minimize', () => {
  console.log('窗口最小化');
});

// 最大化
win.on('maximize', () => {
  console.log('窗口最大化');
});

// 进入全屏
win.on('enter-full-screen', () => {
  console.log('进入全屏');
});

多窗口管理

const windows = new Map();

function createWindow(id) {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  });

  win.loadFile('index.html');
  windows.set(id, win);

  win.on('closed', () => {
    windows.delete(id);
  });

  return win;
}

// 获取所有窗口
const allWindows = BrowserWindow.getAllWindows();

// 获取焦点窗口
const focusedWindow = BrowserWindow.getFocusedWindow();

父子窗口

const parent = new BrowserWindow();

const child = new BrowserWindow({
  parent: parent,
  modal: true,
  show: false
});

child.loadFile('child.html');
child.once('ready-to-show', () => {
  child.show();
});

无边框窗口

const win = new BrowserWindow({
  width: 800,
  height: 600,
  frame: false,
  transparent: true
});

// 自定义拖拽区域
// index.html
<div style="-webkit-app-region: drag">
  <div style="-webkit-app-region: no-drag">
    <button>按钮</button>
  </div>
</div>

窗口通信

// 主窗口
const mainWin = new BrowserWindow();
const childWin = new BrowserWindow();

// 向子窗口发送消息
childWin.webContents.send('message', 'Hello');

// 子窗口接收
// preload.js
contextBridge.exposeInMainWorld('electronAPI', {
  onMessage: (callback) => {
    ipcRenderer.on('message', (event, data) => callback(data));
  }
});
最近更新: 2026/2/6 15:39
Contributors: hailong
Prev
Electron 学习指南
Next
进程通信