单例应用
有的时候，我们只想开一个应用。下次再打开的时候，还是这个应用，不会新打开一个应用。这就需要通过app.requestSingleInstanceLock()来判断，当一个应用打开时，此函数返回true。当第二个应用打开时，此函数返回false。
https://electronjs.org/docs/api/app#apprequestsingleinstancelock
渲染进程与主进程之间的通信
希望渲染进程（index.html）和主进程（main.js）通信，首先在main.js中设置 ：
const { app,BrowserWindow } = require('electron');
app.on('ready',function(){
let win = new BrowserWindow ({
frame : false,
width : 500,
height : 500,
transparent : true,
maximizable : false,
webPreferences : {
//网页功能设置，node集成为true
nodeIntegration : true,
}
});
win.loadFile('index.html');
// win.webContents.openDevTools();
})
然后，主进程引入ipcMain；渲染进程（index.html）使用commonJS规范引入ipcRenderer。ipcMain、ipcRenderer都是electron下的对象。
index.html ：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
body{
margin: 0;
-webkit-app-region: drag;
}
.btn{
-webkit-app-region: none;
}
</style>
</head>
<body>
<div class="circular">
<button class="btn">按钮</button>
</div>
</body>
<script>
const { ipcRenderer } = require('electron');
let btn = document.querySelector('.btn');
ipcRenderer.on('pong',(e,arg)=>{
console.log(arg)
})
btn.addEventListener('click',e=>{
ipcRenderer.send('ping','ping')
})
</script>
</html>
main.js ：
const { app,BrowserWindow,ipcMain } = require('electron');
app.on('ready',function(){
let win = new BrowserWindow ({
webPreferences : {
nodeIntegration : true,
},
frame : false,
width : 500,
height : 500,
transparent : true,
maximizable : false,
});
win.loadFile('index.html');
win.webContents.openDevTools();
})
ipcMain.on('ping',(e,arg)=>{
console.log(arg);
e.reply('pong','pong')
})
当点击按钮时，通过icpRenderer.send方法向node发布数据，node通过ipcMain订阅渲染进程来的数据。然后通过e.reply回复。
在无边框窗口中写个关闭按钮
上面我们知道渲染进程和主进程通信的方式。我们就可以在渲染进程中触发主进程的事件、方法等。
我们将e.reply('pong','pong')改为app.quit()后，这个按钮就成了关闭按钮。当然，可以实现的事情还有很多，这只是个小例子。
写个小音乐应用
我们知道了这些知识后，先简单写个音乐应用的外观及关闭按钮。代码如下：
style文件下的iconfont.css ,这里就不贴出来了。这就是三个按钮，分别是播放（icon-ziyuanldpi）、音量(icon-yinliang)、关闭(icon-guanbi)
style文件下的style.css ：
html,body{
height: 100%;
}
body {
-webkit-app-region: drag;
margin: 0;
}
#music{
position: relative;
height: 120px;
background-color: #fff;
border-radius: 8px;
overflow: hidden;
}
.btn{
display: inline-block;
user-select: none;
background-color: #e0f0e9;
border: 1px solid #ffff;
border-radius: 6px;
padding: 6px;
outline: none;
}
.touch{
-webkit-app-region: none;
}
.poster{
float: left;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
background-color: red;
border-radius: 6px 0 0 6px;
}
.abstract{
float: left;
width: 320px;
height: 100px;
margin: 10px;
}
.abstract > h1{
margin-top: 0;
margin-bottom: 0;
}
.paly{
color: #fff;
font-size: 50px;
}
.quit{
display: inline-block;
position: absolute;
right: 10px;
top: 10px;
}
.volume{
display: inline-block;
position: absolute;
right: 10px;
bottom: 10px;
}
index.html ：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MUSIC</title>
<link rel="stylesheet" href="./style/iconfont.css">
<link rel="stylesheet" href="./style/style.css">
</head>
<body>
<div id="music">
<div class="poster">
<span class="paly touch iconfont icon-ziyuanldpi"></span>
</div>
<div class="abstract">
<h1>内容</h1>
<p>sdjifsjidf</p>
</div>
<span class="quit btn touch">
<i class="iconfont icon-guanbi"></i>
</span>
<span class="volume btn touch">
<i class="iconfont icon-yinliang"></i>
</span>
</div>
</body>
<script>
const { ipcRenderer } = require("electron");
let quit = document.querySelector(".quit");
quit.addEventListener('click',e=>{
ipcRenderer.send('quit')
})
</script>
</html>
main.js ：
const { app,ipcMain,BrowserWindow } = require('electron');
const getTheLock = app.requestSingleInstanceLock();
if(!getTheLock){
app.quit();
}else{
app.on('ready',function(){
let win = new BrowserWindow({
webPreferences : {
nodeIntegration : true
},
resizable : false,
width : 500,
height : 120,
frame : false,
transparent : true,
maximizable : false,
fullscreen :false
})
win.loadFile('music.html');
// win.webContents.openDevTools();
})
ipcMain.on('quit',(e,arg)=>{
app.quit()
})
}
最后的样子 ：
网友评论