![[乱说]Electron 无边框窗口最大化最小化关闭功能](https://200zi.50zi.cn/uploadfile/img/15/91/fb66ec3aae19f49bf33d04ecd0cdd5d1.jpg)
title: ‘[乱说]Electron 无边框窗口最大化最小化关闭功能’
date: -11-21 21:43:40
tags:
Electron 无边框窗口最大化最小化关闭功能
目的
实现无边框窗口，并添加最大化最小化和关闭功能前提
了解Electron 主进程和渲染进程的通讯了解 BrowserWindow相关功能操作流程
先在界面上放三个按钮<body style="-webkit-app-region: drag"><section style="-webkit-app-region: drag"><!--html代码--><h1>Hello World!</h1></section><section style="-webkit-app-region: no-drag"><button type="button" id="maxbt">max</button><button type="button" id="minbt">>min</button><button type="button" id="closebt">>close</button></section><!-- All of the Node.js APIs are available in this renderer process. -->We are using Node.js <script>document.write(process.versions.node)</script>,Chromium <script>document.write(process.versions.chrome)</script>,and Electron <script>document.write(process.versions.electron)</script>.<script>// require('electron').ipcRenderer;// You can also require other files to run in this processrequire('./renderer.js')</script></body>
-webkit-app-region: drag是可拖动的样式
2. 添加事件把要做的操作发送给主进程
var ipc = require('electron').ipcRenderer;document.getElementById('maxbt').addEventListener('click', () => {console.log('hello vscode!')ipc.send('window-max');})document.getElementById('minbt').addEventListener('click', () => {console.log('hello vscode!')ipc.send('window-min');})document.getElementById('closebt').addEventListener('click', () => {console.log('hello vscode!')ipc.send('window-close');})
在主进程中调相应的方法
const electron = require('electron')const ipc = electron.ipcMain//登录窗口最小化ipc.on('window-min',function(){mainWindow.minimize();})//登录窗口最大化ipc.on('window-max',function(){if(mainWindow.isMaximized()){mainWindow.restore(); }else{mainWindow.maximize(); }})ipc.on('window-close',function(){mainWindow.close();})
提示
ipc不适合大数据通讯，最好只做命令的传递源码
基础不稳写出来的代码也不是很好，开源的学习成本其实是很高的，特别是对于新手，自己学习一定要把握好度。
