electron中封装多窗口
时间: 2023-10-01 22:07:49 浏览: 195
electron封装html开发实例
5星 · 资源好评率100%
Electron中封装多窗口可以使用BrowserWindow模块。可以通过创建多个BrowserWindow实例来实现多窗口功能,然后使用ipcMain和ipcRenderer模块实现窗口间的通信。
以下是一个简单的例子,展示如何在Electron中封装多窗口:
```javascript
// 主进程代码
const { app, BrowserWindow, ipcMain } = require('electron')
let windows = []
function createWindow() {
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
// 将窗口添加到窗口列表中
windows.push(win)
// 当窗口关闭时,将其从窗口列表中移除
win.on('closed', () => {
windows.splice(windows.indexOf(win), 1)
})
return win
}
app.on('ready', () => {
createWindow()
})
// 监听创建新窗口的请求
ipcMain.on('create-window', () => {
createWindow()
})
// 监听关闭所有窗口的请求
ipcMain.on('close-all-windows', () => {
windows.forEach(win => {
win.close()
})
})
```
```html
<!-- renderer进程代码 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多窗口封装</title>
</head>
<body>
<button id="create-window">创建新窗口</button>
<button id="close-all-windows">关闭所有窗口</button>
<script>
const { ipcRenderer } = require('electron')
let createWindowButton = document.querySelector('#create-window')
let closeAllWindowsButton = document.querySelector('#close-all-windows')
// 发送请求创建新窗口
createWindowButton.addEventListener('click', () => {
ipcRenderer.send('create-window')
})
// 发送请求关闭所有窗口
closeAllWindowsButton.addEventListener('click', () => {
ipcRenderer.send('close-all-windows')
})
</script>
</body>
</html>
```
在这个例子中,我们在主进程中创建了一个窗口列表,然后在窗口关闭时将其从列表中移除。我们还在主进程中监听了两个请求:一个用于创建新窗口,另一个用于关闭所有窗口。在渲染进程中,我们使用ipcRenderer模块向主进程发送这些请求。
这只是一个简单的例子,你可以根据自己的需求进行修改和扩展。
阅读全文