Electron去掉窗口边框并添加关闭按钮的实现步骤

落根 · 发表于 2024-7-5 22:52:56

Electron去掉窗口边框并添加关闭按钮

在 Electron 中，如果你想去掉默认的窗口边框（frame）并添加额外的按键，你可以通过以下步骤来实现：
1.去掉默认的窗口边框：
使用

BrowserWindow

复制代码

的

frame

复制代码

选项，并将其设置为

false

复制代码

来创建一个无边框的窗口。

const { BrowserWindow } = require('electron')
let win = new BrowserWindow({
width: 800,
height: 600,
frame: false // 这里设置为 false 去掉边框
})

复制代码

2.添加额外的按键：
有几种方法可以实现这一点，但最常见的是使用 HTML/CSS/JavaScript 在你的 Electron 应用的页面中添加自定义的 UI 元素，这些元素可以充当窗口的关闭、最小化和最大化按钮。
你可以使用 Electron 的 IPC（进程间通信）机制来监听这些按钮的点击事件，并使用 Electron 的 API 来控制窗口（如关闭、最小化或最大化）。
例如，你可以在渲染进程（renderer process）中添加一个关闭按钮，并通过 IPC 将点击事件发送到主进程（main process）。然后，在主进程中处理这个事件并关闭窗口。
渲染进程（renderer.html）:

<!DOCTYPE html>
<html>
<body>
<button id="close-btn">关闭</button>
<script>
const { ipcRenderer } = require('electron')
document.getElementById('close-btn').addEventListener('click', () => {
ipcRenderer.send('close-window')
})
</script>
</body>
</html>

复制代码

主进程（main.js）:

const { BrowserWindow, ipcMain } = require('electron')
let win = new BrowserWindow({ /* ... */ })
ipcMain.on('close-window', () => {
win.close()
})

复制代码

3.处理窗口拖动：
由于你移除了默认的窗口边框，你可能还需要处理窗口的拖动。这可以通过监听鼠标事件并在适当的时候调用 Electron 的

move

复制代码

方法来实现。
例如，你可以添加一个全屏的透明层，并在其上监听

mousedown

复制代码

、

mousemove

复制代码

和

mouseup

复制代码

事件来模拟窗口的拖动。
请注意，这些只是基本的实现思路，并且可能需要根据你的具体需求进行调整。例如，你可能还需要处理窗口的最小化和最大化逻辑，以及可能的跨平台兼容性问题。
Electron 无边框窗口最大化最小化关闭功能

title: ‘[乱说]Electron 无边框窗口最大化最小化关闭功能’
date: 2017-11-21 21:43:40
tags: Electron 无边框窗口最大化最小化关闭功能
目的

实现无边框窗口，并添加最大化最小化和关闭功能

前提

了解Electron 主进程和渲染进程的通讯
了解 BrowserWindow相关功能

操作流程
先在界面上放三个按钮

<body style="-webkit-app-region: drag">
<section style="-webkit-app-region: drag">
<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>
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 process
require('./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不适合大数据通讯，最好只做命令的传递
源码

基础不稳写出来的代码也不是很好，开源的学习成本其实是很高的，特别是对于新手，自己学习一定要把握好度。

复制代码

到此这篇关于Electron去掉窗口边框并添加关闭按钮的实现步骤的文章就介绍到这了,更多相关Electron窗口边框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/323361vnc.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！