(1) 登录窗口(500×300)
(2) 首页(全屏)
创建login.html和index.html页面,实现原型页面基本效果,下文逐步改造,实现Electron无边框窗口。
要创建无边框窗口,只需在BrowserWindow的options中将frame设置为 false:
const { BrowserWindow } = require('electron')
let win = new BrowserWindow({ width: 800, height: 600, frame: false })
win.show()
通过将 transparent 选项设置为 true, 还可以使无框窗口透明:
let win = new BrowserWindow({ transparent: true, frame: false })
参考地址:https://electronjs.org/docs/api/frameless-window#%E9%80%8F%E6%98%8E%E7%AA%97%E5%8F%A3
在main.js
文件中添加frame:false
:
mainWindow = new BrowserWindow({
width: 800,
height: 600,
frame:false,
webPreferences: {
/*preload: path.join(__dirname, 'preload.js')*/
nodeIntegration: true
}
})
注意: webPreferences的值,如果写preload无nodeIntegration,会影响后面最大最小化功能不起作用,暂不明白原因。
-webkit-app-region: drag
来告诉 Electron 哪些区域是可拖拽的-webkit-app-region: no-drag
则可以将其中部分区域排除.titlebar {
-webkit-app-region: drag;
-webkit-user-select: none;
}
修改index.html
页面中的样式,添加相应drag和no-drag特性
<div class="topbar" style="-webkit-app-region: drag;-webkit-user-select: none;">
<div class="logo fl">
<img src="images/logo.png" alt="">
<span>这里写软件名称span>
div>
<ul class="menu fl" style="-webkit-app-region: no-drag;">
<li>菜单1li>
<li>菜单2li>
<li>菜单3li>
<li>菜单4li>
ul>
<div class="min_max_close fr" style="-webkit-app-region: no-drag;">
<img src="images/min.png" id="min" alt="">
<img src="images/max.png" id="max" alt="">
<img src="images/close.png" id="close" alt="">
div>
div>
(1) 在renderer.js中添加click事件,发送操作命令给主进程
let ipcRenderer = require('electron').ipcRenderer;
var max = document.getElementById('max');
if (max) {
max.addEventListener('click', () => {
//发送最大化命令
ipcRenderer.send('window-max');
//最大化图形切换
if (max.getAttribute('src') == 'images/max.png') {
max.setAttribute('src', 'images/maxed.png');
} else {
max.setAttribute('src', 'images/max.png');
}
})
}
var min = document.getElementById('min');
if (min) {
min.addEventListener('click', () => {
//发送最小化命令
ipcRenderer.send('window-min');
})
}
var close = document.getElementById('close');
if (close) {
close.addEventListener('click', () => {
//发送关闭命令
ipcRenderer.send('window-close');
})
}
(2) 在main.js中接收操作命令,做出相应处理
let ipcMain = require('electron').ipcMain;
//接收最小化命令
ipcMain.on('window-min', function() {
mainWindow.minimize();
})
//接收最大化命令
ipcMain.on('window-max', function() {
if (mainWindow.isMaximized()) {
mainWindow.restore();
} else {
mainWindow.maximize();
}
})
//接收关闭命令
ipcMain.on('window-close', function() {
mainWindow.close();
})
补充: 这里最大化和取消最大化时,修改图标的方法不合适,因为通过双击drag-area或者拉动窗口到屏幕边缘等操作,也可能修改窗口的状态。
因此,应该在主进程中监听窗口的最大化操作,然后发送命令给渲染进程:
mainWindow.on('maximize', function () {
mainWindow.webContents.send('main-window-max');
})
mainWindow.on('unmaximize', function () {
mainWindow.webContents.send('main-window-unmax');
})
在渲染进程中接收到相应命令,再进行处理:
ipcRenderer.on('main-window-max', (event) => {
max.classList.remove('icon-max');
max.classList.add('icon-maxed');
});
ipcRenderer.on('main-window-unmax', (event) => {
max.classList.remove('icon-maxed');
max.classList.add('icon-max');
});
思路同最小化、最大化、关闭,仅添加了页面调转。
(1) 在main.js中设置启动初始页面为login.html
mainWindow.loadFile('login.html')
(2) 在renderer.js中添加login按钮的click事件,发送最大化给主进程
var loginbtn = document.getElementById('login');
if (loginbtn) {
loginbtn.addEventListener('click', () => {
ipcRenderer.send('window-max');
location.href = "index.html";
})
}
如果你只是用Electron打个包,用它的浏览器功能,里面还是一个完整的其它项目,比如一个普通的java web项目,相当于只是穿层衣服。怎么在里边实现以上最小化、最大化、关闭、拖动等功能呢?
<script type="text/javascript">
window.location='http://localhost:8888/index.html';
script>
style="-webkit-app-region: drag;-webkit-user-select: none;"
main.js
中new BrowserWindow加上nodeIntegration: true
mainWindow = new BrowserWindow({
width: 500,
height: 300,
frame: false,
webPreferences: {
nodeIntegration: true
}
})
(2)在独立项目中加上之前的renderer.js文件,在页面中引入renderer.js
<script type="text/javascript" src="renderer.js">script>
其实不应该这样做,应该可以直接写require('./renderer.js')
的,但是这样要求在electron项目中把renderer.js export出来,由于我语法不熟,就直接拷过去了,先不研究了。
标签内嵌的页面中怎么实现拖拽、最大化、最小化、关闭?在webview标签上加上nodeintegration
属性:
<webview src="http://www.google.com/" nodeintegration>webview>
当有此属性时, webview 中的访客页(guest page)将具有Node集成, 并且可以使用像 require 和 process 这样的node APIs 去访问低层系统资源。
两种实现方式:https://www.jb51.net/article/170628.htm
我的需求比较简单,简单实现如下:
//接收关闭命令
ipcMain.on('window-close', function() {
let closeProcess = child_process.exec('taskkill /f /im XXXXX.exe');
closeProcess.on('close', function (code) {
mainWindow.close();
})
})
在任务栏右下角添加图标和右键菜单。查看Electron tray文档即可。
Electron无边框窗口(最小化、最大化、关闭、拖动)以及动态改变窗口大小
在Electron内嵌的独立项目中怎么实现拖拽、最大化、最小化、关闭
references
[1] 无边框窗口 | Electron
[2] Electron 无边框窗口最大化最小化关闭功能
[3] electron 改变窗体大小
[4] BrowserWindow配置说明文档
[5] webview标签说明文档