快捷導(dǎo)航

Electron去掉窗口邊框并添加關(guān)閉按鈕的實(shí)現(xiàn)步驟

更新時(shí)間：2024年06月27日 09:50:44 作者：大霸王龍

在?Electron?中,如果你想去掉默認(rèn)的窗口邊框（frame）并添加額外的按鍵,可以通過相關(guān)步驟實(shí)現(xiàn),下面小編給大家?guī)砹薊lectron去掉窗口邊框并添加關(guān)閉按鈕的實(shí)現(xiàn)步驟,感興趣的朋友一起看看吧

Electron去掉窗口邊框并添加關(guān)閉按鈕

在 Electron 中，如果你想去掉默認(rèn)的窗口邊框（frame）并添加額外的按鍵，你可以通過以下步驟來實(shí)現(xiàn)：

1.去掉默認(rèn)的窗口邊框：

使用 BrowserWindow 的 frame 選項(xiàng)，并將其設(shè)置為 false 來創(chuàng)建一個(gè)無邊框的窗口。

const { BrowserWindow } = require('electron')
let win = new BrowserWindow({
  width: 800,
  height: 600,
  frame: false // 這里設(shè)置為 false 去掉邊框
})

2.添加額外的按鍵：

有幾種方法可以實(shí)現(xiàn)這一點(diǎn)，但最常見的是使用 HTML/CSS/JavaScript 在你的 Electron 應(yīng)用的頁面中添加自定義的 UI 元素，這些元素可以充當(dāng)窗口的關(guān)閉、最小化和最大化按鈕。

你可以使用 Electron 的 IPC（進(jìn)程間通信）機(jī)制來監(jiān)聽這些按鈕的點(diǎn)擊事件，并使用 Electron 的 API 來控制窗口（如關(guān)閉、最小化或最大化）。

例如，你可以在渲染進(jìn)程（renderer process）中添加一個(gè)關(guān)閉按鈕，并通過 IPC 將點(diǎn)擊事件發(fā)送到主進(jìn)程（main process）。然后，在主進(jìn)程中處理這個(gè)事件并關(guān)閉窗口。

渲染進(jìn)程（renderer.html）:

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

主進(jìn)程（main.js）:

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

3.處理窗口拖動(dòng)：

由于你移除了默認(rèn)的窗口邊框，你可能還需要處理窗口的拖動(dòng)。這可以通過監(jiān)聽鼠標(biāo)事件并在適當(dāng)?shù)臅r(shí)候調(diào)用 Electron 的 move 方法來實(shí)現(xiàn)。

例如，你可以添加一個(gè)全屏的透明層，并在其上監(jiān)聽 mousedown、mousemove 和 mouseup 事件來模擬窗口的拖動(dòng)。

請(qǐng)注意，這些只是基本的實(shí)現(xiàn)思路，并且可能需要根據(jù)你的具體需求進(jìn)行調(diào)整。例如，你可能還需要處理窗口的最小化和最大化邏輯，以及可能的跨平臺(tái)兼容性問題。

Electron 無邊框窗口最大化最小化關(guān)閉功能

title: ‘[亂說]Electron 無邊框窗口最大化最小化關(guān)閉功能’
date: 2017-11-21 21:43:40
tags: Electron 無邊框窗口最大化最小化關(guān)閉功能

目的

實(shí)現(xiàn)無邊框窗口，并添加最大化最小化和關(guān)閉功能

前提

了解Electron 主進(jìn)程和渲染進(jìn)程的通訊
了解 BrowserWindow相關(guān)功能

操作流程

先在界面上放三個(gè)按鈕

 <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是可拖動(dòng)的樣式
2. 添加事件把要做的操作發(fā)送給主進(jìn)程

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');
})

在主進(jìn)程中調(diào)相應(yīng)的方法

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不適合大數(shù)據(jù)通訊，最好只做命令的傳遞
源碼