srcmini要创建没有铬的窗口或任意形状的透明窗口, 你需要使用无框架窗口API。此” api”允许你创建无边框的无边框窗口, 该窗口的一部分(例如工具栏)不属于网页。
在浏览器中, Chrome是浏览器中除网页本身(例如工具栏, 菜单栏, 标签)之外的任何可见外观。要创建无框架窗口, 需要在所需的BrowserWindow实例中将frame属性设置为false：
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({
width: 800, height: 600, frame: false
})
win.show()提示：你可能希望在主窗口(main.js)中启用此功能, 该功能应类似于：
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600, frame: false})
// and load the index.html of the app.
mainWindow.loadURL(`file://${__dirname}/index.html`)
// Open the DevTools.
mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}谁的执行应该创建类似于以下内容的窗口：
但是, 你可能不想删除用户关闭, 最小化或最大化你的应用程序的可能性, 因此你需要学习如何做。这些方法在BrowserWindow中可用, 因此在渲染过程中, 你只需要使用BrowserWindow常量即可检索聚焦的窗口：
const {BrowserWindow} = require('electron').remote;
// Retrieve focused window
var theWindow = BrowserWindow.getFocusedWindow();
// Execute common tasks
// Minimize
theWindow.minimize();
// Maximize app
theWindow.maximize();
// Close app
theWindow.close();典型的按钮, 但带有一些CSS和HTML
你可以创建桌面应用程序与自定义HTML和CSS一起使用的工具栏。
在此示例中, 我们将使用以下标记：
<div id="title-bar">
<div id="title">
<span style="vertical-align: middle;">
<img src="https://raw.githubusercontent.com/zeke/atom-icon/master/old-icon/2.png" style="width:20px;height:20px;"/>
</span>
Our Code World Frameless (But draggable, resizable and closable Window)
</div>
<div id="title-bar-btns">
<button id="min-btn">-</button>
<button id="max-btn">+</button>
<button id="close-btn">x</button>
</div>
</div>还有一些使其看起来”不错”的样式：
body {
padding: 0px;
margin: 0px;
}
#title-bar {
-webkit-app-region: drag;
height: 40px;
text-align: center;
line-height: 40px;
vertical-align: middle;
background-color: #03a9f4;
padding: none;
margin: 0px;
}
#title {
position: fixed;
top: 0px;
left: 6px;
color:white;
}
#title-bar-btns {
-webkit-app-region: no-drag;
position: fixed;
top: 0px;
right: 6px;
}请注意, 标题栏类具有使你可以在屏幕上拖动窗口的类, 否则你的用户将被迫在屏幕上的静态位置(你可能不需要的东西)上使用你的应用程序。 -webkit-app-region：拖动；将使选定元素成为一个点, 以与原始标题栏相同的方式在屏幕上拖动整个窗口。
index.html文件中的最终实现应如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Electron Frameless Window</title>
<style>
body {
padding: 0px;
margin: 0px;
}
#title-bar {
-webkit-app-region: drag;
height: 40px;
text-align: center;
line-height: 40px;
vertical-align: middle;
background-color: #03a9f4;
padding: none;
margin: 0px;
}
#title {
position: fixed;
top: 0px;
left: 6px;
color:white;
}
#title-bar-btns {
-webkit-app-region: no-drag;
position: fixed;
top: 0px;
right: 6px;
}
</style>
</head>
<body>
<div id="title-bar">
<div id="title">
<span style="vertical-align: middle;"><img src="https://raw.githubusercontent.com/zeke/atom-icon/master/old-icon/2.png" style="width:20px;height:20px;"/></span>
Our Code World Frameless (But draggable, resizable and closable Window)
</div>
<div id="title-bar-btns">
<button id="min-btn">-</button>
<button id="max-btn">+</button>
<button id="close-btn">x</button>
</div>
</div>
<div style="text-align:center;">
<h4>Electron rocks!</h4>
<img src="http://ourcodeworld.com/resources/img/ocw-empty.png" width="300" height="300"/>
</div>
<script>
(function () {
// Retrieve remote BrowserWindow
const {BrowserWindow} = require('electron').remote
function init() {
// Minimize task
document.getElementById("min-btn").addEventListener("click", (e) => {
var window = BrowserWindow.getFocusedWindow();
window.minimize();
});
// Maximize window
document.getElementById("max-btn").addEventListener("click", (e) => {
var window = BrowserWindow.getFocusedWindow();
if(window.isMaximized()){
window.unmaximize();
}else{
window.maximize();
}
});
// Close app
document.getElementById("close-btn").addEventListener("click", (e) => {
var window = BrowserWindow.getFocusedWindow();
window.close();
});
};
document.onreadystatechange = () => {
if (document.readyState == "complete") {
init();
}
};
})();
</script>
</body>
</html>
结果应用程序将如下所示：
玩得开心 ！
评论前必须登录！
注册