Electron框架：构建跨平台桌面应用的终极解决方案

文章目录

一、Electron框架简介
二、Electron框架的优势
- 1. 开发效率高
- 2. 跨平台性能好
- 3. 易于维护
- 4. 强大的原生能力
三、如何使用Electron框架快速开发跨平台桌面应用
- 1. 安装Electron
- 2. 创建项目文件夹
- 3. 编写主进程代码
- 4. 编写界面代码
- 5. 运行应用
《Electron入门与实战》
- 编辑推荐
- 内容简介
- 作者简介
- 目录
- 本书目标读者
- 本书主要内容

随着移动互联网的快速发展，越来越多的企业和个人开始关注跨平台应用的开发。在这个背景下，Electron框架应运而生，成为了构建跨平台桌面应用的热门选择。本文将详细介绍Electron框架的基本概念、优势以及如何利用Electron框架快速开发跨平台桌面应用。

一、Electron框架简介

Electron是一个基于Chromium和Node.js的开源库，用于构建跨平台的桌面应用程序。通过使用Electron，开发者可以使用HTML、CSS和JavaScript等Web技术来编写桌面应用，同时可以利用Node.js的强大功能来实现本地化操作。Electron框架的主要优点是开发效率高、跨平台性能好以及易于维护。

二、Electron框架的优势

1. 开发效率高

Electron框架采用了与Web开发相同的技术栈，开发者无需学习新的编程语言和技术，只需掌握HTML、CSS和JavaScript等Web技术即可进行桌面应用的开发。此外，Electron还提供了丰富的API和插件，可以帮助开发者快速实现各种功能。

2. 跨平台性能好

Electron框架支持Windows、macOS和Linux等多个操作系统，开发者只需编写一次代码，就可以在多个平台上运行。这大大提高了开发效率，降低了维护成本。

3. 易于维护

由于Electron框架采用了Web技术栈，开发者可以轻松地对应用进行更新和维护。此外，Electron还提供了丰富的社区资源和文档，帮助开发者快速解决问题。

4. 强大的原生能力

虽然Electron框架基于Web技术栈，但它仍然具有强大的原生能力。通过使用Node.js，开发者可以轻松地实现文件操作、网络请求等本地化操作。此外，Electron还支持与其他原生模块的集成，如数据库、图形处理等。

三、如何使用Electron框架快速开发跨平台桌面应用

1. 安装Electron

首先，开发者需要在计算机上安装Node.js和npm（Node.js的包管理器）。然后，通过npm安装Electron：

npm install electron --save-dev

2. 创建项目文件夹

在项目文件夹中，创建一个名为main.js的文件，用于编写Electron应用的主进程代码。同时，创建一个名为index.html的文件，用于编写应用的界面代码。

3. 编写主进程代码

在main.js文件中，编写如下代码：

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函数，用于创建一个新的浏览器窗口并加载index.html文件。最后，当应用准备就绪时，调用createWindow函数创建窗口。

4. 编写界面代码

在index.html文件中，编写如下代码：

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

这段代码创建了一个简单的HTML页面，显示“Hello Electron!”字样。当用户运行Electron应用时，将看到这个页面。

5. 运行应用

在项目文件夹中，打开终端或命令提示符，运行以下命令启动Electron应用：

electron .

这将启动一个本地服务器，并在默认浏览器中打开一个新窗口。用户可以在该窗口中查看到刚刚创建的HTML页面。至此，一个简单的Electron应用就完成了。

《Electron入门与实战》

在这里插入图片描述

编辑推荐

《Electron入门与实战》围绕Electron最核心的功能展开，讲解如何使用Electron技术快速开发桌面应用，是一本简单易学、实践性强的Electron技术图书，具有如下特点。
（1）循序渐进，简单易学。本书内容围绕Electron本身展开，从介绍Electron基础概念，再到概念与案例结合，最后学习一个基于Electron的开源框架。
（2）理论与案例结合。本书不是单纯地对理论知识进行讲解，也不会深入探讨某个知识点的底层实现。通篇将以最通俗易懂的案例辅助理论知识的讲解，使读者能快速地掌握Electron的基本使用方法。
（3）整洁且清晰的代码示例。一段好的代码示例能胜过一堆的文字描述。你不用担心看不懂本书中的代码示例，因为第段代码旁都有着编写详尽的注释和描述。如果一遍看不懂，可以再看一遍，同时可以亲手编写代码并运行，直到理解并掌握为止。
在阅读本书的过程中，你能对Electron的基本概念、基本原理有一个较为全面的了解，从而能在开发过程中更合理地实现业务逻辑。与此同时，你能在场景代码示例中学习到高频使用的API是如何被调用的，而不仅仅是从官网文档中了解API的作用。

内容简介

《Electron入门与实战》围绕Electron核心的功能展开，讲解了如何使用Electron技术快速开发桌面应用。本书内容简单易学，从实际场景引入，由浅入深，循序渐进，带领读者一步步地去理解、运用Electron的核心功能。本书理论与案例相结合，不仅对Electron的核心功能及其原理进行了详细讲解，还将它们融合到真实场景的案例中，通过项目实战来让读者深入地理解Electron并将学会的知识完美地应用于实践。书中的代码示例整洁且清晰，为便于读者更好地理解，笔者对这些代码做了详尽的注释和描述。

作者简介

潘潇，公司高级技术经理，主要负责前端方向，同时负责跨技术栈的技术管理工作。从事前端方向8年，在前端业务研发和管理上有一定的经验。同时对其他技术方向如客户端开发等，也有不少涉猎。其中使用Electron进行夸端开发有3年，对Electron的基础知识、特性、优化及进阶使用有一定心得。

第1章 初识Electron 1
1.1 Web应用与桌面客户端 1
1.2 初识Electron 4
1.3 Electron与NW.js 7
1.4 跨平台新星Flutter 11
1.5 总结 13
第2章 尝试构建个Electron程序 15
2.1 Node.js环境搭建 15
2.1.1 下载Node.js 15
2.1.2 安装Node.js 15
2.1.3 配置环境变量 18
2.2 Electron环境搭建 19
2.3 实现一个系统信息展示应用 20
2.3.1 初始化项目 20
2.3.2 程序目录结构 22
2.3.3 应用主进程 23
2.3.4 窗口页面 27
2.4 总结 33
第3章 进程 35
3.1 主进程与渲染进程 35
3.1.1 进程与线程 36
3.1.2 主进程 39
3.1.3 渲染进程 42
3.2 进程间通信 49
3.2.1 主进程与渲染进程通信 51
3.2.2 渲染进程互相通信 59
3.3 总结 65
第4章 窗口 67
4.1 窗口的基础知识 67
4.1.1 窗口的结构 67
4.1.2 重要的窗口配置 68
4.2 组合窗口 73
4.3 特殊形态的窗口 75
4.3.1 无标题栏、菜单栏及边框 76
4.3.2 圆角与阴影 76
4.4 窗口的层级 80
4.4.1 Windows窗口层级规则 80
4.4.2 置顶窗口 81
4.5 多窗口管理 82
4.5.1 使用Map管理窗口 82
4.5.2 关闭所有窗口 87
4.5.3 窗口分组管理 88
4.6 可伸缩窗口 91
4.6.1 单窗口方案 91
4.6.2 多窗口方案 96
4.7 总结 101
第5章 应用启动 103
5.1 启动参数 103
5.1.1 命令行参数 103
5.1.2 根据命令行参数变更应用配置 104
5.1.3 给可执行文件加上启动参数 109
5.2 Chromium配置开关 109
5.2.1 在命令行后追加参数 110
5.2.2 使用commandLine 111
5.3 通过协议启动应用 112
5.3.1 应用场景 112
5.3.2 实现自定义协议 113
5.3.3 通过自定义协议启动时的事件 115
5.3.4 应用首次启动前注册自定义协议 117
5.4 开机启动 118
5.5 启动速度优化 120
5.5.1 优化的重要性 120
5.5.2 使用V8 snapshots优化启动速度 121
5.6 总结 131
第6章 本地能力 132
6.1 注册表 132
6.1.1 reg命令 133
6.1.2 查询注册表项 135
6.1.3 添加或修改注册表项 139
6.1.4 删除注册表 142
6.2 调用本地代码 143
6.2.1 node-ffi 144
6.2.2 N-API 149
6.3 本地存储 154
6.3.1 操作文件存储数据 155
6.3.2 使用indexedDB 172
6.4 总结 181
第7章 硬件设备与系统UI 183
7.1 键盘快捷键 183
7.2 屏幕 189
7.2.1 屏幕截图 190
7.2.2 屏幕录制 201
7.3 录制声音 211
7.4 使用打印机 220
7.5 系统托盘与通知 228
7.6 总结 231
第8章 应用质量 232
8.1 单元测试 232
8.2 集成测试 239
8.3 异常处理 244
8.3.1 全局异常处理 244
8.3.2 日志文件 247
8.3.3 上报异常信息文件 252
8.3.4 Sentry 256
8.4 崩溃收集与分析 260
8.4.1 生成与分析Dump文件 260
8.4.2 在服务器端管理Dump文件 263
8.5 总结 268
第9章 打包与发布 269
9.1 应用打包 269
9.1.1 asar 269
9.1.2 生成可执行程序 271
9.1.3 安装包 273
9.2 应用签名 278
9.3 应用升级 279
9.3.1 自动升级 279
9.3.2 差分升级 282
9.4 发布应用到商店 287
9.5 总结 291
第10章 Sugar-Electron 293
10.1 应用环境的切换 294
10.1.1 集中管理多环境配置 294
10.1.2 基础配置与扩展 295
10.1.3 设置应用环境 296
10.2 进程间通信 299
10.2.1 请求响应模式 299
10.2.2 发布订阅模式 302
10.2.3 向主进程发送消息 304
10.3 窗口管理 305
10.4 数据共享 307
10.5 插件扩展 309
10.5.1 实现自定义插件 310
10.5.2 安装插件到框架 311
10.5.3 在代码中使用插件 312
10.6 服务进程 312
10.7 总结 314

本书目标读者

第一类读者：从事Web前端开发，有一定的前端知识基础，出于兴趣开始学习Electron框架，或是项目即将使用Electron进行开发，想快速上手Electron的开发人员。
第二类读者：从事传统桌面客户端开发，想了解Electron框架，对扩展自己技术广度有诉求的开发人员。
第三类读者：已经使用Electron框架开发过项目，熟悉Electron的基本使用，但想学习更多案例实践的开发人员。

本书主要内容

本书共包含10章，各章的主要内容如下。
第1章介绍Electron的由来以及同类技术，让你对Electron有一个大概的了解。
第2章通过讲解一个系统信息展示应用的实现，让你了解用Electron框架开发应用的目录结构。这个过程中你会初步接触到Electron的一些重要概念，如主进程、渲染进程以及窗口等。如果你在阅读本章节时对这些概念感到困惑，不用担心，后面章节会重点讲解它们。
第3章讲解开发人员在使用Electron框架开发应用时必须要掌握的重要概念—主进程、渲染进程以及进程间通信。掌握这些概念之后，将第2章中的系统信息展示应用独立实现一遍，你就可以基本掌握Electron框架的使用了。
第4章讲解窗口相关的知识。在该章节中，你不仅可以学习如何在应用中使用Electron提供的API实现一个简单的窗口，还可以学习一些复杂窗口的实现方式，如组合窗口、透明圆角窗口以及可伸缩窗口等。与此同时，学习完本章，你还可以了解到Windows窗口的运行机制。
第5章讲解应用启动过程中涉及的相关知识，包括启动参数设置、自定义启动协议、设置开机启动以及优化应用启动速度等。
第6章讲解应用如何与本地能力进行交互，包括在应用中操作Windows注册表、调用C或C 语言实现模块以及利用本地存储来存储应用数据。本章内容会大量涉及Node.js、C以及C 相关的知识。如果你先了解相关知识再阅读本章节，将会更容易理解。
第7章讲解应用如何使用硬件设备和系统UI组件。涉及的硬件设备包括常见的键盘、显示器、麦克风以及打印机。系统UI组件包括托盘菜单和系统通知。
第8章讲解开发人员在应用研发的过程中保障应用质量所使用的方法。将涉及如何在开发过程中编写单元测试和集成测试，以及当应用出问题时常见的处理方式。
第9章讲解在应用准备发布时，将源代码打包成安装包并上架到应用商店的方法。应用升级是一个非常重要的功能，本章也将详细讲解。本章的内容对于开发一个正式的、完整的应用来说非常重要，如果你现阶段还未涉及要发布正式应用的场景，可以先跳过本章节的学习。
第10章属于进阶内容，介绍一个基于Electron实现的应用层框架Sugar-Electron。内容上首先会讲解该框架的使用场景、设计原则及其核心模块的使用方式，然后讲解如何运用该框架开发应用。