electron入门：快速搭建自己的第一个electron应用

前言

从上学到现在，用过无数款笔记软件、云笔记软件，但是始终找不到最合乎我心意的那一个，因此打算根据自己的需求手动撸一个基于脑图的云笔记软件，考虑到桌面端的技术选型的时候，比起繁琐的原生开发，作为个人开发者更加青睐于electron这种跨平台的技术。从这篇文章开始，我将记录我从0到1学习electron，以及使用electron构建我自己的云笔记软件的全程，希望能坚持下去。

1. 概述

Electron（又称 Electron.js 或 simply Electron）是一个开源的跨平台桌面应用程序开发框架，它允许开发者使用前端技术（如HTML、CSS和JavaScript）来构建桌面应用程序，而不仅仅是Web应用程序。Electron是由GitHub开发并维护，最初是为了构建GitHub的桌面客户端而创建的。

以下是 Electron 的一些关键特点和信息：

1. 跨平台性：Electron 可以用于开发跨多个操作系统的桌面应用程序，包括Windows、macOS和Linux。这意味着你可以使用相同的代码库构建适用于不同操作系统的应用程序。

2. 基于Web技术：Electron 应用程序使用Web技术栈构建，包括HTML、CSS和JavaScript。这使得前端开发者可以利用他们的技能来构建桌面应用程序，而不必学习新的编程语言或框架。

3. Node.js 集成：Electron 包括 Node.js 运行时，这意味着你可以在应用程序中使用 JavaScript 和 Node.js 模块。这为开发者提供了强大的服务器端功能，使他们能够执行文件操作、网络请求等操作。

4. 开放的生态系统：Electron 拥有丰富的开发者社区和生态系统，可以访问大量的第三方插件和库，以便添加新功能、改善性能或解决各种问题。

5. 自定义界面：Electron 允许开发者完全自定义应用程序的用户界面，无论是使用本地窗口、自定义样式或原生操作系统控件。

6. 实时更新：开发者可以使用自动更新功能轻松将新版本的应用程序推送给用户，以解决问题、添加新功能或提供改进。

7. 应用程序示例：许多知名的应用程序，如Visual Studio Code、Slack、WhatsApp、Discord、GitHub Desktop等，都是使用 Electron 构建的。

8. 开源和免费：Electron 是开源的，并且基于MIT许可证，允许开发者免费使用和修改框架。

Electron 是一个强大的框架，使开发者能够轻松地构建跨平台的桌面应用程序，无论是为个人项目还是企业级应用，都可以从它的便捷性和灵活性中受益。

2. 安装Electron

2.1 安装Node.js

Electron 依赖于 Node.js，因此在安装Electron之前，首先需要安装 Node.js。以下是在 Windows、Linux 和 macOS 三种平台上安装 Node.js 的方法：

2.1.1 在 Windows 上安装 Node.js

1. 使用官方安装程序：

• 访问 Node.js 官方网站（nodejs.org/）。
• 在 "Downloads" 部分，根据你的操作系统选择 Windows 下载选项（通常是 "Windows Installer"）。
• 下载安装程序并运行它。
• 在安装向导中，选择默认选项或根据需要进行自定义配置。
• 安装完成后，你可以在命令提示符或 PowerShell 中使用 node -v 和 npm -v 命令来验证 Node.js 和 npm 是否已成功安装。

2.1.2 在 Linux 上安装 Node.js

在大多数 Linux 发行版上，你可以使用包管理器来安装 Node.js。以下是在常见的 Linux 发行版上安装 Node.js 的方法：

在 Ubuntu 或 Debian 上：

1. 打开终端。
2. 运行以下命令以更新包列表：

sudo apt-get update

3. 安装 Node.js 和 npm：

sudo apt-get install nodejs npm

在 CentOS 或 RHEL 上：

1. 打开终端。
2. 使用 curl 下载 Node.js 安装脚本：

curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -

（请根据需要更改 Node.js 版本号。上述示例中使用的是 14.x 版本。）

3. 安装 Node.js 和 npm：

   sudo yum install nodejs

在其他 Linux 发行版上：

你可以查阅特定发行版的文档或使用包管理器搜索 Node.js 的安装包。通常情况下，你需要运行类似 sudo apt-get install nodejs 或 sudo yum install nodejs 的命令。

2.1.3 在 macOS 上安装 Node.js

在 macOS 上安装 Node.js通常相对简单。你可以使用官方 Node.js 安装程序或使用包管理器（如 Homebrew）来安装 Node.js。

使用官方安装程序：

1. 访问 Node.js 官方网站（nodejs.org/）。
2. 在 "Downloads" 部分，选择 macOS 下载选项。
3. 下载安装程序并运行它。
4. 在安装向导中，选择默认选项或根据需要进行自定义配置。
5. 安装完成后，你可以在终端中使用 node -v 和 npm -v 命令来验证 Node.js 和 npm 是否已成功安装。

使用 Homebrew：

如果你已安装了 Homebrew，你可以使用 Homebrew 来安装 Node.js：

1. 打开终端。

2. 运行以下命令来安装 Node.js：

   brew install node

这些是在 Windows、Linux 和 macOS 上安装 Node.js 的基本步骤。根据你的具体需求和操作系统版本，可能需要进行一些额外的配置或设置。

2.1.4 验证Node.js是否安装成功

安装完成后，你可以在终端或命令提示符中运行以下命令来验证 Node.js 和 npm（Node.js 包管理器）是否安装成功：

node -v
npm -v

如果这些命令返回版本号，则说明 Node.js 和 npm 安装成功。

2.2 安装Electron

2.2.1 全局安装Electron

要通过 Node.js 安装 Electron，你可以使用 npm（Node.js 包管理器）在 Windows、Linux 和 macOS 系统上执行以下命令：

1. 打开终端或命令提示符。

2. 使用以下命令来在全局范围内安装 Electron：

   npm install -g electron

上述命令中的 -g 标志表示将 Electron 安装为全局可用的命令行工具。

3. 等待安装完成。安装过程可能会花费一些时间，具体时间取决于你的互联网连接速度和计算机性能。

4. 安装完成后，你可以在终端中使用 electron 命令来启动 Electron 应用程序，例如：

electron /path/to/your/app

其中 /path/to/your/app 是你的 Electron 应用程序的路径。

请注意，你需要确保 Node.js 和 npm 已成功安装并配置正确，因为 Electron 是构建在它们之上的。此外，安装 Electron 时可能需要一些时间，具体时间取决于你的系统和网络速度。

这个方法适用于 Windows、Linux 和 macOS 系统，你可以在不同平台上使用相同的命令来安装 Electron。在开始开发和构建 Electron 应用程序之前，请确保你已经设置好了开发环境并准备好应用程序的代码。

2.2.2 仅在当前项目中安装Electron

要在当前项目中通过 Node.js 安装 Electron 而不是全局安装，你可以使用以下步骤：

1. 打开终端或命令提示符，并导航到你的项目目录，进入项目的根目录。

2. 在项目根目录中运行以下命令，使用 npm 在项目依赖中安装 Electron：

npm install electron --save-dev

上述命令会将 Electron 安装为项目的开发依赖项（--save-dev 或 -D 标志表示将其添加到 package.json 文件的 devDependencies 部分）。

3. 等待安装完成。npm 将下载并安装 Electron 以供你的项目使用。

4. 一旦安装完成，你可以在项目中使用 Electron。你可以通过在终端中执行以下命令来启动你的 Electron 应用程序：

npx electron /path/to/your/app

其中 /path/to/your/app 是你的 Electron 应用程序的路径。

使用 npx 命令可以在项目中查找并执行 Electron，而不需要全局安装它。这使得你可以在项目的不同计算机上轻松共享项目，而无需全局安装 Electron。

以上步骤适用于 Windows、Linux 和 macOS 系统上的项目。在执行这些步骤之前，请确保 Node.js 和 npm 已成功安装并配置正确。此外，确保你的项目目录已准备好并包含了你的 Electron 应用程序代码。

2.2.3 安装Electron遇到的问题

运行 npm install electron --save-dev 或npm install -g electron 会报如下错误（或者类似错误）：

npm notice 
npm notice New major version of npm available! 9.8.1 -> 10.1.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.1.0
npm notice Run npm install -g npm@10.1.0 to update!
npm notice 
npm ERR! code 1
npm ERR! path /Users/leiqinghua/src/node_modules/electron
npm ERR! command failed
npm ERR! command sh -c node install.js
npm ERR! RequestError: socket hang up
npm ERR!     at ClientRequest.<anonymous> (/Users/leiqinghua/src/node_modules/got/dist/source/core/index.js:970:111)
npm ERR!     at Object.onceWrapper (node:events:627:26)
npm ERR!     at ClientRequest.emit (node:events:524:35)
npm ERR!     at origin.emit (/Users/leiqinghua/src/node_modules/@szmarczak/http-timer/dist/source/index.js:43:20)
npm ERR!     at TLSSocket.socketOnEnd (node:_http_client:520:9)
npm ERR!     at TLSSocket.emit (node:events:524:35)
npm ERR!     at endReadableNT (node:internal/streams/readable:1359:12)
npm ERR!     at connResetException (node:internal/errors:717:14)
npm ERR!     at TLSSocket.socketOnEnd (node:_http_client:520:23)
npm ERR!     at TLSSocket.emit (node:events:524:35)
npm ERR!     at endReadableNT (node:internal/streams/readable:1359:12)
npm ERR!     at process.processTicksAndRejections (node:internal/process/task_queues:82:21)

npm ERR! A complete log of this run can be found in: /Users/leiqinghua/.npm/_logs/2023-09-20T01_02_35_498Z-debug-0.log

查看错误信息可以知道，是由于国内的网络原因导致的，国内无法正常访问到Node.js的仓库，我们需要替换成国内镜像来解决这个问题。我测试了一下，国内的话可以试试淘宝镜像和华为云镜像，可以在全局范围或者项目范围内内设置Electron 镜像，要设置 Electron 镜像，你需要在项目级别或全局级别的 .npmrc 文件中进行配置。

以下是设置方式：

在项目级别设置 Electron 镜像：

在你的项目目录下，可以创建一个 .npmrc 文件并在其中设置 Electron 镜像。执行以下命令：

//华为云镜像
echo "electron_mirror=https://repo.huaweicloud.com/electron/" > .npmrc

//淘宝镜像
echo "electron_mirror=https://npm.taobao.org/mirrors/electron/" > .npmrc

这会在项目目录中创建一个 .npmrc 文件，并将 Electron 镜像设置为华为云镜像。

在全局级别设置 Electron 镜像：

如果你想在全局范围内设置 Electron 镜像，可以执行以下命令：

//华为云镜像
ELECTRON_MIRROR=https://repo.huaweicloud.com/electron/ npm install -g electron

//淘宝镜像
ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ npm install -g electron 

上述命令会使用指定的 ELECTRON_MIRROR 环境变量来下载 Electron。如果你想在全局范围内使用不同的 Electron 镜像源，你可以在每个项目中执行类似的命令，或者将 ELECTRON_MIRROR 环境变量添加到你的系统环境变量中，以便在全局范围内生效。ELECTRON_MIRROR 环境变量的设置方式可能因操作系统而异，你可以根据你的操作系统和需求来配置。

3. 使用Electron搭建第一个项目

创建一个 Electron 的 HelloWorld 项目相对简单，只需遵循以下步骤：

1. 创建项目目录：首先，在你的计算机上创建一个空的项目目录，用于存放 Electron 项目文件。

mkdir pothos //这里我的项目名叫pothos
cd pothos

2. 初始化 npm 项目：在项目目录中打开终端，并执行以下命令，以初始化一个 npm 项目：

npm init

这将引导你完成 npm 项目初始化的过程，帮你创建一个package.json文件，你可以按照提示一步一步进行配置。在配置过程中，你可以按照需要设置项目的名称、版本、入口文件等信息，如下：

{
  "name": "pothos",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^26.2.1"
  }
}

3. 安装 Electron：在项目目录中执行以下命令，以安装 Electron 作为项目的开发依赖：

//将淘宝的electron镜像写入本地文件
echo "electron_mirror=https://npm.taobao.org/mirrors/electron/" > .npmrc

npm install electron --save-dev

这将在项目中安装 Electron 并将其添加到 package.json 文件的 devDependencies 部分。

4. 创建主文件 ：在项目目录中创建一个主 Electron 文件，通常命名为 main.js。这个文件将作为 Electron 应用程序的入口点。

// main.js

// 引入 Electron 模块
const { app, BrowserWindow } = require('electron');

// 创建一个窗口函数
function createWindow() {
  // 创建一个新窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true // 允许在渲染进程中使用 Node.js
    }
  });

  // 加载 index.html 文件作为窗口的内容
  win.loadFile('index.html');
}

// 当 Electron 应用准备就绪时，创建窗口
app.whenReady().then(createWindow);

// 当所有窗口都关闭时，退出应用（除非在 macOS 上）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// 在 macOS 上，点击 Dock 图标时创建新窗口
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

5. 创建 HTML 文件 ：在项目目录中创建一个 HTML 文件，通常命名为 index.html，用于作为 Electron 应用程序的界面。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <h1>Hello, Electron!</h1>
</body>
</html>

6. 编辑 package.json ：确保你的 package.json 文件中的 main 字段指向 main.js，同时加上start命令，如下：

"main": "main.js",

//start命令
"scripts": {
    "start": "electron ."
  }

7. 运行 Electron 应用：在项目目录中执行以下命令，以启动 Electron 应用程序：

npm start

这将启动 Electron 并加载你的 index.html 文件，显示 "Hello, Electron!"。这就是一个简单的 Electron HelloWorld 项目的创建过程。你可以根据需要进一步扩展和定制你的 Electron 应用程序。如果需要使用其他 Electron 模块或添加更多功能，可以根据 Electron 文档进行进一步学习和开发。

8. vscode中项目结构和运行结果：

vs code下的项目结构

运行效果

总结

这篇博客为初学者提供了一个入门 Electron 开发的指南，涵盖了从环境准备到创建第一个项目的全过程。强调了 Electron 的优势和适用性，适合那些希望开始使用 Electron 构建桌面应用的开发者。希望能够坚持下去，成功完成自己的云笔记软件项目！