共计 1372 个字符，预计需要花费 4 分钟才能阅读完成。

Electron 开发环境快速部署指南

一、技术选型解析

桌面应用开发 领域长期由 C ++ 主导，但其开发成本较高。相较而言，Node.js+Electron方案具备显著优势：
– 支持 HTML/CSS/JS 技术栈
– 完整的跨平台能力
– 丰富的桌面 API 集成
– 成熟的开发社区支持

二、核心概念解析

主进程体系

– 通过 package.json 的 main 字段定义
– 单实例运行特性
– 负责窗口管理与系统级操作

渲染进程机制

– 基于 Chromium 多进程架构
– 每个 BrowserWindow 对应独立进程
– 窗口销毁时自动回收资源

三、环境搭建实战

Node.js 环境配置

// 设置全局模块路径
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

// 配置国内镜像源
npm install -g cnpm --registry=https://registry.npmmirror.com

Electron 安装验证

cnpm install -g electron
npx electron -v
npx electron

四、项目初始化实战

{
  "name": "electron-demo",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {"start": "electron ."},
  "devDependencies": {"electron": "^29.1.6"}
}

五、进程通信实现

预加载脚本配置

// main.js
webPreferences: {preload: path.join(__dirname, 'preload.js'),
  nodeIntegration: true
}

跨进程通信示例

// preload.js
const {ipcRenderer} = require('electron')
window.sendMsg = (message) => ipcRenderer.send('message', message);

// 渲染进程调用
document.getElementById('send-btn').addEventListener('click', () => {window.sendMsg("Hello Main Process");
});

六、系统级功能集成

文件对话框实现

ipcMain.on('open-file', () => {
  dialog.showOpenDialog({properties: ['openFile']
  }).then(result => {console.log('Selected:', result.filePaths);
  });
});

多窗口管理

ipcMain.on('new-window', (event, page) => {const win = new BrowserWindow({width: 800, height: 600});
  win.loadFile(page);
});

七、技术方案评估

优势分析：
– 开发效率显著提升
– 前端生态无缝衔接
– 跨平台部署能力

注意事项：
– 安装包体积优化方案
– 原生模块兼容处理
– 进程间通信规范设计

八、开发环境问题排查

// 解决 PowerShell 执行策略限制
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser