### ELECTRON API DEMOS 关键知识点解析
#### 1. 窗口操作
##### 1.1 创建和管理窗口
在 Electron 应用程序中，`BrowserWindow` 模块是一个非常重要的组成部分，它提供了创建和管理浏览器窗口的功能。通过这个模块，我们可以灵活地控制应用程序的用户界面。
- **创建新窗口**:
- **语法**: `new BrowserWindow(options)`
- **参数**:
- `options`: 配置对象，可以指定窗口的宽度、高度、是否可调整大小等属性。
- **示例代码**:
```javascript
const { BrowserWindow } = require('electron').remote;
const path = require('path');
const newWindowBtn = document.getElementById('new-window');
newWindowBtn.addEventListener('click', (event) => {
const modalPath = path.join('file://', __dirname, '../../sections/windows/modal.html');
let win = new BrowserWindow({ width: 400, height: 320 });
win.on('close', () => {
win = null;
});
win.loadURL(modalPath);
win.show();
});
```
- **解释**:
- `BrowserWindow` 是 Electron 提供的一个用于创建和控制窗口的类。
- `remote` 是 Electron 的一个模块，它允许渲染进程访问主进程中的 API。
- `path` 是 Node.js 自带的模块，用于处理文件路径。
- `path.join()` 方法用来拼接路径字符串，并确保路径分隔符正确。
- `__dirname` 是 Node.js 中的全局变量，表示当前文件所在的目录路径。
- **管理窗口状态**:
- **监听窗口事件**:
- 可以通过监听 `resize`, `move`, `blur`, 和 `focus` 等事件来获取窗口的状态变化。
- **示例代码**:
```javascript
const { BrowserWindow } = require('electron').remote;
const path = require('path');
const manageWindowBtn = document.getElementById('manage-window');
let win;
manageWindowBtn.addEventListener('click', (event) => {
const modalPath = path.join('file://', __dirname, '../../sections/windows/manage-modal.html');
win = new BrowserWindow({ width: 400, height: 275 });
win.on('resize', updateReply);
win.on('move', updateReply);
win.on('close', () => {
win = null;
});
win.loadURL(modalPath);
win.show();
function updateReply() {
const manageWindowReply = document.getElementById('manage-window-reply');
const message = `Size: ${win.getSize()} Position: ${win.getPosition()}`;
manageWindowReply.innerText = message;
}
});
```
- **监听窗口焦点变化**:
- **示例代码**:
```javascript
const { BrowserWindow } = require('electron').remote;
const path = require('path');
const manageWindowBtn = document.getElementById('listen-to-window');
const focusModalBtn = document.getElementById('focus-on-modal-window');
let win;
manageWindowBtn.addEventListener('click', () => {
const modalPath = path.join('file://', __dirname, '../../sections/windows/modal-toggle-visibility.html');
win = new BrowserWindow({ width: 600, height: 400 });
win.on('blur', () => {
// 当窗口失去焦点时执行的操作
focusModalBtn.classList.add('disappear');
focusModalBtn.classList.remove('smooth-appear');
// 其他操作
});
win.loadURL(modalPath);
win.show();
});
```
通过上述示例代码可以看出，在 Electron 中使用 `BrowserWindow` 进行窗口的创建和管理是非常直观且强大的。开发者可以根据需求自定义窗口的各种行为和外观，从而实现丰富的用户体验。此外，通过监听窗口的各种事件，可以及时响应用户的交互动作，提高应用的响应性和交互性。
