Electron 学习笔记

什么是Electron

Electron是一个跨平台的桌面级应用程序开发框架，不同于浏览器，使用Electron可以在不考虑浏览器兼容性的情况下，利用前端相关的开发生态来开发桌面应用程序，并且具有了对操作系统底层API操作的能力，并通过 Native API 解决了跨平台的问题（如统一的界面、应用通知、软件更新、崩溃监控等）。

简而言之：

Electron = Chromium + Node.js + Native API

Electron 技术构成

一个简单的 Electron 程序的最小组成

package.json (包体描述)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "name": "hello-electron",
    "version": "1.0.0",
    "description": "",
    "main": "main.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "electron ."
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "electron": "^27.0.2"
    }
}

main.js (主进程)

1
2
3
4
5
6
7
const { app, BrowserWindow  } = require('electron')
let win
app.on('ready', () => {
      win = new BrowserWindow()
      win.loadFile('index.html')
})

index.html (渲染进程)

1
2
3
4
<html>
    <body>hello</body>
</html>

Electron 程序的最小组成

运行起来后的效果

运行后的效果

使用 Electron 实现一个简单的番茄钟

什么是番茄钟

番茄钟是实现番茄工作法的一种工具，而番茄工作法是一种时间管理法，番茄工作法可以让我们明确选择一个待办事项，坚持做到闹钟响铃，仿佛押宝一样，为这件事投入 25 分钟的时间，并且随后休息 5分钟，让我们一次只专注做一件事。

如果想详细了解番茄工作法，我个人推荐阅读 Staffan Nöteberg 写的 《番茄工作法图解：简单易行的时间管理方法》

购买地址：番茄工作法图解：简单易行的时间管理方法 (ituring.com.cn)

《番茄工作法图解：简单易行的时间管理方法》

整体流程图

image-20231025220402820

Electron
Electron 学习笔记
https://sothx.com/2023/10/25/electron-learning-notes/
作者
Sothx
发布于
2023年10月25日
许可协议