238 lines
5.4 KiB
Markdown
238 lines
5.4 KiB
Markdown
# Electron 窗口控制指南
|
||
|
||
## 窗口功能
|
||
|
||
### 基本控制
|
||
|
||
| 功能 | 操作 |
|
||
|------|------|
|
||
| 调整大小 | 拖动窗口边缘 |
|
||
| 最小化 | 点击窗口右上角的 `-` 按钮 |
|
||
| 最大化 | 点击窗口右上角的 `□` 按钮 |
|
||
| 还原 | 再次点击最大化按钮 |
|
||
| 关闭 | 点击窗口右上角的 `×` 按钮 |
|
||
|
||
### 快捷键
|
||
|
||
| 快捷键 | 功能 |
|
||
|--------|------|
|
||
| `F11` | 切换全屏模式 |
|
||
| `Alt + F4` | 退出应用 |
|
||
| `Alt + F4` (Mac) | `Cmd + Q` |
|
||
|
||
## 窗口配置
|
||
|
||
### 当前设置
|
||
|
||
```javascript
|
||
{
|
||
width: 1280, // 初始宽度
|
||
height: 720, // 初始高度
|
||
minWidth: 800, // 最小宽度
|
||
minHeight: 600, // 最小高度
|
||
resizable: true, // 允许调整大小
|
||
maximizable: true, // 允许最大化
|
||
minimizable: true, // 允许最小化
|
||
closable: true, // 允许关闭
|
||
autoHideMenuBar: false // 显示菜单栏
|
||
}
|
||
```
|
||
|
||
### 自定义窗口大小
|
||
|
||
如果你想修改默认窗口大小，编辑 `electron/main.js`：
|
||
|
||
```javascript
|
||
const win = new BrowserWindow({
|
||
width: 1920, // 修改为你想要的宽度
|
||
height: 1080, // 修改为你想要的高度
|
||
minWidth: 1024, // 修改为你想要的最小宽度
|
||
minHeight: 768, // 修改为你想要的最小高度
|
||
// ... 其他配置
|
||
})
|
||
```
|
||
|
||
### 启动时最大化
|
||
|
||
如果你希望应用启动时自动最大化，修改 `electron/main.js`：
|
||
|
||
```javascript
|
||
const win = new BrowserWindow({
|
||
// ... 其他配置
|
||
})
|
||
|
||
// 在创建窗口后添加
|
||
win.maximize()
|
||
```
|
||
|
||
### 启动时全屏
|
||
|
||
如果你希望应用启动时全屏，修改 `electron/main.js`：
|
||
|
||
```javascript
|
||
const win = new BrowserWindow({
|
||
// ... 其他配置
|
||
fullscreen: true // 启用全屏
|
||
})
|
||
```
|
||
|
||
## 菜单栏
|
||
|
||
应用会显示 Electron 默认菜单栏，包含以下菜单：
|
||
|
||
### File 菜单
|
||
- **New Window** - 打开新窗口
|
||
- **Close** - 关闭当前窗口
|
||
- **Quit** - 退出应用
|
||
|
||
### Edit 菜单
|
||
- **Undo** - 撤销
|
||
- **Redo** - 重做
|
||
- **Cut** - 剪切
|
||
- **Copy** - 复制
|
||
- **Paste** - 粘贴
|
||
- **Select All** - 全选
|
||
|
||
### View 菜单
|
||
- **Reload** - 重新加载页面
|
||
- **Force Reload** - 强制重新加载
|
||
- **Toggle Developer Tools** - 切换开发者工具
|
||
- **Toggle Full Screen** - 切换全屏
|
||
- **Zoom In** - 放大
|
||
- **Zoom Out** - 缩小
|
||
- **Reset Zoom** - 重置缩放
|
||
|
||
### Window 菜单
|
||
- **Minimize** - 最小化
|
||
- **Zoom** - 最大化/还原
|
||
- **Front** - 置顶
|
||
|
||
## 隐藏菜单栏
|
||
|
||
如果你想隐藏菜单栏，修改 `electron/main.js`：
|
||
|
||
```javascript
|
||
const win = new BrowserWindow({
|
||
// ... 其他配置
|
||
autoHideMenuBar: true // 隐藏菜单栏
|
||
})
|
||
```
|
||
|
||
## 自定义菜单栏
|
||
|
||
如果你想创建自定义菜单，在 `electron/main.js` 中添加：
|
||
|
||
```javascript
|
||
const { Menu } = require('electron')
|
||
|
||
const template = [
|
||
{
|
||
label: '游戏',
|
||
submenu: [
|
||
{ label: '新游戏', click: () => { /* 新游戏逻辑 */ } },
|
||
{ label: '继续游戏', click: () => { /* 继续游戏逻辑 */ } },
|
||
{ type: 'separator' },
|
||
{ label: '退出', click: () => app.quit() }
|
||
]
|
||
},
|
||
{
|
||
label: '设置',
|
||
submenu: [
|
||
{ label: '全屏', click: () => { win.setFullScreen(!win.isFullScreen()) } },
|
||
{ label: '开发者工具', click: () => { win.webContents.toggleDevTools() } }
|
||
]
|
||
}
|
||
]
|
||
|
||
const menu = Menu.buildFromTemplate(template)
|
||
Menu.setApplicationMenu(menu)
|
||
```
|
||
|
||
## 窗口状态保存
|
||
|
||
如果你想记住窗口的大小和位置，可以使用以下代码：
|
||
|
||
```javascript
|
||
const Store = require('electron-store')
|
||
const store = new Store()
|
||
|
||
app.whenReady().then(async () => {
|
||
// 获取保存的窗口状态
|
||
const windowState = store.get('windowState', {
|
||
width: 1280,
|
||
height: 720,
|
||
x: undefined,
|
||
y: undefined
|
||
})
|
||
|
||
const win = new BrowserWindow({
|
||
width: windowState.width,
|
||
height: windowState.height,
|
||
x: windowState.x,
|
||
y: windowState.y,
|
||
// ... 其他配置
|
||
})
|
||
|
||
// 保存窗口状态
|
||
win.on('close', () => {
|
||
const bounds = win.getBounds()
|
||
store.set('windowState', {
|
||
width: bounds.width,
|
||
height: bounds.height,
|
||
x: bounds.x,
|
||
y: bounds.y
|
||
})
|
||
})
|
||
})
|
||
```
|
||
|
||
## 边框窗口
|
||
|
||
如果你想要无边框窗口，修改 `electron/main.js`：
|
||
|
||
```javascript
|
||
const win = new BrowserWindow({
|
||
frame: false, // 无边框
|
||
transparent: true, // 透明背景
|
||
// ... 其他配置
|
||
})
|
||
```
|
||
|
||
注意：无边框窗口需要你自己实现窗口控制按钮。
|
||
|
||
## 常见问题
|
||
|
||
### Q: 如何在应用内切换全屏？
|
||
A: 按 `F11` 键或通过菜单栏 `View` → `Toggle Full Screen`
|
||
|
||
### Q: 如何隐藏开发者工具？
|
||
A: 删除 `electron/main.js` 中的 `win.webContents.openDevTools()` 行
|
||
|
||
### Q: 如何设置应用图标？
|
||
A: 在 `electron/main.js` 中设置 `icon` 选项
|
||
|
||
### Q: 如何防止用户调整窗口大小？
|
||
A: 设置 `resizable: false`
|
||
|
||
### Q: 如何设置窗口最小尺寸？
|
||
A: 设置 `minWidth` 和 `minHeight` 选项
|
||
|
||
## 性能建议
|
||
|
||
1. **合理的初始大小** - 设置合适的默认窗口大小
|
||
2. **最小尺寸限制** - 防止窗口过小导致内容无法显示
|
||
3. **响应式设计** - 确保应用在不同窗口尺寸下都能正常工作
|
||
4. **窗口状态保存** - 保存用户的首选窗口大小和位置
|
||
|
||
## 总结
|
||
|
||
现在你的应用具有完整的窗口控制功能：
|
||
- ✅ 可调整大小
|
||
- ✅ 可最小化
|
||
- ✅ 可最大化
|
||
- ✅ 可关闭
|
||
- ✅ 快捷键支持
|
||
- ✅ 菜单栏支持
|
||
|
||
用户可以根据自己的喜好自由调整窗口大小和全屏模式！
|