# my-electron

**Repository Path**: ztt-3270/my-electron

## Basic Information

- **Project Name**: my-electron
- **Description**: electron、js、css、html实现demo
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-06
- **Last Updated**: 2026-01-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

学习 - 视频： https://www.bilibili.com/video/BV1sE421N7M5/?spm_id_from=333.337.search-card.all.click&vd_source=39292a2cff91099c68db620721aa3181

官网：https://www.electronjs.org/zh/docs/latest/

笔记：https://blog.csdn.net/m0_62128476/article/details/154585616
1. 项目结构：
    - `package.json`：项目配置文件，包含项目依赖、脚本命令等。
    - `main.js`：主进程文件，负责创建窗口、加载渲染进程脚本等。
    - `preload.js`：预加载脚本文件，负责在渲染进程中暴露一些主进程的 API 给渲染进程调用。
    - `render.js`：渲染进程文件，负责渲染页面、处理用户交互等。
    - `index.html`：页面文件，包含应用的 HTML 内容。

/*  nodemon 配置文件（nodemon.json）
 *  开发阶段保存文件自动重启 Electron / Node 服务
 */
热更新：
1. 安装nodemon：`npm install nodemon -D`
2. 修改package.json中的scripts：
    "start-hot": "nodemon --exec electron ."
    
    热更新包含pages目录下的文件 如：html、css、js等
    需加nodemon.json文件配置，内容如下：
    ```json
    {
        /* 1. 忽略监听的目录/文件，避免改动依赖包或构建产物导致无限重启 */
        "ignore":
        [
            "node modules", // 第三方依赖（ typo：正确目录名应为 node_modules ）
            "dist" // 构建输出目录
        ],
         /* 2. 在终端里按哪个键可以手动重启；这里设为按字母 r */
        "restartable":"r",
        /* 3. 要监控的路径通配符；*.* 表示“当前目录下所有文件” */
        "watch":["*.*"],
        /* 4. 真正触发重启的文件扩展名白名单；省略其他后缀 */
        "ext":"html,js,ess" // ess 应为 css/less/sass 之误，可按实际需要修正
    }
    ```
3. 运行热更新：`npm run start-hot`





<!-- main.js 主进程  >  preload.js 预加载脚本 > render.js 渲染进程  -->
<!-- 注：
1. main.js 主进程 负责创建窗口、加载渲染进程脚本等
2. preload.js 预加载脚本 负责在渲染进程中暴露一些主进程的 API 给渲染进程调用
3. render.js 渲染进程 负责渲染页面、处理用户交互等 -->



<!-- 打包应用 -->
<!-- 使用electron-builder打包应用 -->
<!-- 1.安装electron-builder: -->
    npm install electron-builder -D
2.在package.json中进行相关配置，具体配置如下：
备注：json文件不支持注释，使用时请去掉所有注释。
```json
{
    "name": "my-electron-app", // 应用程序名称
    "version": "1.0.0", // 应用程序版本
    "description": "My Electron App", // 应用程序描述
    "main": "main.js", // 应用程序入口文件
    "scripts": {
        "start": "electron .", // 启动应用程序
        "build": "electron-builder" // 打包应用程序
    },
    "build": {
        "appId": "com.mycompany.myapp", // 应用程序唯一标识符 ID
        "directories": {
            "output": "dist" // 打包输出目录
        },
        "files": [
            "main.js", // 主进程文件
            "preload.js", // 预加载脚本文件
            "render.js", // 渲染进程文件
            "index.html" // 页面文件
        ],
        "win": {
            // Windows 平台设置
            "icon": "./logo.ico",      // 安装包 & 可执行文件的图标（必须是 .ico 格式，至少 256×256）
            "target": [{               // 要输出的安装包类型及对应架构
                "target": "nsis",        // 使用 NSIS 生成一键安装程序（.exe）
                "arch": ["x64"]          // 仅打包 64 位版本；需要 32 位再加 "ia32"
            }]
        },
         "mac": {
            "icon": "./icon.icns",          // 1. 图标
            "target": [
            {
                "target": "dmg",            // 2. 默认 dmg，可换 zip/pkg
                "arch": ["x64", "arm64"]    // 3. Intel + Apple Silicon 双架构
            }
            ],
            "category": "public.app-category.productivity" // 4. App Store 分类，可改
        },
    },
    "devDependencies": {
        "electron": "^13.1.7",
        "electron-builder": "^23.0.3"
    }
}
```