# electron-demo

**Repository Path**: ruirui-study/electron-demo

## Basic Information

- **Project Name**: electron-demo
- **Description**: 一个electron Demo项目，演示了多个API、窗口管理、菜单管理、托盘管理等功能，用最基础的封装，打造最好的效果，无闪烁、无多余的代码，你可以随意拓展。此外，还演示了创建子进程、爬虫示例等功能……
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-04-16
- **Last Updated**: 2025-07-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# electron-app-demo演示项目

项目地址：[https://gitee.com/ruirui-study/electron-demo](https://gitee.com/ruirui-study/electron-demo)

electron入门、演示项目，主要演示了以下功能：
- 主进程与渲染进程的通信、传参等；
- 窗口管理、创建、销毁、最小化、最大化、还原、关闭、仅保留主窗口；
- 托盘管理，创建、销毁、右键菜单、点击事件、气球通知等；
- 菜单管理，创建、销毁、设置菜单、设置菜单项、设置菜单项的子菜单、类型设置、点击事件等；
- 多窗口通信、渲染进程与主进程的通信；
- 窗口创建、销毁、显示无闪烁现象；
- 基础的API测试与演示等：
  - 剪切板 clipboard
  - 弹框 dialog
  - 菜单 menu
  - 通知 notification
  - shell模块
  - child_process【nodejs】
- 实例演示了登录及退出等操作，代码里注释清晰、逻辑清晰；
- 本地持久化方案演示，使用electron-store；
- 打包window的自定义配置（详见package.json中的build配置项，build配置项可删除）
- 启动子进程、退出应用时销毁子进程；
- 爬虫示例演示【属于nodejs范畴，此处做结合演示】

本案例细节及逻辑说明
- 登录及退出操作，使用了electron-store进行本地持久化
  - 初始未登录：
    - 创建登录窗口，并监听登录窗口的关闭事件，
    - 如果登录成功，则销毁登录窗口，并创建主窗口，
    - 并保存登录状态到electron-store中；
    - 如果关闭登录窗口，直接退出应用；
  - 已登录：
    - 直接创建主窗口，并保存登录状态到electron-store中；
    - 并且创建系统托盘。
    - 如果点击关闭按钮，弹出自定义弹框，可配置最小化到托盘、退出程序，支持配置不再显示
    - 如果选择最小化到托盘，则隐藏主窗口，设置任务栏状态不可见，点击托盘图标时，再次设置任务栏为可见状态
- 窗口管理，单独封装，便于维护，细节见代码注释
- 托盘管理，单独封装，便于维护，细节见代码注释，包含各种配置及点击示例
- 前端封装自定义的标题栏组件，支持拖拽、制定、最小化、最大化、关闭等操作、支持自定义标题内容样式；
- package.json，各种打包配置，自定义配置方式等参数


## 项目安装

### 快速开始

本项目使用[https://cn-evite.netlify.app/](https://cn-evite.netlify.app/)快速构建，请保证：node版本 >= 18

基于：electron + vite + vue3 + element plus + pinia

目前1.0.24版本稳定，最新版的可能会报错（具体情况具体对待）
```bash
npm create @quick-start/electron@1.0.24
```

### Install

```bash
$ npm install
```

### Development

```bash
$ npm run dev
```

### Build

```bash
# For windows
$ npm run build:win

# For macOS
$ npm run build:mac

# For Linux
$ npm run build:linux
```

## 项目预览

##### 多窗口
多窗口创建、窗口之间通信
<img src="./screenShorts/多窗口.jpg" alt="多窗口">

##### 任务栏
window正常点击右上角的最小化，是隐藏在任务栏的，本案例隐藏到托盘时不显示任务栏，显示时才显示任务栏，同主流应用一样。
<img src="./screenShorts/任务栏.jpg" alt="任务栏">

##### 任务管理器
实测一般情况占用内存为120-130M左右，在可接受范围，每多创建一个窗口，内存多占用15-25M左右，根据实际情况而定
<img src="./screenShorts/任务管理器.jpg" alt="任务管理器">

##### 屏幕检测
检测所有的屏幕信息，大小、分辨率、刷新率等信息
<img src="./screenShorts/屏幕.jpg" alt="屏幕">

##### 弹框
演示几种类型的弹框
<img src="./screenShorts/弹框.jpg" alt="弹框">

##### 托盘
未登录时不显示托盘，登录后才显示托盘，托盘自定义图标、自定义点击事件、右键事件等
<img src="./screenShorts/托盘.jpg" alt="托盘">

##### 自定义安装
配置用户自定义安装位置
<img src="./screenShorts/自定义安装.jpg" alt="自定义安装">

##### 自定义标题栏
隐藏原生的标题栏，用自定义的覆盖，可拖拽、最小化、最大化、关闭、置顶等操作
<img src="./screenShorts/自定义标题栏.jpg" alt="自定义标题栏">

##### 菜单
原生菜单管理，演示点击事件等
<img src="./screenShorts/菜单.jpg" alt="菜单">

##### 通知
系统通知样式及方法
<img src="./screenShorts/通知.jpg" alt="通知">

##### node-child
演示nodejs的child_process模块
<img src="./screenShorts/node-child.jpg" alt="node-child">

##### node-process
演示nodejs的process模块
<img src="./screenShorts/node-process.jpg" alt="node-process">

##### 爬虫
演示爬取CSDN首页数据，并展示在页面上
<img src="./screenShorts/爬虫.png" alt="爬虫">

#### 无闪屏登录
初始未登录时、创建登录窗口，登录成功后销毁登录窗口，创建主窗口（两个窗口大小不一样，无特殊处理的话会有闪烁，体验不好），并保存登录状态到electron-store中，这个过程无闪烁

<a herf="./screenShorts/无闪屏登录.mp4" target="_blank">演示视频</a>