示例一:修改标题
1.在入口文件,main.js中配置预加载文件的路径,并添加对事件 set-title 的监听用来处理该事件
const {app, BrowserWindow,ipcMain} = require ('electron');
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
preload: path.join(__dirname, 'preload.js')//配置预加载文件的地址
}
})
win.loadFile('src/index.html') //首页
}
app.on('ready',createWindow)
app.on('window-all-closed', function () {
if (process.platform!== 'darwin') {
app.quit()
}
})
ipcMain.on("set-title",(event,title)=>{
// 获取当前正在使用的窗口,修改标题
// console.log(event,'2222222222')
BrowserWindow.getFocusedWindow().setTitle(title)
})
2.在src下创建preload.js文件,并暴露exposeInMainWorld函数
const {contextBridge,ipcRenderer} = require('electron');
contextBridge.exposeInMainWorld('electronApi',{
setTitle:(title)=>{
console.log('进去了',title)
ipcRenderer.send('set-title',title);
},
appName:'electron_my'
})
3.在首页中添加点击事件,将输入框中的文字设置为应用的标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hello</h1>
<input type="text" id="text">
<button id="btn">修改标题</button>
<script>
const title = document.getElementById('text')
const btn = document.getElementById('btn')
btn.addEventListener('click', () => {
console.log('11111')
const value = title.value
console.log(value,'11111')
window.electronApi.setTitle(value)
})
</script>
</body>
</html>
示例二:窗口操作
1.在入口文件main.js中修改窗口创建时的配置,将系统的边框去掉,写一个自己的样式,
给按钮绑定点击事件,通过预加载文件暴露出来的send事件向主进程通信,传递参数事件名和事件行为类型:window:state和action
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入外联样式文件 -->
<link rel="stylesheet" href="./index.css">
</head>
<body>
<header>
<h1>窗口标题</h1>
<nav>
<button class="btn-window" data-action="minimize">最小化</button>
<button class="btn-window" data-action="maximize">最大化</button>
<button class="btn-window" data-action="restore">还原</button>
<button class="btn-window" data-action="close">关闭</button>
</nav>
</header>
<input type="text" id="text">
<button id="btn">修改标题</button>
<script>
// 更改标题
const title = document.getElementById('text')
const btn = document.getElementById('btn')
btn.addEventListener('click', () => {
console.log('11111')
const value = title.value
console.log(value,'11111')
window.electronApi.setTitle(value)
})
// 按钮操作
const btns = document.querySelectorAll('.btn-window')
btns.forEach(btn => {
btn.addEventListener('click', () => {
const action = btn.getAttribute('data-action');
console.log(action,'查看当前点击的按钮')
window.electronApi.send("window:state",action)
})
})
</script>
</body>
</html>
样式文件 index.css
*{
margin: 0;
padding: 0;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px;
/* 父盒子可以拖拽 */
-webkit-app-region: drag;
}
header nav{
/* 子盒子不可以拖拽 */
-webkit-app-region: no-drag;
}
在预加载文件中暴露发送 send 事件
const {contextBridge,ipcRenderer} = require('electron');
contextBridge.exposeInMainWorld('electronApi',{
setTitle:(title)=>{
console.log('进去了',title)
ipcRenderer.send('set-title',title);
},
appName:'electron_my',
// 窗口的操作
send:(channel,data)=>{
ipcRenderer.send(channel,data);
}
})
在main.js中添加window:state事件的监听处理通过事件行为类型做不同的操作
const {app, BrowserWindow,ipcMain} = require ('electron');
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
frame:false,//隐藏系统边框
webPreferences: {
nodeIntegration: true,
preload: path.join(__dirname, 'preload.js'),
}
})
win.loadFile('src/index.html')
}
app.on('ready',createWindow)
app.on('window-all-closed', function () {
if (process.platform!== 'darwin') {
app.quit()
}
})
ipcMain.on("set-title",(event,title)=>{
// 获取当前正在使用的窗口,修改标题
// console.log(event,'2222222222')
BrowserWindow.getFocusedWindow().setTitle(title)
})
//添加监听 window:state 事件的处理
ipcMain.on("window:state",(event,action)=>{
// 获取当前正在使用的窗口,
const window = BrowserWindow.getFocusedWindow();
switch(action){
case 'minimize':
window.minimize();
break;
case 'maximize':
// 如果最大化和最小化是一个按钮时
// window.isMaximized()? window.unmaximize() : window.maximize();
window.maximize();
break;
case 'restore':
window.unmaximize();
break;
case 'close':
window.close();
}
})