云信AI部署

深入浅出GitHub Top项目：Electron在Windows 10的运行与调试

云信安装大师
90
AI 质量分
10 5 月, 2025
5 分钟阅读
0 阅读

深入浅出GitHub Top项目：Electron在Windows 10的运行与调试

引言

Electron是GitHub上最受欢迎的开源项目之一，它让开发者能够使用JavaScript、HTML和CSS构建跨平台的桌面应用程序。本文将带你从零开始，在Windows 10系统上运行和调试一个Electron项目。

准备工作

在开始之前，请确保你的Windows 10系统已安装以下工具：

  1. Node.js (建议安装LTS版本)
  2. Git (用于克隆仓库)
  3. Visual Studio Code (推荐编辑器)

环境检查

打开命令提示符(CMD)或PowerShell，运行以下命令检查环境：

代码片段 
node -v
npm -v
git --version

如果这些命令都能正确显示版本号，说明环境已准备就绪。

第一步：获取Electron示例项目

我们将使用Electron官方的快速启动示例作为演示：

代码片段 
# 克隆仓库
git clone https://github.com/electron/electron-quick-start

# 进入项目目录
cd electron-quick-start

# 安装依赖
npm install

注意事项：
– 如果遇到网络问题，可以尝试使用淘宝镜像：

代码片段 
npm config set registry https://registry.npm.taobao.org/<br>

– npm install会自动下载所有依赖项，包括Electron本身

第二步：运行Electron应用

安装完成后，运行以下命令启动应用：

代码片段 
npm start

这个命令实际上执行了package.json中定义的脚本：

代码片段 
{
  "scripts": {
    "start": "electron ."
  }
}

工作原理：
1. electron .命令会查找当前目录下的main.js文件作为入口点
2. Electron会创建一个主进程和渲染进程
3. index.html被加载到浏览器窗口中

第三步：了解项目结构

让我们看看这个简单项目的关键文件：

代码片段 
electron-quick-start/
├── main.js      # Electron主进程代码
├── index.html   # 应用界面
├── renderer.js  # 页面脚本(可选)
├── package.json # 项目配置和依赖项
└── styles.css   # CSS样式(可选)

main.js解析

这是Electron应用的核心文件，控制着应用程序的生命周期：

代码片段 
const { app, BrowserWindow } = require('electron')

function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true // 允许在页面中使用Node.js API
    }
  })

  // 加载index.html文件
  win.loadFile('index.html')

  // (可选)打开开发者工具
  // win.webContents.openDevTools()
}

// Electron初始化完成后调用createWindow函数
app.whenReady().then(createWindow)

第四步：调试Electron应用

调试是开发过程中的重要环节。Electron支持两种主要的调试方式：

A. Chrome开发者工具

在主进程中添加以下代码打开开发者工具：

代码片段 
win.webContents.openDevTools()

或者在渲染进程(如renderer.js)中按F12键。

B. VS Code调试配置

  1. VS Code中点击左侧活动栏的”运行和调试”图标(Ctrl+Shift+D)
  2. 点击”创建launch.json文件”
  3. 选择”Node.js”环境

修改生成的launch.json文件如下：

代码片段 
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Main Process",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
            },
            "args" : ["."],
            "console": "integratedTerminal"
        }
    ]
}

现在你可以设置断点并按F5开始调试了。

第五步：修改并扩展示例

让我们为这个简单应用添加一些功能。修改index.html:

代码片段 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Electron!</title>
</head>
<body>
    <h1>欢迎使用Electron!</h1>
    <p>当前正在运行的Node.js版本: <span id="node-version"></span></p>
    <p>当前正在运行的Chrome版本: <span id="chrome-version"></span></p>
    <p>当前正在运行的Electron版本: <span id="electron-version"></span></p>

    <script src="./renderer.js"></script>
</body>
</html>

创建或修改renderer.js:

代码片段 
// DOM加载完成后执行
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
        const element = document.getElementById(selector)
        if (element) element.innerText = text
    }

    // process是Node.js的全局对象，versions包含各种版本信息
    for (const dependency of ['chrome', 'node', 'electron']) {
        replaceText(`${dependency}-version`, process.versions[dependency])
    }
})

代码解释：
1. DOMContentLoaded事件确保DOM完全加载后再执行脚本
2. process.versions包含了Node.js、Chromium和Electron的版本信息

Windows平台特有注意事项

  1. 路径问题：Windows使用反斜杠()作为路径分隔符，而Node.js通常处理正斜杠(/)。建议：

    代码片段 
    const path = require('path')
const filePath = path.join(__dirname, 'subfolder', 'file.txt')

  2. 杀毒软件干扰：某些杀毒软件可能会阻止Electron构建过程。如果遇到问题，尝试临时禁用杀毒软件。

  3. 32位/64位问题：确保你的Node.js架构与系统匹配。可以通过以下命令检查：

    代码片段 
    node -p process.arch

  4. 长路径问题：Windows默认限制260字符路径长度。解决方法：

    • 启用长路径支持
    • cmd
      reg add HKLM\SYSTEM\CurrentControlSet\Control\FileSystem /v LongPathsEnabled /t REG_DWORD /d 1 /f

Electron打包分发（进阶）

当你的应用开发完成后，可以使用以下工具打包为Windows可执行文件(.exe):

代码片段 
npm install electron-packager --save-dev 

npx electron-packager . my-app --platform=win32 --arch=x64 --out=dist --overwrite

参数说明：
– .:当前目录作为源目录
– my-app:输出应用的名称
– --platform=win32:指定为Windows平台
– --arch=x64:64位架构
– --out=dist:输出到dist目录

Electron开发最佳实践

  1. 主进程与渲染进程分离：保持主进程精简，将业务逻辑放在渲染进程中。

  2. 安全性考虑：

    代码片段 
    new BrowserWindow({
  webPreferences: {
    nodeIntegration: false, //推荐禁用Node集成以增强安全性 
    contextIsolation: true, //启用上下文隔离 
    enableRemoteModule: false //禁用remote模块 
  }
})

  3. 性能优化：对于计算密集型任务，考虑使用Web Workers或Native Node模块。

  4. 自动更新：考虑集成electron-updater实现自动更新功能。

Electron社区资源推荐

  1. 官方文档
  2. Awesome Electron – Electron资源集合
  3. electron-builder -强大的打包工具

Windows平台常见问题解决指南

Q1: npm install卡住或失败怎么办？

A:
1. cmd set ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"
2. npm config set electron_mirror https://cdn.npm.taobao.org/dist/electron/
3. npm install --verbose查看详细日志

Q2: Error: EBUSY错误怎么办？

A:
这通常是文件被锁定的错误。尝试:
1.关闭所有编辑器窗口和终端窗口后重试
2.Windows资源管理器结束所有node.exe进程

Q3: Error: Cannot find module怎么办？

A:
1.Run npm install
2.Check if the module is in your package.json dependencies

Windows性能优化技巧

1.禁用GPU加速(适用于老旧显卡):
在main.js中添加:
javascript app.disableHardwareAcceleration()

2.减少内存占用:
定期清理未使用的窗口:
javascript win.on('closed', () => { win = null })

3.使用原生模块:
对于CPU密集型任务,考虑编写C++原生模块

4.启用生产模式:
打包时设置NODE_ENV为production

Windows特有的API集成

A.Notifications通知API

main.js中添加:
“`javascript const { Notification } = require(‘electron’)

function showNotification() {
new Notification({
title:’来自Electron的通知’,
body:’这是一个Windows原生通知’
}).show()
}

//在适当的时候调用showNotification()

代码片段 

### B.Windows任务栏集成  

main.js中添加:
```javascript const { app } = require('electron')

//设置任务栏进度条(0到100之间)
win.setProgressBar(50)

//设置任务栏图标闪烁提醒用户注意  
win.flashFrame(true)

C.Windows系统托盘图标

main.js中添加:
“`javascript const { Tray } = require(‘electron’)
const path = require(‘path’)

let tray = null

app.whenReady().then(() => {
tray = new Tray(path.join(__dirname,’icon.png’))
tray.setToolTip(‘我的Electron应用’)
})

代码片段 

## Windows注册表操作  

如果需要访问Windows注册表,可以使用[winreg](https://www.npmjs.com/package/winreg):

安装:
```bash npm install winreg

示例代码:
“`javascript const Registry = require(‘winreg’)

let regKey = new Registry({
hive: Registry.HKCU,
key:’\Software\Microsoft\Windows\CurrentVersion\Run’
})

regKey.values((err, items) => {
if(!err) console.log(items)
})

代码片段 

注意操作注册表需要管理员权限!

## Windows服务集成  

如果需要将Electron应用作为Windows服务运行,可以使用[node-windows](https://www.npmjs.com/package/node-windows):

安装:
```bash npm install node-windows

示例代码:
“`javascript const Service = require(‘node-windows’).Service;

const svc = new Service({
name:’My Electron App’,
description:’我的Electron应用程序服务’,
script:’C:\path\to\your\app\main.js’
});

svc.on(‘install’,function(){
svc.start();
});

svc.on(‘alreadyinstalled’,function(){
console.log(‘服务已经安装’);
});

svc.on(‘invalidinstallation’,function(){
console.log(‘无效的安装’);
});

svc.on(‘uninstall’,function(){
console.log(‘卸载完成’);
});

svc.on(‘error’,function(err){
console.log(err);
});

// svc.uninstall(); //卸载服务
svc.runAsService(); //以服务方式运行

代码片段 

注意服务模式下无法显示GUI界面!

## Windows多显示器支持  

处理多显示器环境的代码示例:

main.js中添加:
```javascript const { screen } = require('electron')

function getAllDisplays() {
 return screen.getAllDisplays()
}

function createWindowOnDisplay(displayIndex) {
 let displays = screen.getAllDisplays()
 if(displayIndex >= displays.length) return

 let display = displays[displayIndex]
 let win = new BrowserWindow({
 x: display.bounds.x +50,
 y: display.bounds.y +50,
 width:800,
 height:600,
 })
 win.loadFile('index.html')
}

获取显示器DPI缩放比例:
javascript let scaleFactor = screen.getPrimaryDisplay().scaleFactor
根据DPI调整窗口大小可以提高显示效果!

Windows高DPI支持

确保你的应用在高DPI显示器上显示正常:

package.json中添加:

代码片段 
{
"build":{
"win":{
"dpiAwareness":"permonitorv2"
}
}
}

或者在代码中设置高DPI模式:

main.js中添加:
“`javascript app.commandLine.appendSwitch(“high-dpi-support”,true)
app.commandLine.appendSwitch(“force-device-scale-factor”,1)

代码片段 

这样可以确保UI元素在不同DPI屏幕上正确缩放!

## Windows触摸屏支持  

如果你的设备支持触摸屏,可以添加触摸事件处理:

renderer.js中添加:
```javascript document.addEventListener("touchstart", handleTouchStart, false);
document.addEventListener("touchmove", handleTouchMove, false);
document.addEventListener("touchend", handleTouchEnd, false);

let xDown,yDown;

function handleTouchStart(e){
xDown=e.touches[0].clientX;
yDown=e.touches[0].clientY;
}

function handleTouchMove(e){
if(!xDown||!yDown){return;}

let xUp=e.touches[0].clientX;
let yUp=e.touches[0].clientY;

let xDiff=xDown-xUp;
let yDiff=yDown-yUp;

if(Math.abs(xDiff)>Math.abs(yDiff)){
if(xDiff>0){/*向左滑动*/}
else{/*向右滑动*/}
}else{
if(yDiff>0){/*向上滑动*/}
else{/*向下滑动*/}
}

xDown=null;
yDown=null;
}

这实现了基本的触摸手势识别功能!

Windows系统主题适配

检测并适配Windows深色模式:

renderer.js中添加:
“`javascript function checkDarkMode(){
return window.matchMedia && window.matchMedia(“(prefers-color-scheme: dark)”).matches;
}

if(checkDarkMode()){
document.body.classList.add(“dark-theme”);
}

window.matchMedia(“(prefers-color-scheme: dark)”)
.addListener((e)=>e.matches&&document.body.classList.add(“dark-theme”));

代码片段 
然后在CSS文件中定义.dark-theme样式即可!

也可以从主进程检测深色模式:

main.js中添加:
````javascript const { nativeTheme }=require("electron")

console.log(nativeTheme.shouldUseDarkColors?"深色模式":"浅色模式")
原创 高质量