Electron 桌面应用开发指南：7 天入门实战 | 极客日志

JavaScriptNode.js大前端

Electron 桌面应用开发指南：7 天入门实战

介绍使用 Electron 快速开发跨平台桌面应用的方法。涵盖架构原理（主进程与渲染进程）、脚手架搭建（electron-forge）、安全配置（contextIsolation、preload）、性能优化及常见问题排查。通过实战案例（本地记事本）演示文件操作、快捷键及窗口管理，帮助前端开发者掌握桌面端技能。

CodeArtist发布于 2026/4/6更新于 2026/5/2227 浏览

Electron 桌面应用开发指南：7 天入门实战

引言

为什么你的简历还缺个'桌面端'项目

说实话，现在前端这行竞争非常激烈。打开招聘网站，很多岗位要求'全栈'，或者在精通 Vue/React 的基础上要求有小程序经验——点进去一聊，往往还会问'会不会搞点桌面端的东西'。

我就纳了闷了，当年咱们入坑前端的时候，不就是说好了'一次编写，到处运行'吗？结果现在倒好，H5 卷不动了卷小程序，小程序卷不动了又开始卷桌面端。前两天我一哥们儿面试，面试官原话是：'你们前端现在不都会 Electron 吗？我们后台管理系统想做个客户端版本。'哥们儿当场懵逼，回来就问我：'这玩意儿不是搞 VS Code 那帮大佬玩的吗？咱这水平能碰？'

能碰，太能碰了。而且我跟你说，这玩意儿上手比你想象得简单十倍，但简历上写出来专业度能高十倍。你想啊，别人简历上都是'开发了 XX 管理系统'，你写的是'独立开发了跨平台桌面客户端应用，支持 Windows/macOS 双平台'——这差距，就像你穿拖鞋去面试和穿皮鞋去面试的区别，懂我意思吧？

更关键的是，现在老板们也不知道从哪听来的，总觉得'客户端'比'网页'高级。上周我们产品经理突然在群里@我：'能不能把咱们的后台搞成软件那种，双击图标就能打开，别老是用浏览器。'我当时就想回他：'您知道浏览器就是个软件吗？'但转念一想，算了，跟钱过不去干嘛。花三天时间用 Electron 套了个壳，老板看完演示直接说：'这个好，专业！'

所以啊，别觉得桌面端离你很远。你现在的 HTML、CSS、JavaScript 功底完全够用，甚至那些让你头秃的浏览器兼容性问题在这里都不存在了——因为 Electron 里面就是个 Chrome，版本还是你定的。不用现学 C#，不用啃 C++，用你最熟悉的那套技术栈，就能打包出来一个.exe 文件，双击就能跑。

不过话说回来，虽然我说得轻松，但'跨平台'这三个字确实容易把人忽悠瘸了。很多人一听'跨平台'就以为是银弹，结果进去才发现，Windows 上的路径分隔符和 macOS 不一样，系统通知的 API 调用方式也有差异，甚至有些功能在某个平台上干脆就不支持。所以咱们得先扒开 Electron 的底裤，看看这货到底是个什么东西，别稀里糊涂就往里跳。

Electron 架构解析

核心架构：Chromium 与 Node.js

你要是去 GitHub 上看 Electron 的源码，或者跟后端同事解释你在做什么，最简单粗暴的说法就是：'就是个套了壳的 Chrome 浏览器，里面塞了个 Node.js。'这话虽然糙，但理儿是这么个理儿。

Electron 的核心架构其实就两部分：Chromium 负责渲染界面，Node.js 负责操作系统级别的操作。Chromium 这部分好理解，就是你写的那堆 HTML、CSS、JavaScript 跑的地方，跟你写网页没什么两样。但 Node.js 在里面干嘛呢？它让你能在'网页'里直接调用 fs 模块读写文件，能用 child_process 启动系统命令，能访问数据库——这些在普通浏览器里想都不敢想的事情，在 Electron 里就是家常便饭。

但这里有个特别有意思的设计，也是新手最容易懵圈的地方：Electron 把这两个东西分成了'主进程'（Main Process）和'渲染进程'（Renderer Process）。主进程就是那个跑 Node.js 的，它负责创建窗口、管理应用生命周期、搞系统级别的操作。渲染进程就是每个窗口里的 Chromium 实例，负责展示界面、响应用户交互。

这俩进程怎么通信呢？官方给了一套 IPC（进程间通信）机制。简单来说，渲染进程想读文件？行，但它不能直接读，得发消息给主进程：'哥，帮我读一下 C 盘这个文件。'主进程读完了再发回去：'给，内容在这儿。'听起来挺绕的，但这设计其实是为了安全——要是渲染进程能随便访问系统 API，那用户打开个第三方页面不就完蛋了？

// 主进程 main.js - 这就是整个应用的入口，Node.js 环境
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const fs = require('fs');

// 保持窗口对象的全局引用，不然会被垃圾回收搞没
let mainWindow;

function () {
    
    mainWindow =  ({
        : ,
        : ,
        : {
            
            : path.(__dirname, ),
            
            : ,
            
            : ,
            
            : 
        }
    });

    
    mainWindow.();

    
    

    
    mainWindow.(,  {
        mainWindow = ;
    });
}


app.().(createWindow);


app.(,  {
    
     (process. !== ) {
        app.();
    }
});


app.(,  {
     (.(). === ) {
        ();
    }
});


ipcMain.(,  (event, filePath) => {
     {
        
         content =  fs..(filePath, );
         { : , content };
    }  (error) {
         { : , : error. };
    }
});


ipcMain.(,  (event, filePath, content) => {
     {
        
         (fs.(filePath)) {
             backupPath = ;
             fs..(filePath, backupPath);
        }
         fs..(filePath, content, );
         { :  };
    }  (error) {
         { : , : error. };
    }
});

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

// preload.js - 预加载脚本，这是渲染进程和主进程之间的'翻译官'
const { contextBridge, ipcRenderer } = require('electron');

// 用 contextBridge 把 API 暴露给渲染进程，这样比较安全
contextBridge.exposeInMainWorld('electronAPI', {
    // 暴露读文件的方法，渲染进程调用这个就能间接用到 Node.js 的 fs 模块
    readFile: (filePath) => ipcRenderer.invoke('read-file', filePath),
    // 暴露写文件的方法
    writeFile: (filePath, content) => ipcRenderer.invoke('write-file', filePath, content),
    // 还可以暴露一些平台信息，让渲染进程知道自己在啥系统上跑
    platform: process.platform,
    // 版本信息有时候也挺有用
    versions: {
        node: process.versions.node,
        electron: process.versions.electron,
        chrome: process.versions.chrome
    }
});

<!-- index.html - 这就是普通的 HTML，跟写网页一模一样 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的第一个 Electron 应用</title>
    <style>
        /* 这里随便写 CSS，反正里面是个 Chrome，ES6+ 随便用 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        textarea {
            width: 100%;
            height: 300px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: 'Consolas', monospace;
            resize: vertical;
        }
        button {
            background: #0066cc;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            margin-top: 10px;
        }
        button:hover {
            background: #0052a3;
        }
        .status {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
            display: none;
        }
        .status.success {
            background: #d4edda;
            color: #155724;
            display: block;
        }
        .status.error {
            background: #f8d7da;
            color: #721c24;
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 Electron 文件编辑器</h1>
        <p>当前平台：<span id="platform"></span> | Electron 版本：<span id="version"></span></p>
        <textarea id="editor" placeholder="在这里输入内容..."></textarea>
        <div>
            <button onclick="openFile()">📂 打开文件</button>
            <button onclick="saveFile()">💾 保存文件</button>
        </div>
        <div id="status" class="status"></div>
    </div>
    <script>
        // 页面加载时显示系统信息，这些数据是从 preload.js 里暴露出来的
        document.getElementById('platform').textContent = window.electronAPI.platform;
        document.getElementById('version').textContent = window.electronAPI.versions.electron;

        const editor = document.getElementById('editor');
        const statusDiv = document.getElementById('status');
        let currentFilePath = null;

        // 显示状态消息，成功失败不同颜色
        function showStatus(message, isError = false) {
            statusDiv.textContent = message;
            statusDiv.className = 'status ' + (isError ? 'error' : 'success');
            setTimeout(() => {
                statusDiv.className = 'status';
            }, 3000);
        }

        // 打开文件，这里调用的其实是主进程的 fs.readFile
        async function openFile() {
            // 实际项目中应该用对话框让用户选文件，这里简化一下直接写死路径演示
            const path = 'test.txt';
             result =  ..(path);
             (result.) {
                editor. = result.;
                currentFilePath = path;
                ();
            }  {
                ( + result., );
            }
        }

        
          () {
             path = currentFilePath || ;
             content = editor.;
             result =  ..(path, content);
             (result.) {
                currentFilePath = path;
                ();
            }  {
                ( + result., );
            }
        }
    </script>
</body>
</html>

# 全局安装 electron-forge 的 CLI 工具
npm install -g @electron-forge/cli
# 创建新项目，my-app 是你的项目名
electron-forge init my-app
# 进入目录
cd my-app
# 启动开发模式，带热重载的，改代码自动刷新
npm start

my-app/
├── src/ # 源代码目录
│   ├── index.html # 主界面
│   ├── index.js # 主进程入口（就是前面的 main.js）
│   ├── preload.js # 预加载脚本
│   └── renderer.js # 渲染进程的 JS（如果你不想把 JS 写在 HTML 里）
├── forge.config.js # Electron Forge 的配置文件
├── package.json # 依赖管理
└── assets/ # 放图标、图片等静态资源

// 一个更完整的 main.js，带窗口状态记忆和系统托盘
const { app, BrowserWindow, Tray, Menu, ipcMain, dialog } = require('electron');
const path = require('path');
const fs = require('fs');
const Store = require('electron-store'); // 需要 npm install electron-store

// 用这个库来存用户配置，比直接读写文件方便多了
const store = new Store();

let mainWindow;
let tray;

function createWindow() {
    // 从 store 里读取上次保存的窗口状态，没有就用默认值
    const windowState = store.get('windowState', { width: 1200, height: 800, x: undefined, y: undefined, maximized: false });
    
    mainWindow = new BrowserWindow({
        width: windowState.width,
        height: windowState.height,
        x: windowState.x,
        y: windowState.y,
        minWidth: 800, // 限制最小尺寸，别让用户缩得太小
        minHeight: 600,
        titleBarStyle: 'hiddenInset', // macOS 上好看一点的标题栏
        show: false, // 先不显示，等加载完了再 show，避免白屏尴尬
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            contextIsolation: true,
            enableRemoteModule: false,
            nodeIntegration: false, // 安全相关：禁止 eval，禁止外部内容
            allowEval: false,
            webSecurity: true
        }
    });

    // 加载页面
    mainWindow.loadFile('src/index.html');

    // 页面加载完成后再显示窗口，体验更好
    mainWindow.once('ready-to-show', () => {
        mainWindow.show();
        if (windowState.maximized) {
            mainWindow.maximize();
        }
    });

    // 窗口关闭前保存状态
    mainWindow.on('close', (event) => {
        // 如果配置了最小化到托盘，就不真正关闭
        if (store.get('minimizeToTray', true) && !app.isQuiting) {
            event.preventDefault();
            mainWindow.hide();
            return;
        }
        // 保存窗口状态
        const bounds = mainWindow.getBounds();
        store.set('windowState', {
            width: bounds.width,
            height: bounds.height,
            x: bounds.x,
            y: bounds.y,
            maximized: mainWindow.isMaximized()
        });
    });

    // 真正关闭时的清理
    mainWindow.on('closed', () => {
        mainWindow = null;
    });
}

// 创建系统托盘图标
function createTray() {
    // 不同平台图标格式不一样，Windows 用 ico，macOS 用 png/template
    const iconPath = process.platform === 'win32' ? path.join(__dirname, 'assets', 'tray.ico') : path.join(__dirname, 'assets', 'trayTemplate.png');
    
    tray = new Tray(iconPath);
    const contextMenu = Menu.buildFromTemplate([
        { label: '显示应用', click: () => { if (mainWindow) { mainWindow.show(); mainWindow.focus(); } } },
        { label: '退出', click: () => { app.isQuiting = true; app.quit(); } }
    ]);
    
    tray.setToolTip('我的 Electron 应用');
    tray.setContextMenu(contextMenu);

    // 点击托盘图标显示/隐藏窗口
    tray.on('click', () => {
        if (mainWindow) {
            if (mainWindow.isVisible()) {
                mainWindow.hide();
            } else {
                mainWindow.show();
                mainWindow.focus();
            }
        }
    });
}

// 应用初始化
app.whenReady().then(() => {
    createWindow();
    createTray();
    // macOS 上点击 dock 图标重新创建窗口
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

// 所有窗口关闭时退出（Windows/Linux）
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

// 处理打开文件的对话框，比直接写路径安全多了
ipcMain.handle('show-open-dialog', async () => {
    const result = await dialog.showOpenDialog(mainWindow, {
        properties: ['openFile'],
        filters: [
            { name: '文本文件', extensions: ['txt', 'md'] },
            { name: '所有文件', extensions: ['*'] }
        ]
    });
    if (!result.canceled && result.filePaths.length > 0) {
        try {
            const content = await fs.promises.readFile(result.filePaths[0], 'utf-8');
            return { success: true, content, path: result.filePaths[0] };
        } catch (error) {
            return { success: false, error: error.message };
        }
    }
    return { canceled: true };
});

// 处理保存对话框
ipcMain.handle('show-save-dialog', async (event, content, defaultPath) => {
    const result = await dialog.showSaveDialog(mainWindow, {
        defaultPath: defaultPath || 'untitled.txt',
        filters: [
            { name: '文本文件', extensions: ['txt'] },
            { name: 'Markdown', extensions: ['md'] }
        ]
    });
    if (!result.canceled) {
        try {
            await fs.promises.writeFile(result.filePath, content, 'utf-8');
            return { success: true, path: result.filePath };
        } catch (error) {
            return { success: false, error: error.message };
        }
    }
    return { canceled: true };
});

// 一个更完善的 preload.js 示例
const { contextBridge, ipcRenderer, shell } = require('electron');

// 白名单机制，只允许访问特定的文件路径
const ALLOWED_PATHS = [
    app.getPath('userData'), // 应用数据目录
    app.getPath('documents'), // 用户文档目录
    // 其他允许的路径...
];

function isPathAllowed(filePath) {
    // 简单的路径校验，防止目录遍历攻击
    const normalizedPath = path.normalize(filePath);
    return ALLOWED_PATHS.some(allowedPath => normalizedPath.startsWith(allowedPath));
}

contextBridge.exposeInMainWorld('electronAPI', {
    // 文件操作，带路径白名单校验
    file: {
        read: async (filePath) => {
            if (!isPathAllowed(filePath)) {
                throw new Error('Access denied: Path not allowed');
            }
            return ipcRenderer.invoke('read-file', filePath);
        },
        write: async (filePath, content) => {
            if (!isPathAllowed(filePath)) {
                throw new Error('Access denied: Path not allowed');
            }
            // 内容大小校验，别让用户写个几个 G 的文件把硬盘撑爆
            if (Buffer.byteLength(content, 'utf-8') > 10 * 1024 * 1024) {
                throw new Error('File too large (max 10MB)');
            }
            return ipcRenderer.invoke('write-file', filePath, content);
        },
        // 打开文件对话框，安全的方式让用户选文件
        openDialog: () => ipcRenderer.invoke('show-open-dialog'),
        saveDialog: (content, defaultPath) => ipcRenderer.invoke('show-save-dialog', content, defaultPath)
    },
    // 系统信息
    system: {
        platform: process.platform,
        versions: process.versions,
        // 获取特殊目录路径，比如下载文件夹、桌面路径
        getPath: (name) => ipcRenderer.invoke('get-path', name)
    },
    // 窗口控制
    window: {
        minimize: () => ipcRenderer.send('window-minimize'),
        maximize: () => ipcRenderer.send('window-maximize'),
        close: () => ipcRenderer.send('window-close'),
        // 设置是否最小化到托盘
        setMinimizeToTray: (value) => {
            ipcRenderer.send('set-minimize-to-tray', value);
        }
    },
    // 用系统默认浏览器打开外链，别在应用里直接跳，不安全
    openExternal: (url) => {
        // 简单的 URL 校验，只允许 http/https
        if (!/^https?:\/\//.test(url)) {
            console.error('Invalid URL protocol');
            return;
        }
        shell.openExternal(url);
    },
    // 监听主进程发来的事件，比如自动更新通知
    onUpdateAvailable: (callback) => {
        ipcRenderer.on('update-available', callback);
    },
    // 移除监听器，防止内存泄漏
    removeAllListeners: (channel) => {
        ipcRenderer.removeAllListeners(channel);
    }
});

// forge.config.js 示例，控制打包内容
module.exports = {
    packagerConfig: {
        // 忽略这些文件和目录，减小体积
        ignore: [
            /^\/src\/assets\/raw\//, // 原始资源文件
            /^\/tests?\//, // 测试文件
            /^\/\.git\//, // git 历史
            /^\/\.vscode\//, // 编辑器配置
            /README\.md/, // 文档
            /\.map$/ // source map 文件
        ],
        // 压缩级别，9 是最高压缩，但打包时间会长
        compression: 'maximum',
        // 去掉调试符号，减小体积
        prune: true
    },
    makers: [
        {
            name: '@electron-forge/maker-squirrel',
            config: {
                // Windows 安装包配置
                name: 'my_electron_app',
                // 图标路径
                setupIcon: 'assets/icon.ico',
                // 跳过创建 Delta 包，如果你不需要增量更新的话
                skipUpdateIcon: true
            }
        },
        {
            name: '@electron-forge/maker-dmg',
            config: {
                // macOS DMG 配置
                icon: 'assets/icon.icns',
                // 背景图，显得专业
                background: 'assets/dmg-background.png',
                // 窗口大小和图标位置，自己调调看
                windowSize: {
                    width: 600,
                    height: 400
                }
            }
        }
    ]
};

// 在 main.js 里定期打印内存使用情况，调试用
setInterval(() => {
    const usage = process.memoryUsage();
    console.log('主进程内存使用：', {
        rss: `${(usage.rss / 1024 / 1024).toFixed(2)} MB`, // 常驻内存
        heapTotal: `${(usage.heapTotal / 1024 / 1024).toFixed(2)} MB`, // V8 总堆内存
        heapUsed: `${(usage.heapUsed / 1024 / 1024).toFixed(2)} MB`, // V8 已用堆内存
        external: `${(usage.external / 1024 / 1024).toFixed(2)} MB` // C++ 对象内存
    });
}, 30000); // 每 30 秒打印一次

// 渲染进程里也可以用，但要在 preload 里暴露 process 对象
// 或者在控制台直接输入
setInterval(() => {
    const usage = performance.memory;
    console.log('渲染进程内存：', {
        usedJSHeapSize: `${(usage.usedJSHeapSize / 1024 / 1024).toFixed(2)} MB`,
        totalJSHeapSize: `${(usage.totalJSHeapSize / 1024 / 1024).toFixed(2)} MB`,
        jsHeapSizeLimit: `${(usage.jsHeapSizeLimit / 1024 / 1024).toFixed(2)} MB`
    });
}, 30000);

// main.js 里集成自动更新
const { autoUpdater } = require('electron-updater');
const log = require('electron-log');

// 配置日志
autoUpdater.logger = log;
autoUpdater.logger.transports.file.level = 'info';

// 检查更新
function checkForUpdates() {
    // 开发环境不检查更新，不然调试的时候烦死
    if (process.env.NODE_ENV === 'development') {
        return;
    }
    autoUpdater.checkForUpdatesAndNotify();
}

// 各种更新事件处理
autoUpdater.on('checking-for-update', () => {
    console.log('正在检查更新...');
});
autoUpdater.on('update-available', (info) => {
    console.log('发现新版本:', info.version);
    // 可以在这里给渲染进程发消息，显示更新提示
    if (mainWindow) {
        mainWindow.webContents.send('update-available', info);
    }
});
autoUpdater.on('update-not-available', () => {
    console.log('当前已是最新版本');
});
autoUpdater.on('error', (err) => {
    console.error('更新出错:', err);
});
autoUpdater.on('download-progress', (progressObj) => {
    let logMessage = `下载速度：${progressObj.bytesPerSecond}`;
    logMessage += ` - 已下载 ${progressObj.percent}%`;
    logMessage += ` (${progressObj.transferred}/${progressObj.total})`;
    console.log(logMessage);
});
autoUpdater.on('update-downloaded', (info) => {
    console.log('更新下载完成');
    // 可以提示用户重启应用，或者静默安装
    // autoUpdater.quitAndInstall(); // 强制重启安装
});

// 应用启动后检查更新
app.whenReady().then(() => {
    createWindow();
    // 延迟 5 秒检查更新，避免启动时卡死
    setTimeout(checkForUpdates, 5000);
});

<!-- 在 index.html 的 head 里加 CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.example.com;">

<!-- src/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSP 安全头 -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com; font-src 'self' https://fonts.gstatic.com;">
    <title>摸鱼记事本</title>
    <!-- 用 Tailwind CDN 快速开发，生产环境建议换成构建后的 CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 自定义滚动条，显得精致一点 */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        /* 文本域聚焦时去掉蓝色边框，用灰色更低调 */
        textarea:focus { outline: none; }
        /* 拖拽区域样式，用于拖拽打开文件 */
        .drag-over { background-color: #f0f9ff !important; border: 2px dashed #3b82f6 !important; }
    </style>
</head>
<body class="bg-gray-50 h-screen flex flex-col overflow-hidden">
    <!-- 标题栏区域，macOS 上隐藏原生标题栏后自己画一个 -->
    <div class="h-10 bg-white border-b border-gray-200 flex items-center px-4 select-none drag-region">
        <div class="flex items-center space-x-2">
            <div class="w-3 h-3 rounded-full bg-red-400"></div>
            <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
            <div class="w-3 h-3 rounded-full bg-green-400"></div>
        </div>
        <div class="flex-1 text-center text-sm text-gray-600 font-medium" id="title"> 摸鱼记事本 - 未命名 </div>
        <div class="text-xs text-gray-400" id="save-status"> 已就绪 </div>
    </div>
    <!-- 工具栏 -->
    <div class="bg-white border-b border-gray-200 px-4 py-2 flex items-center space-x-2">
        <button onclick="newFile()" class="px-3 py-1.5 text-sm bg-gray-100 hover:bg-gray-200 rounded-md transition-colors flex items-center space-x-1">
            <span>📝</span><span>新建</span>
        </button>
        <button onclick="openFile()" class="px-3 py-1.5 text-sm bg-gray-100 hover:bg-gray-200 rounded-md transition-colors flex items-center space-x-1">
            <span>📂</span><span>打开</span>
        </button>
        <button onclick="saveFile()" class="px-3 py-1.5 text-sm bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors flex items-center space-x-1">
            <span>💾</span><span>保存</span>
        </button>
        <div class="flex-1"></div>
        <span class="text-xs text-gray-400" id="word-count">0 字</span>
    </div>
    <!-- 编辑器区域，支持拖拽打开文件 -->
    <div class="flex-1 relative" id="drop-zone">
        <textarea id="editor" class="w-full h-full p-6 resize-none bg-white text-gray-800 leading-relaxed text-base" placeholder="在这里开始你的摸鱼大业...&#10;&#10;快捷键：&#10;Ctrl/Cmd + N 新建&#10;Ctrl/Cmd + O 打开&#10;Ctrl/Cmd + S 保存&#10;Ctrl/Cmd + H 老板键（隐藏窗口）"></textarea>
        <!-- 拖拽提示遮罩 -->
        <div id="drag-overlay" class="absolute inset-0 bg-blue-50 bg-opacity-90 border-4 border-blue-400 border-dashed hidden flex items-center justify-center">
            <div class="text-center">
                <div class="text-4xl mb-2">📄</div>
                <div class="text-lg text-blue-600 font-medium">松开以打开文件</div>
            </div>
        </div>
    </div>
    <!-- 底部状态栏 -->
    <div class="bg-gray-100 border-t border-gray-200 px-4 py-1.5 flex items-center justify-between text-xs text-gray-500">
        <div class="flex items-center space-x-4">
            <span id="file-path">未选择文件</span>
            <span id="encoding">UTF-8</span>
        </div>
        <div class="flex items-center space-x-4">
            <span id="cursor-pos">行 1, 列 1</span>
            <span>Electron + ❤️</span>
        </div>
    </div>
    <script>
        const editor = document.getElementById('editor');
        const title = document.getElementById('title');
        const saveStatus = document.getElementById('save-status');
        const wordCount = document.getElementById('word-count');
        const filePathDisplay = document.getElementById('file-path');
        const cursorPos = document.getElementById('cursor-pos');
        const dropZone = document.getElementById('drop-zone');
        const dragOverlay = document.getElementById('drag-overlay');
        let currentFilePath = null;
        let isModified = false;
        let saveTimeout = null;

        // 初始化：加载上次打开的文件（如果有的时候）
        window.addEventListener('DOMContentLoaded', async () => {
            const lastFile = localStorage.getItem('lastOpenedFile');
            if (lastFile) {
                // 这里简化处理，实际应该用 IPC 询问主进程文件是否还存在
                .(, lastFile);
            }
        });

        
        editor.(,  {
            ();
            ();
            
             (currentFilePath && saveTimeout) {
                (saveTimeout);
                saveTimeout = ( {
                    ();
                }, ); 
            }
        });

        
        editor.(, updateCursorPos);
        editor.(, updateCursorPos);

         () {
             text = editor.;
            
             cnCount = (text.() || []).;
             enCount = (text.() || []).;
             total = cnCount + enCount + (text. - cnCount - (text.() || []).);
            wordCount. = ;
        }

         () {
             pos = editor.;
             textUpToCursor = editor..(, pos);
             lines = textUpToCursor.();
             currentLine = lines.;
             currentCol = lines[lines. - ]. + ;
            cursorPos. = ;
        }

         () {
             (!isModified) {
                isModified = ;
                ();
                saveStatus. = ;
                saveStatus. = ;
            }
        }

         () {
             fileName = currentFilePath ? currentFilePath.().() : ;
            title. = ;
        }

        
         () {
             (isModified) {
                
                 (!()) {
                    ;
                }
            }
            editor. = ;
            currentFilePath = ;
            isModified = ;
            ();
            ();
            filePathDisplay. = ;
            saveStatus. = ;
            saveStatus. = ;
            .();
        }

        
          () {
             {
                 result =  ...();
                 (result.) ;
                 (result.) {
                    editor. = result.;
                    currentFilePath = result.;
                    isModified = ;
                    ();
                    ();
                    filePathDisplay. = currentFilePath;
                    saveStatus. = ;
                    saveStatus. = ;
                    .(, currentFilePath);
                }  {
                    ( + result.);
                }
            }  (error) {
                .(, error);
                ();
            }
        }

        
          () {
             {
                 content = editor.;
                 result =  ...(content, currentFilePath);
                 (result.) ;
                 (result.) {
                    currentFilePath = result.;
                    isModified = ;
                    ();
                    filePathDisplay. = currentFilePath;
                    saveStatus. = ;
                    saveStatus. = ;
                    .(, currentFilePath);
                    
                     originalText = saveStatus.;
                    saveStatus. = ;
                    ( {
                        saveStatus. = originalText;
                    }, );
                }  {
                    ( + result.);
                }
            }  (error) {
                .(, error);
                ();
            }
        }

        
          () {
             (!currentFilePath || !isModified) ;
             {
                
                
                 result =  ...(editor., currentFilePath);
                 (result.) {
                    isModified = ;
                    ();
                    saveStatus. =  +  ().();
                    saveStatus. = ;
                }
            }  (error) {
                .(, error);
            }
        }

        
        .(,  {
             isMac = navigator..().() >= ;
             ctrlKey = isMac ? e. : e.;
             (ctrlKey) {
                 (e..()) {
                     : e.(); (); ;
                     : e.(); (); ;
                     : e.(); (); ;
                     : e.(); 
                        ...();
                        ;
                }
            }
        });

        
        dropZone.(,  {
            e.();
            dropZone..();
            dragOverlay..();
        });
        dropZone.(,  {
            e.();
            dropZone..();
            dragOverlay..();
        });
        dropZone.(,  (e) => {
            e.();
            dropZone..();
            dragOverlay..();
             files = e..;
             (files. > ) {
                 file = files[];
                
                 (!file..() && !file..()) {
                    ();
                    ;
                }
                
                 reader =  ();
                reader. =  {
                    editor. = event..;
                    currentFilePath = file.; 
                    isModified = ;
                    ();
                    ();
                    filePathDisplay. = currentFilePath;
                };
                reader.(file);
            }
        });

        
        ..?.( {
             (command) {
                 : (); ;
                 : (); ;
                 : (); ;
                 : 
                     (isModified && currentFilePath) {
                        ();
                    }
                    ;
            }
        });
    </script>
</body>
</html>

// 更新后的 main.js，加上全局快捷键支持
const { app, BrowserWindow, globalShortcut, ipcMain } = require('electron');

// ... 其他引入和之前的代码类似

function createWindow() {
    // ... 窗口创建代码
    // 注册全局快捷键（老板键）
    const registerShortcuts = () => {
        // Ctrl/Cmd + Shift + H 全局隐藏/显示
        globalShortcut.register('CommandOrControl+Shift+H', () => {
            if (mainWindow.isVisible()) {
                mainWindow.hide(); // 通知渲染进程做保存等清理工作
                mainWindow.webContents.send('command', 'hide-window');
            } else {
                mainWindow.show();
                mainWindow.focus();
            }
        });
        // 还可以加其他全局快捷键，比如快速新建
        globalShortcut.register('CommandOrControl+Shift+N', () => {
            mainWindow.webContents.send('command', 'new-file');
        });
    };

    // 窗口准备好后注册快捷键
    mainWindow.once('ready-to-show', () => {
        mainWindow.show();
        registerShortcuts();
    });

    // ... 其他事件监听
}

// 应用退出前注销所有全局快捷键
app.on('will-quit', () => {
    globalShortcut.unregisterAll();
});

// 处理渲染进程发来的隐藏窗口请求
ipcMain.on('hide-window', () => {
    if (mainWindow) {
        mainWindow.hide();
    }
});

// 在 main.js 最前面就引入日志
const log = require('electron-log');

// 配置日志路径，存在用户数据目录里
log.transports.file.resolvePath = () => {
    return path.join(app.getPath('userData'), 'logs/main.log');
};

// 把 console 也重定向到日志文件，这样 console.log 也能被记录
Object.assign(console, log.functions);

// 捕获未处理的异常
process.on('uncaughtException', (error) => {
    log.error('未捕获的异常:', error);
    // 可以在这里弹个错误对话框，或者上报到服务器
    dialog.showErrorBox('应用出错', error.message);
});

// 捕获 Promise 未处理的 rejection
process.on('unhandledRejection', (reason, promise) => {
    log.error('未处理的 Promise rejection:', reason);
});

mainWindow.webContents.on('render-process-gone', (event, details) => {
    console.error('渲染进程崩溃:', details.reason);
    log.error('渲染进程崩溃:', details);
    // 可以在这里尝试重新加载，或者提示用户重启
    dialog.showErrorBox('页面崩溃', '应用页面发生错误，即将重启');
    app.relaunch();
    app.quit();
});

// 主进程里打开渲染进程的开发者工具
mainWindow.webContents.openDevTools();
// 或者只打开特定的面板，比如 Memory
mainWindow.webContents.openDevTools({ mode: 'detach' });
mainWindow.webContents.devToolsWebContents?.executeJavaScript(` UI.inspectorView.showPanel('heap_profiler'); `);

# 安装 electron-rebuild
npm install --save-dev electron-rebuild
# 重新编译所有原生模块
npx electron-rebuild
# 或者指定 Electron 版本
npx electron-rebuild -v 28.0.0

// 主进程里处理耗时任务，通过 IPC 返回结果
const { Worker } = require('worker_threads');

ipcMain.handle('heavy-task', async (event, data) => {
    return new Promise((resolve, reject) => {
        const worker = new Worker('./src/worker.js');
        worker.postMessage(data);
        worker.on('message', (result) => {
            resolve(result);
            worker.terminate();
        });
        worker.on('error', reject);
    });
});

// window-manager.js
class WindowManager {
    constructor() {
        this.windows = new Map();
    }

    create(name, options) {
        if (this.windows.has(name)) {
            const win = this.windows.get(name);
            win.focus();
            return win;
        }
        const win = new BrowserWindow(options);
        this.windows.set(name, win);
        win.on('closed', () => {
            this.windows.delete(name);
        });
        return win;
    }

    get(name) {
        return this.windows.get(name);
    }

    broadcast(channel, ...args) {
        this.windows.forEach(win => {
            if (!win.isDestroyed()) {
                win.webContents.send(channel, ...args);
            }
        });
    }
}

module.exports = new WindowManager();

// forge.config.js 里配置 asar
packagerConfig: {
    asar: true, // 排除某些大文件不打包进 asar，按需加载
    asarUnpack: ['node_modules/sharp/**', 'assets/large-files/**']
}

Electron 桌面应用开发指南：7 天入门实战

Electron 桌面应用开发指南：7 天入门实战

引言

为什么你的简历还缺个'桌面端'项目

Electron 架构解析

核心架构：Chromium 与 Node.js

更多推荐文章

相关免费在线工具

更多推荐文章

相关免费在线工具

替代方案对比

为什么大厂都爱用 Electron？

项目搭建与配置

脚手架一把梭，别傻傻敲命令

主进程管理

预加载脚本与安全

常见陷阱与优化

打包体积：塞了整个 Chrome 进去？

内存占用：低配电脑杀手

自动更新：配置起来想砸键盘

安全性：别让应用变成筛子

实战案例：本地记事本

调试与排查技巧

主进程挂了怎么查？

渲染进程白屏了？

内存泄漏排查

版本对齐很重要

进阶最佳实践

别把逻辑都堆在渲染进程

上下文隔离一定要开

多窗口架构

静态资源压缩

总结

Electron 桌面应用开发指南：7 天入门实战

Electron 桌面应用开发指南：7 天入门实战

引言

为什么你的简历还缺个'桌面端'项目

Electron 架构解析

核心架构：Chromium 与 Node.js

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

替代方案对比

为什么大厂都爱用 Electron？

项目搭建与配置

脚手架一把梭，别傻傻敲命令

主进程管理

预加载脚本与安全

常见陷阱与优化

打包体积：塞了整个 Chrome 进去？

内存占用：低配电脑杀手

自动更新：配置起来想砸键盘

安全性：别让应用变成筛子

实战案例：本地记事本

调试与排查技巧

主进程挂了怎么查？

渲染进程白屏了？

内存泄漏排查

版本对齐很重要

进阶最佳实践

别把逻辑都堆在渲染进程

上下文隔离一定要开

多窗口架构

静态资源压缩

总结