您的位置：首页 > 其它

[乱说]Electron 无边框窗口最大化最小化关闭功能

2017-11-22 21:54 393 查看

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. 添加事件把要做的操作发送给主进程

``` javascript
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');

})

<div class="se-preview-section-delimiter"></div>

在主进程中调相应的方法

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

源码

基础不稳写出来的代码也不是很好，开源的学习成本其实是很高的，特别是对于新手，自己学习一定要把握好度。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Electron 无边框窗口最大化最小化

相关文章推荐

新的分享

章节导航