用electron写应用
2019-10-31 本文已影响0人
休息了亲
从一个简单的应用开始：
main.js ：
const { app,BrowserWindow } = require('electron');
app.on('ready',function(){
// 创建窗口
let win = new BrowserWindow ();
// 窗口内加载本地html文件，也可以通过win.loadURL('https://github.com')加载远程url
win.loadFile('index.html');
})
index.html ：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h1>HELLO WORLD</h1>
</body>
</html>
npm start结果 ：
如何创建一个无边框的窗口：
main.js ：
const { app,BrowserWindow } = require('electron');
app.on('ready',function(){
let win = new BrowserWindow ({
//这里设置,
frame : false
});
win.loadFile('index.html');
})
有边框窗口，我们可以鼠标按住标题栏进行拖拽。无边框窗口因为没有标题栏，我们无法进行拖拽。
无边框窗体可拖拽及一些问题
可拖拽设置是在渲染窗口上进行设置，也就是在index.html这个文件中进行设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,body{
height: 100%;
}
body{
margin: 0;
/* 设置body可拖拽 */
-webkit-app-region: drag;
}
</style>
</head>
<body>
<h1>HELLO WORLD</h1>
</body>
</html>
这样设置后，无边框窗口就可以拖拽了。
问题：鼠标事件无法触发
这样设置后，我们是可以拖拽了。但是，当我们创建个按钮时，就会发现，按钮事件无法触发。
我们可以试试：
main.js ：
const { app,BrowserWindow } = require('electron');
app.on('ready',function(){
let win = new BrowserWindow ({
frame : false,
});
win.loadFile('index.html');
//开启调试
win.webContents.openDevTools();
})
index.html ：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,body{
height: 100%;
}
body{
margin: 0;
-webkit-app-region: drag;
}
</style>
</head>
<body>
<h1>HELLO WORLD</h1>
<button type="submit">aa</button>
</body>
<script>
let btn = document.querySelector("button");
btn.addEventListener('click',function(){
console.log("111")
})
</script>
</html>
运行后，发现按钮无法被触发。
解决方法：
我们可以将需要触发事件的地方取消可拖拽。
button{
-webkit-app-region: none;
}
这样，按钮就可以触发事件了。
圆形无边框窗体
主进程窗体控制中，并没有设置窗体圆角的选项。但是有个特别的设置项transparent透明。
所以，我们的思路就是将窗体设为透明，然后在渲染页面添加一个有背景颜色的div，最后将这个div设置成圆角就实现了。
main.js ：
const { app,BrowserWindow } = require('electron');
app.on('ready',function(){
let win = new BrowserWindow ({
frame : false,
//设置一个宽、高为500px的窗体
width : 500,
height : 500,
//透明窗体
// transparent : true,
//取消最大化
//maximizable : false,
webPreferences : {
nodeIntegration : true,
}
});
win.loadFile('index.html');
})
index.html ：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
body{
margin: 0;
-webkit-app-region: drag;
}
.circular{
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #ffc540;
}
</style>
</head>
<body>
<!-- <h1>HELLO WORLD</h1> -->
<div class="circular">
</div>
</body>
<script>
</script>
</html>
未设置透明的窗体
设置透明后窗体
细心的会发现，说圆形窗体是不准确的。它仍是矩形窗体，只是四个边透明了而已。当用鼠标拖拽透明部分，仍然可以拖动。
取消鼠标双击放大
我们完成这个以后，鼠标双击窗体，窗体变成最大化。这个圆形的div就原形毕露了，圆形跑到屏幕的左上角了。所以，我们不想鼠标双击窗体最大化。
解决方法：
在创建窗体的配置中加入maximizable : false就可以禁止窗体放大。注意，这个是禁止窗体最大化，不是取消鼠标双击事件。我们可以在窗体上右键，就会发现最大化选项是灰色（无法选择的）。
