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>