【Electron】Electron入门实现

Electron 学习笔记

Electron 是一个开源框架，允许开发者使用网页技术（HTML、CSS 和 JavaScript）来构建跨平台的桌面应用程序。它由 GitHub 开发并维护，最初是为了支持开发 Atom 编辑器。Electron 结合了 Chromium（用于呈现网页内容）和 Node.js（用于与操作系统交互），因此开发者可以利用大量现有的网页开发技术和工具来构建桌面应用。

Electron 的主要特点有：

1. 跨平台支持：Electron 应用可以运行在 Windows、macOS 和 Linux 系统上。
2. 使用网页技术：开发者可以使用熟悉的 HTML、CSS 和 JavaScript 来创建应用程序的用户界面。
3. 与操作系统交互：通过 Node.js，Electron 应用可以与底层操作系统进行交互，执行文件系统操作、网络请求等。
4. 自动更新：Electron 提供了自动更新的功能，可以轻松地发布和分发应用的更新版本。
5. 打包和发布：Electron 提供工具将应用程序打包成独立的可执行文件，以便于分发。

0.前提条件

在使用 Electron 进行开发之前，需要安装 node.js，使用如下命令进行检查。

node -v
npm -v

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

1.Electron 应用程序的创建

1.1 使用脚手架

Electron 应用程序遵循与其他 Node.js 项目相同的结构，首先创建一个文件夹并初始化 npm 包。

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

npm init 初始化命令会设置项目的相关值，生成一个 package.json 的配置文件，但在 electron.js 项目中有以下两点需要注意：

1. entry point 是项目的入口文件，这个文件必须存在。
2. author 与 description 可以任意设置，但对于 electron 应用的打包来说，是必填项。

因此，实际的 package.json 应该是如下的内容：

{
   
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "this is a electron demo.",
  "main": "main.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "euansu",
  "license": "ISC"
}

然后，使用如下命令，将 electron 包安装到应用的开发依赖中。

npm install --save-dev electron
# 过程中安装 electron 可能会失败，执行如下两行命令
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install --save-dev electron

1.2 运行主进程

Electron 配置了入口文件，这个文件控制了主进程，，它运行在一个完整的 Node.js 环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程。

这里首先是创建入口文件，内容如下所示：

// 引入electron应用和浏览器窗口
const {
    app, BrowserWindow } = require('electron');

// 创建浏览器窗口
const createWindow = () => {
   
  // 浏览器窗口实例
  c