软件开发培训班 >> 编程开发 >> JavaScript


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

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">
          <!--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 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窗口边框内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！