20分钟上手Electron：用Web技术开发跨平台桌面应用的超简单教程-优快云博客

20分钟上手Electron：用Web技术开发跨平台桌面应用的超简单教程

【免费下载链接】electron 使用Electron构建跨平台桌面应用程序，支持JavaScript、HTML和CSS 项目地址: https://gitcode.com/GitHub_Trending/el/electron

你还在为开发跨平台桌面应用烦恼吗？既要懂Windows的C#，又要学macOS的Swift，还要了解Linux的GTK？现在，只需20分钟，这篇教程将带你用熟悉的JavaScript、HTML和CSS技术栈，快速打造一个能在Windows、macOS和Linux上运行的桌面应用。读完本文，你将掌握Electron的核心概念、项目搭建流程、窗口管理技巧，并能独立运行第一个Electron应用。

什么是Electron？

Electron是一个使用JavaScript、HTML和CSS构建桌面应用程序的框架。它通过将Chromium（Google Chrome的开源内核）和Node.js嵌入到二进制文件中，让你只需维护一套JavaScript代码库，就能创建跨平台应用，无需原生开发经验。

许多知名应用如Visual Studio Code、Slack、Discord等都是基于Electron开发的。官方文档详细介绍了Electron的核心概念和使用方法，你可以通过docs/tutorial/introduction.md深入了解。

快速开始：搭建你的第一个Electron应用

环境准备

在开始之前，请确保你的电脑上已经安装了Node.js（建议v14.0.0或更高版本）和npm。你可以通过以下命令检查安装情况：

node -v
npm -v

如果你还没有安装Node.js，可以从Node.js官网下载并安装。

初始化项目

首先，创建一个新的项目文件夹并初始化npm项目：

mkdir my-electron-app && cd my-electron-app
npm init

在初始化过程中，npm会提示你填写一些项目信息。对于本教程，建议将入口点（entry point）设置为main.js，其他信息可以根据你的需要填写。

安装Electron

接下来，将Electron安装到项目的开发依赖中：

npm install electron --save-dev

为什么Electron是开发依赖而不是生产依赖？因为打包后的Electron应用会包含Electron二进制文件，不需要在生产环境中再次安装Electron。详细解释可以参考docs/tutorial/tutorial-2-first-app.md。

创建应用文件

现在，我们需要创建三个关键文件：主进程文件main.js、渲染进程文件index.html和应用配置文件package.json。

package.json配置

打开package.json文件，添加或修改以下内容：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "我的第一个Electron应用",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^28.0.0"
  }
}

主进程文件：main.js

创建main.js文件，这是Electron应用的入口点，负责控制应用的生命周期和管理窗口：

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

// 创建窗口函数
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    title: "我的Electron应用"
  })

  // 加载本地HTML文件
  win.loadFile('index.html')
  
  // 打开开发者工具（可选）
  win.webContents.openDevTools()
}

// 当应用准备就绪时创建窗口
app.whenReady().then(() => {
  createWindow()

  // 在macOS上，当点击dock图标且没有打开窗口时，创建新窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

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

这段代码中，我们使用了Electron的两个核心模块：app（控制应用生命周期）和BrowserWindow（创建和管理窗口）。更多关于Electron进程模型的信息，可以参考docs/tutorial/process-model.md。

渲染进程文件：index.html

创建index.html文件，这是应用的界面，使用HTML、CSS和JavaScript构建：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello Electron!</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      .container {
        text-align: center;
      }
      button {
        padding: 10px 20px;
        font-size: 16px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }
      button:hover {
        background-color: #45a049;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Hello Electron!</h1>
      <p>这是我的第一个Electron应用</p>
      <button onclick="alert('Hello from Electron!')">点击我</button>
    </div>
  </body>
</html>

运行应用

一切准备就绪，现在可以运行你的第一个Electron应用了：

npm start

如果一切顺利，你将看到一个窗口弹出，显示"Hello Electron!"的标题和内容，点击按钮会弹出提示框。

理解Electron的核心概念

主进程和渲染进程

Electron应用有两种类型的进程：

主进程（Main Process）：由main.js文件控制，负责应用的生命周期管理、窗口创建和管理、原生API调用等。一个Electron应用只有一个主进程。
渲染进程（Renderer Process）：每个窗口对应一个渲染进程，负责显示网页内容。渲染进程运行在Chromium浏览器环境中，可以使用HTML、CSS和JavaScript构建界面，就像开发网页一样。

主进程和渲染进程之间通过IPC（Inter-Process Communication）机制进行通信。你可以通过docs/tutorial/ipc.md了解更多关于进程间通信的内容。

应用生命周期

Electron应用有自己的生命周期，主要包括以下几个阶段：

准备就绪（ready）：应用初始化完成，可以创建窗口。
窗口全部关闭（window-all-closed）：所有窗口都被关闭，通常在这个事件中退出应用（macOS除外）。
激活（activate）：应用被激活（如点击dock图标），如果没有窗口则创建新窗口（主要用于macOS）。

我们在main.js中已经实现了基本的生命周期管理逻辑。更多关于应用生命周期的信息，可以参考docs/api/app.md。

调试你的Electron应用

开发过程中，调试是必不可少的环节。Electron提供了多种调试方式：

主进程调试

你可以使用VS Code来调试主进程。创建.vscode/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": [".", "--remote-debugging-port=9222"]
    }
  ]
}

然后在VS Code中启动调试，就可以设置断点调试主进程代码了。详细的调试指南可以参考docs/tutorial/debugging-vscode.md。

渲染进程调试

渲染进程的调试和网页调试类似，你可以通过win.webContents.openDevTools()在应用启动时自动打开开发者工具，或者使用快捷键Ctrl+Shift+I（Windows/Linux）或Cmd+Opt+I（macOS）手动打开。

总结与下一步

通过本教程，你已经学会了如何使用Electron快速搭建一个跨平台桌面应用。你掌握了：

Electron的基本概念和工作原理
如何初始化Electron项目并安装依赖
创建主进程和渲染进程文件
运行和调试Electron应用

接下来，你可以进一步学习以下内容：

添加更多功能：如菜单、对话框、通知等，可以参考docs/tutorial/menus.md和docs/tutorial/notifications.md。
进程间通信：学习如何在主进程和渲染进程之间传递数据，参考docs/tutorial/ipc.md。
应用打包：将你的应用打包成可执行文件，分发给用户，参考docs/tutorial/application-distribution.md。

如果你在开发过程中遇到问题，可以查阅Electron的官方文档或加入Electron社区寻求帮助。现在，开始你的Electron开发之旅吧！

希望这篇教程对你有帮助，如果喜欢请点赞、收藏并关注，下期我们将介绍如何使用Electron Forge打包和分发你的应用。

【免费下载链接】electron 使用Electron构建跨平台桌面应用程序，支持JavaScript、HTML和CSS 项目地址: https://gitcode.com/GitHub_Trending/el/electron

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考