Electron如何隐藏窗口边框而显示控制按钮？

Question

Electron的文档中写到，可以通过指定BrowserWindow的frame为false来创建没有边框的窗口。
那么，这种边框颜色（背景）与系统不同，却使用系统控制按钮的边框如何实现？

(图中的软件分别为GitHub Desktop和Moeditor)

Answer 1

这个功能说起来很简单的，就是使用main和renderer通信
我来说下大致的代码：

在main.js中

ipcMain.on('quitApp',()=>{
    app.quit()
})

在renderer中

html：

 <Button @click="quitApp"></Button>

Script：

quitApp () {
      this.$electron.ipcRenderer.send('quitApp')
    }

你说的像窗体原生按钮，其实是用renderer发送信息到main实现的。具体你可以研究下ipc通信咯。
应为有的API只能main能用。

Answer 2

如下代码所示：frame: false 参数用来设置无边框；
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({width: 800, height: 600, frame: false})
win.show()
1
2
3
以下代码用于在Html元素中设置可拖动区域；
其中，style=”-webkit-app-region: drag;” 用于设定该部分为可拖动区域；
而， style=”-webkit-app-region: no-drag;” 用于设定该部分为不可拖动区域；
这两种样式可分别加载嵌套的Html元素中，以便实现可拖动区域与不可拖动区域(功能区域)的精准划分。
<header style="-webkit-app-region: drag">

<section style="-webkit-app-region: no-drag">
    <!--html代码-->
</section>
<section>
    <!--html代码-->
</section>
<section style="-webkit-app-region: no-drag">
    <!--html代码-->
</section>

</header>

Answer 3

文档里有
https://www.electronjs.org/zh/docs/latest/tutorial/window-cus...

在创建窗口的时候写配置如下

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  ...
  titleBarStyle: 'hidden',
  titleBarOverlay: true
})

另外这玩意可以一定程度上自定义,比如改颜色 改大小什么的,详情去看文档吧..

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  titleBarStyle: 'hidden',
  titleBarOverlay: {
    color: '#2f3241',
    symbolColor: '#74b1be',
    height: 60
  }
})

如果你的项目需要动态变更主题样色,可以使用这个API动态设置

  mainWindow.setTitleBarOverlay({
    color: '#2f3241',
    symbolColor: '#74b1be',
    height: 30
  })

另外如果你的项目需要兼容web和electron从而无法使用IPC通信,可以参考这个使用Protocol做通信
https://blog.csdn.net/cbaili/article/details/128651549