Electron实现自定义最大化最小化关闭窗口功能

FuyuMiracle

已于 2023-07-27 09:31:52 修改

阅读量2.7k

点赞数 1

分类专栏： Electron 文章标签： electron 策略模式 javascript vue.js

于 2023-07-17 10:36:30 首次发布

本文链接：https://blog.csdn.net/weixin_56295520/article/details/131680901

版权

Electron 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了如何在Electron应用中创建一个无边框窗口，并通过IPC通信在渲染进程中调用主进程的方法来实现窗口的最大化、最小化、向下还原和关闭操作。主要涉及主进程的事件监听和渲染进程的预加载脚本以及Vue模板中的方法调用。

摘要由CSDN通过智能技术生成

如何在渲染进程中调用主进程的最大化窗口、最小化窗口、关闭窗口的方法

创建窗口时设置frame属性为false，即创建一个无边框的窗口，不使用Electron自带的框架，那么如何在渲染进程中通知主进程进行窗口的操作？详见代码如下。

主进程代码

const { app, BrowserWindow, Tray, Menu, ipcMain, } = require('electron');
const path = require('path');
//入口文件
let indexHtml = 'http://localhost:' + 8080 + '/xiongxin/';
//熊信图标路径
const iconPath = path.join(__dirname,`../src/assets/logo/icon.png`);

//所有窗体
let windows = {
	mainWindow: null, //主窗口
}

//创建主窗口
const createMainWindow = () => {
    //创建并控制浏览器窗口。
    windows.mainWindow = new BrowserWindow({
        width: 1200,
        height: 900,
        minWidth: 900,
        minHeight: 600,
        frame: false, // 无边框
        icon: iconPath,// 窗口图标
        webPreferences: {//网页功能设置。
            preload: path.join(__dirname, 'preload.js'),//在页面运行其他脚本之前预先加载指定的脚本 无论页面是否集成Node, 此脚本都可以访问所有Node API 脚本路径为文件的绝对路径。
            webSecurity: false,//禁用同源策略
            nodeIntegration: true,
            nodeIntegrationInWorker: true
        }
    });
    //加载路径
    windows.mainWindow.loadURL(indexHtml);
};

//当Electron 初始化完成时触发
app.whenReady().then(() => {
    createMainWindow();//创建主窗口
    app.on('activate', () => { // macOS 应用通常即使在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口。
        if (BrowserWindow.getAllWindows().length === 0) createMainWindow();
    });
});

//关闭所有窗口时退出应用 ，监听 app 模块的 'window-all-closed' 事件。如果用户不是在 macOS(darwin) 上运行程序，则调用 app.quit()。
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit();
});

/** 接收渲染进程 操作窗口 的通知
 * @param {Object} event
 * @param {String} windowName 需要操作的窗口名称
 * @param {String} operationType 操作类型
 */
ipcMain.on('operation-window', function(event, windowName, operationType) {
    const currOperationWindow = windows[windowName];//当前操作的窗口实例
    if (!currOperationWindow) return;
    switch (operationType) {
        case 'max'://窗口 最大化
            currOperationWindow.maximize();
            break;
        case 'restoreDown'://窗口 向下还原
            currOperationWindow.unmaximize();
            break;
        case 'min'://窗口 最小化
            currOperationWindow.minimize();
            break;
        case 'close'://窗口 关闭
            currOperationWindow.close();
            break;
    }
});

预加载脚本代码

//向渲染器进程暴露一个全局的 window.electronAPI 变量。
const { contextBridge, ipcRenderer, app } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
	operationWindow: (windowName,actionType) => ipcRenderer.send('operation-window', windowName,actionType),
})

渲染进程代码

<template>
	<div  class="min" @click="onElectronOperationWindow('min')">最小化</div>
	<div  class="max" @click="onElectronOperationWindow('max')">最大化</div>
	<div  class="restoreDown" @click="onElectronOperationWindow('restoreDown')">向下还原</div>
	<div  class="close" @click="onElectronOperationWindow('close')">关闭</div>
</template>
<script lang="ts" setup>
	function onElectronOperationWindow(operationType){
			if(window.electronAPI && window.electronAPI.operationWindow) {
				window.electronAPI.operationWindow('mainWindow ',operationType)
			}
	}
</script>