4、第一个Electron应用：项目初始化、创建主窗口、加载HTML页面、运行与调试

好，咱们现在开始动手。前面铺垫了那么多理论，说实话我自己都等不及了。这一章我们直接创建一个能跑起来的Electron应用，虽然它现在只是个空壳子，但你会看到整个流程是怎么串起来的。

4.1 项目初始化：从零开始

先找个干净的目录，我习惯在桌面上建一个 my-electron-app 文件夹。打开终端，cd进去，然后执行：

npm init -y

这个命令会生成一个 package.json 文件。嗯，这里要注意，-y 参数的意思是「全部默认」，省得你一路按回车。我个人习惯在项目初期先用默认配置，后面再慢慢改。

接下来安装Electron。我建议你使用本地安装，而不是全局安装。为什么呢？因为每个项目依赖的Electron版本可能不一样，本地安装可以避免版本冲突。我在项目中遇到过好几次因为全局版本不一致导致的诡异问题，从那以后我就老老实实本地安装了。

npm install electron --save-dev

这里用 --save-dev 是因为Electron是开发依赖，打包后用户不需要再装它。安装过程可能会有点慢，毕竟要下载一个几十MB的二进制文件。你可以趁这个时间去泡杯茶。

4.2 创建主窗口：main.js 是灵魂

安装完成后，在项目根目录新建一个 main.js 文件。这个文件就是Electron应用的入口，说白了，它负责管理应用的生命周期和创建窗口。

先写一个最简版本：

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

这段代码做了三件事：

• 从Electron模块中引入 app 和 BrowserWindow
• 定义 createWindow 函数，创建一个宽800、高600的窗口
• 等应用准备好后，调用 createWindow

你可能会问，为什么不用 app.on('ready', createWindow)？其实两种写法都可以。我个人更喜欢 app.whenReady() 这种Promise写法，因为它更现代，而且可以配合 async/await 使用。不过这只是个人偏好，你用哪种都行。

4.3 加载HTML页面：让窗口有内容

现在窗口有了，但里面是空的。我们需要一个HTML文件来填充内容。在项目根目录新建 index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的第一个Electron应用</title>
</head>
<body>
  <h1>Hello, Electron!</h1>
  <p>如果你看到这行字，说明应用跑起来了。</p>
</body>
</html>

这个页面很简单，就一个标题和一段文字。但你别小看它，它证明了你的Electron应用可以正常加载和渲染HTML。我曾经见过有人卡在这一步，原因是HTML文件路径写错了。记住，loadFile 里的路径是相对于 main.js 的。

4.4 运行与调试：看到成果

最后一步，修改 package.json 中的 scripts 字段：

"scripts": {
  "start": "electron ."
}

然后在终端运行：

npm start

如果一切顺利，你会看到一个窗口弹出来，上面显示着「Hello, Electron!」。嗯，这一刻是不是有点小激动？

但开发过程中难免会遇到问题。我常用的调试手段有两个：

• 打开开发者工具： 在 createWindow 函数里加上 win.webContents.openDevTools()，这样窗口启动时会自动打开Chrome DevTools。你可以像调试网页一样调试你的Electron应用。
• 使用控制台输出： 在 main.js 里加 console.log，然后在终端看输出。不过要注意，主进程的日志会打印在终端，渲染进程的日志会打印在DevTools的控制台里。

说实话，第一次看到自己的Electron应用跑起来，那种成就感是难以言喻的。虽然它现在只是个空壳子，但你已经掌握了最核心的流程。接下来的章节，我们会往这个壳子里填充各种功能，让它变成一个真正的桌面应用。

如果你在运行过程中遇到任何问题，别急着放弃。先检查一下Node.js和npm的版本，再确认一下Electron是否安装成功。我曾经因为Node.js版本太低，折腾了半天才发现问题所在。嗯，这些坑踩过一遍，以后就记住了。