原創(chuàng)文章踢匣，轉(zhuǎn)載請注明出處
應(yīng)用場景：項目全屏最大化痒蓬，需要自定義一個菜單欄
- 創(chuàng)建頁面
- 渲染進程發(fā)送指令
- 主進程關(guān)閉
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
<style>
html,
body {
font-family: PingFanXgSC-Regular;
position: relative;
}
#menu {
width: 100vw;
height: 28px;
position: absolute;
right: 0;
top: 0;
}
#close {
background: #ff0000;
width: 42px;
height: 28px;
line-height: 28px;
color: #fff;
text-align: center;
font-size: 18px;
float: right;
visibility: hidden;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="menu">
<div id="close">x</div>
</div>
<script>
let menu = document.getElementById('menu');
let close = document.getElementById('close');
menu.onmouseover = function () {
close.style.visibility = 'visible';
}
menu.onmouseout = function () {
close.style.visibility = 'hidden';
}
close.onclick = function () {
try {
var ipcRender = require('electron').ipcRenderer
ipcRender.send('handelClose', "執(zhí)行關(guān)閉")
}
catch (e) {
console.log("不支持ipcRenderer")
}
// alert("點擊關(guān)閉")
}
</script>
</body>
</html>
const { app, BrowserWindow, Menu, ipcMain } = require('electron')
const win = null;
function createWindow() {
Menu.setApplicationMenu(null)
// 創(chuàng)建瀏覽器窗口
win = new BrowserWindow({
// width: 800,
// height: 600,
fullscreen: true,
webPreferences: {
nodeIntegration: true
},
// autoHideMenuBar: true,
// titleBarStyle: 'customButtonsOnHover',
// frame: false
})
// 并且為你的應(yīng)用加載index.html
win.loadFile('./html/index.html')
// 打開開發(fā)者工具
// win.webContents.openDevTools()
}
// Electron會在初始化完成并且準(zhǔn)備好創(chuàng)建瀏覽器窗口時調(diào)用這個方法
// 部分 API 在 ready 事件觸發(fā)后才能使用杠览。
app.whenReady().then(createWindow)
//當(dāng)所有窗口都被關(guān)閉后退出
app.on('window-all-closed', () => {
// 在 macOS 上捆蜀，除非用戶用 Cmd + Q 確定地退出攻臀，
// 否則絕大部分應(yīng)用及其菜單欄會保持激活钠四。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上盗扒，當(dāng)單擊dock圖標(biāo)并且沒有其他窗口打開時，
// 通常在應(yīng)用程序中重新創(chuàng)建一個窗口缀去。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
// 執(zhí)行關(guān)閉 自定義關(guān)閉
ipcMain.on('handelClose', function (res) {
console.log("執(zhí)行關(guān)閉操作")
app.quit()
})
// 您可以把應(yīng)用程序其他的流程寫在在此文件中
// 代碼 也可以拆分成幾個文件侣灶，然后用 require 導(dǎo)入。
