Article directory
With the rapid development of mobile Internet, more and more enterprises and individuals are paying attention to the development of cross-platform applications. In this context, the Electron framework emerged as the times require and has become a popular choice for building cross-platform desktop applications. This article will introduce in detail the basic concepts and advantages of the Electron framework and how to use the Electron framework to quickly develop cross-platform desktop applications.
1. Introduction to Electron framework
Electron is an open source library based on Chromium and Node.js for building cross-platform desktop applications. By using Electron, developers can use web technologies such as HTML, CSS, and JavaScript to write desktop applications, and at the same time, they can take advantage of the powerful features of Node.js to implement localized operations. The main advantages of the Electron framework are high development efficiency, good cross-platform performance and easy maintenance.
2. Advantages of Electron framework
1. High development efficiency
The Electron framework uses the same technology stack as web development. Developers do not need to learn new programming languages and technologies. They only need to master web technologies such as HTML, CSS and JavaScript to develop desktop applications. In addition, Electron also provides a wealth of APIs and plug-ins to help developers quickly implement various functions.
2. Good cross-platform performance
The Electron framework supports multiple operating systems such as Windows, macOS, and Linux. Developers only need to write code once and it can run on multiple platforms. This greatly improves development efficiency and reduces maintenance costs.
3. Easy to maintain
Since the Electron framework uses the web technology stack, developers can easily update and maintain applications. In addition, Electron also provides a wealth of community resources and documentation to help developers quickly solve problems.
4. Powerful native capabilities
Although the Electron framework is based on the web technology stack, it still has powerful native capabilities. By using Node.js, developers can easily implement localized operations such as file operations and network requests. In addition, Electron also supports integration with other native modules, such as databases, graphics processing, etc.
3. How to use the Electron framework to quickly develop cross-platform desktop applications
1. Install Electron
First, developers need to install Node.js and npm (the package manager for Node.js) on their computer. Then, install Electron via npm:
npm install electron --save-dev
2. Create project folder
In the project folder, create a file namedmain.js for writing the main process code of the Electron application. At the same time, create a file named index.html for writing the application interface code.
3. Write the main process code
Inmain.js file, write the following code:
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)
This code first introduces Electron's app and BrowserWindow modules, and then defines a createWindow function, using to create a new browser window and load theindex.html file. Finally, when the application is ready, call the createWindow function to create the window.
4. Write interface code
Inindex.html file, write the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Electron!</title>
</head>
<body>
<h1>Hello Electron!</h1>
</body>
</html>
This code creates a simple HTML page that displays the words "Hello Electron!" When the user runs the Electron application, they will see this page.
5. Run the application
In the project folder, open a terminal or command prompt and run the following command to start the Electron application:
electron .
This will start a local server and open a new window in the default browser. The user can view the HTML page just created in this window. At this point, a simple Electron application is completed.
"Introduction to Electron and Practical Combat"
Editor's Choice
"Electron Introduction and Practical Combat" focuses on the core functions of Electron and explains how to use Electron technology to quickly develop desktop applications. It is an Electron technology book that is easy to learn and highly practical. It has the following characteristics.
(1) Step by step, simple and easy to learn. The content of this book revolves around Electron itself, from introducing the basic concepts of Electron, to combining concepts with cases, and finally learning an open source framework based on Electron.
(2) Combination of theory and cases. This book does not simply explain theoretical knowledge, nor does it delve into the underlying implementation of a certain knowledge point. Throughout the article, the most understandable cases will be used to assist the explanation of theoretical knowledge, so that readers can quickly master the basic usage of Electron.
(3) Neat and clear code examples. A good code example is better than a lot of text description. You don't have to worry about not understanding the code examples in this book, because there are detailed comments and descriptions next to each piece of code. If you don't understand it at one time, you can read it again, and at the same time, you can write and run the code yourself until you understand and master it.
In the process of reading this book, you can have a more comprehensive understanding of the basic concepts and principles of Electron, so that you can implement business logic more reasonably during the development process. At the same time, you can learn how frequently used APIs are called in scenario code examples, instead of just understanding the functions of APIs from the official website documentation.
brief introduction
"Electron Introduction and Practical Combat" focuses on the core functions of Electron and explains how to use Electron technology to quickly develop desktop applications. The content of this book is simple and easy to learn. It is introduced from actual scenarios, from shallow to deep, step by step, leading readers to understand and use the core functions of Electron step by step. This book combines theory with cases. It not only explains the core functions and principles of Electron in detail, but also integrates them into real-life cases. Through actual project practice, readers can deeply understand Electron and perfectly apply the knowledge they have learned. Apply to practice. The code examples in the book are neat and clear. In order to facilitate readers to better understand, the author has made detailed comments and descriptions of these codes.
About the Author
Pan Xiao, the company's senior technical manager, is mainly responsible for the front-end direction and is also responsible for technical management across technology stacks. I have been engaged in the front-end direction for 8 years and have certain experience in front-end business research and development and management. At the same time, he also has a lot of involvement in other technical directions such as client development. Among them, I have used Electron for high-end development for 3 years, and I have some experience in the basic knowledge, features, optimization and advanced use of Electron.
Table of contents
第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
Target readers of this book
The first category of readers: developers who are engaged in Web front-end development, have a certain foundation of front-end knowledge, and start learning the Electron framework out of interest, or whose projects are about to be developed using Electron and want to get started with Electron quickly.
The second type of readers: developers who are engaged in traditional desktop client development, want to understand the Electron framework, and want to expand their technical breadth.
The third type of readers: developers who have developed projects using the Electron framework and are familiar with the basic use of Electron, but want to learn more case practices.
Main contents of this book
This book contains 10 chapters in total. The main contents of each chapter are as follows.
Chapter 1 introduces the origin of Electron and similar technologies, giving you a general understanding of Electron.
Chapter 2 explains the implementation of a system information display application to let you understand the directory structure of applications developed using the Electron framework. In this process, you will initially come into contact with some important concepts of Electron, such as the main process, rendering process, and window. If you are confused about these concepts while reading this chapter, don’t worry, they will be explained in the following chapters.
Chapter 3 explains the important concepts that developers must master when using the Electron framework to develop applications—the main process, the rendering process, and inter-process communication. After mastering these concepts, implement the system information display application in Chapter 2 independently, and you will be able to basically master the use of the Electron framework.
Chapter 4 explains window-related knowledge. In this chapter, you can not only learn how to use the API provided by Electron to implement a simple window in your application, but also learn how to implement some complex windows, such as combination windows, transparent rounded corners, and retractable windows. At the same time, after studying this chapter, you can also understand the operating mechanism of Windows windows.
Chapter 5 explains the relevant knowledge involved in the application startup process, including startup parameter settings, custom startup protocols, setting boot startup, and optimizing application startup speed.
Chapter 6 explains how applications interact with local capabilities, including operating the Windows registry in the application, calling C or C language implementation modules, and using local storage to store application data. The content of this chapter will involve a lot of Node.js, C and C-related knowledge. It will be easier to understand if you understand the relevant knowledge first before reading this chapter.
Chapter 7 explains how applications use hardware devices and system UI components. The hardware devices involved include common keyboards, monitors, microphones, and printers. System UI components include tray menus and system notifications.
Chapter 8 explains the methods used by developers to ensure application quality during the application development process. It will cover how to write unit tests and integration tests during the development process, as well as common ways to deal with problems when the application goes wrong.
Chapter 9 explains how to package the source code into an installation package and put it on the app store when the application is ready for release. Application upgrade is a very important function and will be explained in detail in this chapter. The content of this chapter is very important for developing a formal and complete application. If you have not yet involved the scenario of releasing a formal application at this stage, you can skip this chapter for now.
Chapter 10 is advanced content and introduces Sugar-Electron, an application layer framework based on Electron. The content will first explain the usage scenarios, design principles and how to use its core modules of the framework, and then explain how to use the framework to develop applications.