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

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不适合大数据通讯，最好只做命令的传递
源码