一、什么是electron

1.1 electron

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的开源框架。它是由 Github 公司推出的，可帮助开发者在浏览器和操作系统之间构建原生应用程序界面。

普通的网页只能运行在浏览器中，无法直接运行在操作系统中，因此网页应用程序也就无法访问文件操作系统。它们也无法执行非JavaScript编写的代码，他们无法调用桌面应用程序可以使用的众多操作系统接口。而通过 Electron，开发人员可以通过使用 Web 网络技术来构建桌面应用程序。

Electron将Chromium和Node.js合并到同一个运行环境中。它允许开发人员使用Web页面构建GUI，并通过与操作系统无关的API访问Windows，macOS和Linux上的本机操作系统功能。Chromium和Node本身就是广受欢迎的应用程序平台，Electron将这两个平台结合在一起，使得开发者可以构建仅使用一个技术无法实现但是利用这两个平台的优点可以生成的应用程序。

1.2 准备

1.2.1 知识储备

Electron 是网页应用 (web apps) 的一个原生包装层，在 Node.js 环境中运行。 因此，在学习使用Electron 前需要对 Node.js 和前端 Web 开发有一定地了解。 如果您还需要了解一些背景知识，推荐：

[学习 Web 开发 | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Learn)

[Node.js](https://nodejs.dev/en/learn/)

[Chromium](https://www.chromium.org/)

1.2.2 工具

编译器：推荐 VSCode

在环境中安装Node.js与npm;

二、Hello World

2.1 创建一个Electron项目

新建一个文件夹，例如命名为 bookmarker，将这个文件夹在VSCode中打开，然后在终端中执行： npm init

会出现一系列属性允许你修改设置：

如下图，可以选择其中必要的属性修改：

图上面的属性含义：

• package name：程序的名称。

• version：程序的版本号。

• description：程序的描述信息。

• entry point：主进程代码的入口点,在生成的配置文件中对应main

• test command：用于配置如何运行测试脚本。

• git repository：源代码托管平台的 url 地址以。

• keywords：用于描述和标识应用程序的关键字。

• author：应用程序的作者

• license：应用程序的许可证类型

在最后yes确认后会生成一个package.json文件，这就是 Electron 项目的配置文件，它包含了项目的元数据和依赖项的信息。

然后新建一个文件夹，命名为 app， 在里面创建文件： main.js   renderer.js   style.css   index.html

接下来安装electron

npm install electron --save-dev

--save-dev标志将其添加到package.json的依赖项列表中。这意味着如果有人下载了这个项目并运行npm install，他们将默认获得Electron。

执行成功后得到如下：

首先会在package.json 里生成一项devDependencies，

devDependencies是开发时所依赖的工具包；后续还会有dependencies，是项目正常运行时需要的依赖包。具体介绍请参考：

[devDependencies & dependencies](https://juejin.cn/post/7077520444332441630)

同时也会生成node_modules文件夹，这里存放的就是依赖的资源。

2.1 实现一个Electron项目

• package.json 中的main 指定的是程序的启动页面：我在创建时设置为了main.js，但是这个 main.js 时对于package.json 的相对路径，而我把他放在了app文件夹中，所以要改为./app/main.js *

然后在main.js中添加如下代码：

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

const path = require('path')

const createWindow = () => {

    const win = new BrowserWindow({

        width: 800,

        height: 600,

        webPreferences: {

            preload: path.join(\_\_dirname, './app/renderer.js')

        }

    })

    let promise = win.loadFile('./app/index.html');

}

app.whenReady().then(() => {

    createWindow()

    app.on('activate', () => {

        if (BrowserWindow\.getAllWindows().length === 0){

            createWindow()

        }

    })

})

app.on('window-all-closed', () => {

    if (process.platform !== 'darwin')

        app.quit()

})

前两行是导入了两个electron模块：

首先 app 是一个处理应用程序生命周期和配置的模块。可以用它退出、隐藏和显示应用程序，以及获取和设置应用程序的属性。常用的有：

• ready : 应用程序初始化完成后触发的事件，接收到这个事件后可以进行初始化操作，例如创建窗口。

• window-all-closed : 所有窗口都已关闭时触发的事件，在这里可以终止整个应用程序。

** 有一点需要注意的是，在macOS系统中，关闭程序窗口并不会退出程序，而是保持后台运行。因此，在mac上收到这个事件一般也不会调用app.quit()，而是让应用程序继续保持在后台运行。但在其他操作系统上，关闭所有程序窗口一般意味着退出应用程序，因此一般收到这个事件后可以调用app.quit()方法来终止应用程序。**

• 还有很多其他事件，例如激活、退出、打印等。具体可以参考官方文档：https://www.electronjs.org/zh/docs/latest/api/app

BrowserWindow模块是用于创建和管理应用程序窗口的模块。在 Electron 中，浏览器窗口只能在app模块的ready事件触发后才会创建。常用的有：

• new BrowserWindow() : 创建新窗口

• .loadFile() : 加载文件到窗口页面

接下来导入了 Node.js 内置的 path 模块。

该模块提供了处理文件路径和目录路径的实用工具，并且可以方便地跨平台使用，因为路径分隔符在 Windows 和 Unix/Linux 上不同。通过这个模块，可以轻松地创建、解析、规范化和操作文件路径和目录路径。如下是该模块常用函数的示例：

path.join([…paths]): 将多个路径拼接为标准化的路径字符串。

path.resolve([…paths]): 以当前工作目录为起点，将多个路径解析为绝对路径。

path.basename(path[, ext]): 获取路径的最后一部分，可选地排除指定的扩展名。

path.dirname(path): 获取路径所在的目录路径。

在Node.js应用程序中， 常用path获取系统特定的路径分隔符，从而实现跨平台兼容性，并能快速方便地操纵文件路径。

接下来的3-12行代码中，定义了一个函数，该函数将一个新的 BrowserWindow 实例化，并配置了窗口的初始大小、位置和一些其他特性。

其中webPreferences选项可以指定添加preload脚本到渲染进程中，这里就指定将 ./app/renderer.js脚本作为一个preload载入。

最后调用了 win.loadFile('./app/index.html')方法，将HTML文件加载到新创建的窗口 win 中，loadfile()方法返回Promise对象，可以通过这个promise跟踪页面加载的状态。

14-22行代码就是创建了一个主窗口（createWindow()）并在 app 对象的 whenReady 事件上注册一个回调函数，以确保应用程序处于就绪状态时再创建窗口。在此之后，该代码还注册了一个名为 activate 的事件处理程序函数，以在没有打开窗口时重新打开主窗口。

最后一段代码则注册了一个名为 window-all-closed 的事件处理程序，在 Mac 平台上禁用此事件，否则将退出应用程序。 在其他平台上，当所有窗口都关闭时，该函数将终止应用程序。

最后使用npm start 运行程序，会出现：