h5 做的网站 价格直播平台推荐

1. 核心概念

• 架构：
  • 主进程：控制应用生命周期（如创建窗口、处理系统事件），运行 main.js。
  • 渲染进程：每个 Web 页面（窗口）一个进程，负责 UI 渲染，可访问 DOM 和 Node.js API。
  • 进程通信：通过 ipcMain（主进程）和 ipcRenderer（渲染进程）实现双向通信。
• 应用结构：
  • package.json：配置应用入口、脚本和依赖。
  • main.js：主进程入口，管理窗口和应用事件。
  • renderer.js：渲染进程逻辑，处理 UI 交互。

2. 应用开发

窗口管理

• BrowserWindow：创建和管理应用窗口，支持自定义配置（尺寸、透明度、无边框等）。
• 多窗口应用：主窗口、模态框、托盘菜单等，通过 webContents 通信。

UI 与渲染

• 前端技术：HTML、CSS、JavaScript，可集成框架（React/Vue/Angular）。
• 原生 UI 组件：通过 @electron/remote 或自定义模块调用系统对话框、文件选择器等。

系统集成

• 文件操作：使用 Node.js 的 fs 模块读写文件。
• 托盘图标：通过 Tray 类实现系统托盘应用。
• 菜单与快捷键：自定义应用菜单（Menu）和全局快捷键（globalShortcut）。

数据存储

• 本地存储：
  • localStorage：Web API，存储简单数据。
  • electron-store：基于 JSON 文件的键值存储。
  • SQLite：通过 better-sqlite3 等模块实现结构化存储。

3. 进程通信

• IPC（进程间通信）：
  • 主进程 → 渲染进程：webContents.send() 发送消息，渲染进程监听 ipcRenderer.on()。
  • 渲染进程 → 主进程：ipcRenderer.send() 发送消息，主进程监听 ipcMain.on()。
• 远程模块（Remote）：通过 @electron/remote 在渲染进程中直接调用主进程 API（需谨慎使用，存在安全风险）。

4. 打包与分发

• 打包工具：
  • electron-builder：支持多平台（Windows/macOS/Linux），自动生成安装程序。
  • electron-packager：生成可执行文件，需手动配置安装程序。
• 应用签名：为 macOS 和 Windows 应用签名，提升安全性和用户信任度。

5. 性能优化

• 内存管理：避免内存泄漏，及时销毁不再使用的窗口和对象。
• 懒加载：延迟加载非关键资源，提升启动速度。
• WebWorker：在渲染进程中使用 WebWorker 处理耗时任务，避免 UI 卡顿。
• 代码分割：通过 Webpack 等工具分割代码，减少主进程和渲染进程的启动时间。

6. 安全实践

• 禁用 Node.js 集成：在渲染进程中使用 nodeIntegration: false，通过预加载脚本（preload.js）安全暴露 API。
• 沙箱模式：启用 sandbox: true 限制渲染进程权限。
• 内容安全策略（CSP）：通过 webPreferences.contentSecurityPolicy 限制页面加载资源的来源。
• 输入验证：对用户输入和外部资源进行严格验证，防止代码注入攻击。

7. 调试与测试

• 调试工具：
  • Chrome DevTools：调试渲染进程。
  • VS Code 调试：通过配置 launch.json 调试主进程和渲染进程。
• 自动化测试：
  • 单元测试：Jest/Mocha 测试独立模块。
  • 端到端测试：Playwright/Puppeteer/Electron Fiddle 测试用户交互流程。

8. 高级特性

• 自动更新：使用 electron-updater 实现应用自动更新。
• 原生模块：通过 node-gyp 编译 C++ 模块扩展功能。
• 硬件访问：通过 Node.js 模块访问串口、USB 设备等。