title: ‘[乱说]Electron 无边框窗口最大化最小化关闭功能’
date: 2017-11-21 21:43:40
tags:

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 processrequire('./renderer.js')</script></body>

-webkit-app-region: drag是可拖动的样式
2. 添加事件把要做的操作发送给主进程

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

在主进程中调相应的方法

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 无边框窗口最大化最小化关闭功能相关推荐

Electron无边框窗口（最小化、最大化、关闭、拖动）以及动态改变窗口大小
文章目录一.目标原型 1. 目标 2. 原型设计 3. 原型初步实现二.无边框窗口 1. 要点 2. 改造三.可拖拽区 1. 要点 2. 改造四.最小化.最大化.关闭 1. 要点 2. 改造 ...
mac如何使用快捷键，使得窗口最大化/最小化（完）
问题: mac如何使用快捷键,使得窗口最大化/最小化回答: 同时按下:command + control + F
Java JFrame隐藏标题栏以及最大化最小化关闭和拖动
CSDN上第一篇博客,请大家多多支持! // 转载请注明出处! 直入主题吧,目前主流的软件,图形化界面一般都没有标题栏,优点是简单大方.然而,界面的最大化最小化和关闭按钮也随之隐藏,窗体也无法拖动.因 ...
最大化/最小化/关闭窗口代码集锦
在制作网页时,我们常常需要用到这类代码,很简单也很实用最大化窗口: <OBJECT id="max" type="application/x-oleobject& ...
C++ 使窗口最大化最小化
使用ShowWindow函数可是设置窗体的形态代码 #include<windows.h> #include<cstdio> #include<iostream> ...
JavaFX窗口最大化最小化事件
问题背景: 最近做一个本地客户端与远程服务器通信的小程序,采用Mina与远程服务器进行通信. 问题描述: 客户端采用Java FX编写,但是在Java FX窗口最小化切换到最大化的时候会遇到窗口界面黑 ...
MFC手动添加窗口最大化最小化还原关闭
最大化.最小化.还原这些都是系统命令这样操作比较合理 C/C++ code? 1 2 3 PostMessage(WM_SYSCOMMAND, SC_MAXIMIZE, 0); PostMessa ...
Qt窗口最大化/最小化/窗口状态判断
QT 中有一个函数: void QWidget::setWindowState ( Qt::WindowStateswindowState ) 这样的函数,通过它可以设置窗体的初始状态,Qt::Win ...
Qt 窗口操作函数（置顶、全屏，最大化最小化按钮设置等）
一.窗口置顶与取消置顶 void MainWindow::on_windowTopButton_clicked() {if (m_flags == NULL){m_flags = windowFl ...

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

title: ‘[乱说]Electron 无边框窗口最大化最小化关闭功能’
date: 2017-11-21 21:43:40
tags:

Electron 无边框窗口最大化最小化关闭功能

目的

前提

操作流程

提示

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

最新文章

热门文章

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

title: ‘[乱说]Electron 无边框窗口最大化最小化关闭功能’ date: 2017-11-21 21:43:40 tags:

Electron 无边框窗口最大化最小化关闭功能

目的

前提

操作流程

提示

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

最新文章

热门文章

title: ‘[乱说]Electron 无边框窗口最大化最小化关闭功能’
date: 2017-11-21 21:43:40
tags: