# electron-example

**Repository Path**: wisdomfriend/electron-example

## Basic Information

- **Project Name**: electron-example
- **Description**: electron-example
- **Primary Language**: Python
- **License**: 0BSD
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-22
- **Last Updated**: 2026-04-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# electron-example

这是一个最小可读、可改、可扩展的 Electron 示例项目。

## 文件说明

- `package.json`：项目入口信息、启动脚本、依赖
- `main.js`：Electron 主进程，负责创建窗口
- `index.html`：渲染进程页面（窗口里显示的内容）

## 运行方式

先确保本机安装了 Node.js（建议 18+），然后执行：

```powershell
cd D:\个人\文档\obsidian\python\openclaw\electron-example
npm install
npm start

#如果 npm install 卡住了,可以尝试
# 1 切到国内源
npm config set registry https://registry.npmmirror.com
# 1.1 切回官方源的命令
npm config set registry https://registry.npmjs.org

# 删除node_modules文件, 他是项目依赖包的本地安装目录
# 删除package-lock.json,他是是 npm 自动生成的依赖锁定文件，核心作用是“锁版本，保一致”
# npm cache verify 校验并清理 npm 缓存，修复损坏缓存、回收无用缓存
# npm install --verbose 安装依赖并输出详细日志，方便定位卡在哪个包、哪个步骤。
```

## 最核心理解

Electron = Node.js + Chromium。

- 主进程（Main）用 Node 能力控制系统层：窗口、托盘、菜单、文件、子进程等
- 渲染进程（Renderer）是网页页面：HTML/CSS/JS
- 主进程和渲染进程通过 IPC 通信（`ipcMain` / `ipcRenderer`）

你现在可以先改 `index.html` 看界面变化，再改 `main.js` 看窗口行为变化。

实际的进程如下图

![image-20260422162129384](C:\Users\62792\AppData\Roaming\Typora\typora-user-images\image-20260422162129384.png)

可以看到 4 个 `electron.exe`，通常是这几类里的组合：

- `main` 进程（主进程，负责应用生命周期）
- `renderer` 进程（每个窗口/页面一个或多个）
- `gpu` 进程（硬件加速渲染）
- `utility` / `network` / `crashpad` 等辅助进程