深入浅出Electron

1、electron基本介绍

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

2、electron的基本使用

2.1、创建一个 electron 项目

在使用Electron进行开发之前，您需要安装 Node.js，最低工作版本为 14.x，安装低于 14 的版本在后面的打包过程中可能会报错。

（注意，因为 Electron 将 Node.js 嵌入到其二进制文件中，你应用运行时的 Node.js 版本与你系统中运行的 Node.js 版本无关。）

Electron 应用程序遵循与其他 Node.js 项目相同的结构，首先创建一个初始 npm 项目：

mkdir my-electron-app && cd my-electron-app
npm init

设置entry point为 main.js，author 与 description 可为任意值，但对于应用打包是必填项。

package.json 文件应该类似如下：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}

然后，将 electron 包安装到应用的开发依赖中。

npm install --save-dev electron

在 package.json配置文件中的scripts字段下增加一条start命令：

{
  "scripts": {
    "start": "electron ."
  }
}

在项目根目录下创建一个空白的 main.js 文件。任何 Electron 应用程序的入口都是 main 文件。 这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程。

执行 npm start命令运行 electron 应用，Electron 将依据应用中 package.json配置下main字段中找到对应的入口文件。

在可以为我们的应用创建窗口前，我们需要先创建加载进该窗口的内容。 在Electron中，各个窗口显示的内容可以是本地HTML文件，也可以是一个远程url。

比如我们创建一个名为index.html的文件：