2024年Web前端最全electron +vue自定义点击最大化、最小化和关闭窗口事件功能，2024Web前端最新大厂面试真题

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

在background.js文件：中新增如下代码：

async function createWindow() {

createMenu();

// Create the browser window.

win = new BrowserWindow({

width: 1300,

height: 660,

minWidth: 1300,

useContentSize: true,

resizable: true,

frame: false,//通过设置frame的值为false可以隐藏窗口的边框。

// backgroundColor: ‘#DC143C’,

// titleBarStyle: ‘hidden’,

webPreferences: {

webSecurity: false, //Remove cross domain restrictions

nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,

// eslint-disable-next-line no-undef

preload: ${__static}/preload.js

},

//${__ Static} corresponds to the public directory

// eslint-disable-next-line no-undef

icon: ${__static}/img/icons/logo-64.png

// icon: ${__static}/img/icons/favicon.ico

});

if (process.platform === ‘darwin’) {

// eslint-disable-next-line no-undef

app.dock.setIcon(${__static}/img/icons/logo-512.png);

}

if (process.env.WEBPACK_DEV_SERVER_URL) {

// Load the url of the dev server if in development mode

await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);

/* if (!process.env.IS_TEST) win.webContents.openDevTools(); */

} else {

createProtocol(‘app’);

// Load the index.html when not in development

win.loadURL(‘app://./index.html’);

//Detect version updates

// updateHandle(win, feedUrl);

}

win.on(‘closed’, () => {

win = null;

});

globalShortcut.register(‘CommandOrControl+Shift+i’, function () {

win.webContents.openDevTools();

});

// esc，

globalShortcut.register(‘ESC’, function () {

win.unmaximize();

});

// 新增三块 1 2 3； win是 win = new BrowserWindow({…})来的。

// 1. 窗口 最小化

ipcMain.on(‘window-min’,function(){ // 收到渲染进程的窗口最小化操作的通知，并调用窗口最小化函数，执行该操作

win.minimize();

})

// 2. 窗口 最大化、恢复

ipcMain.on(‘window-max’,function () {

if(win.isMaximized()){ // 为true表示窗口已最大化

win.restore();// 将窗口恢复为之前的状态.

}else{

win.maximize();

}

})

// 3. 关闭窗口

ipcMain.on(‘window-close’,function (){

win.close();

})

}

注意：

我使用的electron版本是11.2.1，在渲染进程中引入

const ipcRenderer = require(‘electron’).ipcRenderer;

会出现报错：

解决方法是在根目录的vue.config.js文件中添加：

module.exports = {

pluginOptions: {

electronBuilder: {

nodeIntegration: true

}

}

}

即可解决这个问题。

最后附上electron无边框配置：

1. 无边框窗口实现

通过设置frame的值为false可以隐藏窗口的边框。

win = new BrowserWindow({

frame: false,

});

mac上的红绿灯

实现了无边框后，通过设置titleBarStyle属性，可以在mac上保留红绿灯，titleBarStyle的值可选：

default：默认，标准灰色不透明的mac标题栏；

hidden ： 全尺寸内容窗口，保留标准的控制按钮；

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

以在mac上保留红绿灯，titleBarStyle的值可选：

default：默认，标准灰色不透明的mac标题栏；

hidden ： 全尺寸内容窗口，保留标准的控制按钮；

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-sA3deJgR-1715367080023)]