完善上一篇的Electron项目

上一篇项目虽然好看，但是有一些致命的缺陷，是不是当你兴致勃勃的运行这个项目却发现没有关闭按钮？那就对了！因为外面的框架都被隐藏了，所以框架上面的放大缩小以及关闭按钮也随之消逝，那么今天我们就手动的来为它添加这些按钮，按钮样式还可以自定义，不用它原生的丑丑的按钮。

修改HTML

在header标签中添加三个标签，这仨标签分别为最小化、最大化和关闭按钮。

<header class="common">
  header
  <div class="btn">
    <div class="min">-</div>
    <div class="max">□</div>
    <div class="close">X</div>
  </div>
</header>

修改CSS

由于没有样式导致界面非常难看，下面我们在style标签里面加入这样一段代码↓

.btn {
  position: absolute;
  top: -8px;
  right: -8px;
  overflow: hidden;
  display: flex;
  width: 70px;
  justify-content: space-between;
}
.btn>div{
  color: white;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  background: slategray;
  cursor: default;
  border: 2px solid aqua;
  border-radius: 50%;
  transition: all .3s;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-app-region: no-drag;
  outline: none;
}
.btn>div:hover {
  background: black;
  border: 2px solid wheat;
  transform: rotate(360deg);
}
.min {
  align-self: flex-end;
  font-size: 22px;
  font-weight: bold;
}
.max {
  font-size: 18px;
  font-weight: bold;
}
.close {
  font-size: 13px;
}

写完之后效果是这样的↓
在这里插入图片描述

但是只是变好看了点，当你点击它们的时候却不会有任何的反应，那么接下来我们就来为它们绑定一下点击事件。

修改JS

在body标签的最后一行加入script标签，标签内代码如下↓

const closeBtns = document.querySelectorAll('.btn>div');
closeBtns.forEach(item => this.onclick = () => alert(item));

如果点击按钮会弹出一个对话框上面写着[object HTMLDivElement]的话，那么就证明代码没有出错

渲染进程与主进程之间的通信

像点击HTML元素操作整个应用的这种事件，渲染进程无法做到，只能通过主进程来操作，就像网页一样，你想点击页面中的某个按钮就关闭掉整个浏览器？那是行不通的，只有点击浏览器上面的按钮才可以操作浏览器自身，在网页应用中貌似没有提供页面与浏览器通信这样的API，但是在Electron里面可以！它使用IPC通信来连接主进程与渲染进程，那么接下来我们就上代码吧！

<script>
  const { ipcRenderer } = require('electron');
  const closeBtns = document.querySelectorAll('.btn>div');
  closeBtns[0].onclick = () => ipcRenderer.send('min');
  closeBtns[1].onclick = () => ipcRenderer.send('max');
  closeBtns[2].onclick = () => ipcRenderer.send('close');
</script>

这个ipcRenderer就是用来进行进程间通信的，它有一个方法叫send()，里面接收一个字符串变量。既然有发送就肯定会有接收，主进程里面也有个模块叫ipcMain，它上面有个on()方法，用来接收渲染进程发过来的数据。主进程的代码都写在了main.js里，现在就让我们打开main.js添加代码吧，在第二行代码中的大括号里面添加ipcMain，添加过后代码是这样的↓

const {app, BrowserWindow, ipcMain} = require('electron')

在第9行有个 function createWindow () {
在它代码块的最后一行添加如下代码↓

//自定义监听事件
  ipcMain.on('min', () => {
    mainWindow.minimize();
  })
  ipcMain.on('max', () => {
    mainWindow.maximize();
  })
  ipcMain.on('close', () => {
    mainWindow.close();
  })