electron编译环境搭建和第一个桌面应用例子

前言

Electron是基于Chromium和Node.js实现的，所以开发人员所需要使用到的前端技术主要包括以下方面：

1、Html、CSS、JavaScript、ES6

2、前端开发工具Vue、Angular、React等的一种

3、其他网络、缓存、通讯、系统、跟踪等前端技术

4、对Vscode编辑器的熟悉

Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

下面介绍环境搭建。

1 安装node js

在使用Electron进行开发之前，需要安装 Node.js。建议使用最新的LTS版本。下载后直接安装，如果要更换路径，在安装时改下即可。

要检查 Node.js 是否正确安装，请在您的终端输入以下2个命令：

node -v
v18.16.0npm -v
9.5.1

这两个命令应输出了 Node.js 和 npm 的版本信息。

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

2 npm换源

node js通过npm下载不同的模块，但是可能会因为网络原因下载缓慢或失败，建议换成国内源：

npm config set registry https://registry.npm.taobao.org# 检查是否成功切换
npm config get registry
https://registry.npm.taobao.org/

3 安装electron

建议先装cnpm，再通过它安装electron，不然直接装electron常常遇到各种失败，cnpm 是 npm 的定制版本，淘宝团队创建，其使用的是淘宝镜像，适用于中国大陆的开发者。

请使用管理员权限打开终端，再输入安装命令，否则可能出现各类权限问题。

可以全局安装，也可以实际进行项目时再在对应的工程下装，这边只用一个版本，采用的是全局安装，后续开发会方便点。

npm i cnpm -g
# -g全局安装
cnpm install electron -g

查看版本信息，完成安装

electron -vv24.1.2

4 第一个桌面应用

4.1 基础知识

一个基本的 Electron 程序主要由以下几部分组成:

主进程（Main Process）： Electron 应用程序的主进程，负责控制整个应用程序的生命周期、处理系统级别的操作以及其他一些基础功能，主进程通常通过 Node.js API 实现，例如创建和启动渲染进程，处理菜单和快捷键事件等。
渲染进程（Renderer Process）： Electron 应用程序的渲染进程，负责显示应用程序的用户界面和处理用户交互，渲染进程通常通过 Web 技术实现，例如 HTML，CSS 和 JavaScript，渲染进程可以通过与主进程通信来执行任务。
页面（Page）：渲染进程所显示的页面，通常由 HTML、CSS 和 JavaScript 构成，可以通过 HTML 中的 DOM（Document Object Model）来访问和操作。
资源文件（Assets）：包括应用程序所需的各种文件（例如图像、样式表、JavaScript 库等）以及 Electron 应用程序的配置文件（例如 package.json，main.js 等）。

基本规则

GUI模块或者系统底层的模块只可以在主进程中使用。要使用这些模块，你应当很熟悉主进程vs渲染进程脚本的概念。

主进程脚本看起来像个普通的nodejs脚本。
渲染进程和传统的web界面一样，除了它具有使用node模块的能力。

主进程

在 Electron 里，运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。

渲染进程

由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。

在一般浏览器中，网页通常会在沙盒环境下运行，并且不允许访问原生资源。然而，Electron 用户拥有在网页中调用 io.js 的 APIs 的能力，可以与底层操作系统直接交互。

主进程与渲染进程的区别

主进程使用 BrowserWindow 实例创建网页。
每个 BrowserWindow 实例都在自己的渲染进程里运行着一个网页。
当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。

由于在网页里管理原生 GUI 资源是非常危险而且容易造成资源泄露，所以在网页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。

在 Electron，我们提供用于在主进程与渲染进程之间通讯的 ipc 模块。并且也有一个远程进程调用风格的通讯模块 remote。

Electron 应用的目录结构

your-app/
|-- package.json
|-- main.js
|-- index.js

package.json的格式和 Node 的完全一致，并且那个被 main 字段声明的脚本文件是你的应用的启动脚本，它运行在主进程上。
main.js 应该用于创建窗口和处理系统时间。
如果 main 字段没有在 package.json 声明，Electron会优先加载 index.js。

来源：Electron基础学习之Hello world！ - 知乎 (zhihu.com)

4.2 具体例子

参考了官方教程： https://www.electronjs.org/zh/docs/latest/tutorial/quick-start 和 https://zhuanlan.zhihu.com/p/145219052?from_voters_page=true

（1）初始化

在终端命令行输入：

// 手动输入信息，如果嫌弃麻烦直接npm init -y 可以采用默认模板
npm init

init初始化命令会提示您在项目初始化配置中设置一些值为本教程的目的，有几条规则需要遵循：

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

初始化后，会生成package.json文件，具体长这样：

{"name": "hello-electron","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}

之后要通过npm启动，需要在"scripts"中添加一行启动命令，记得里面的逗号不能少：

,"start": "electron ./index.html"

具体如下：

{"name": "hello-electron","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "electron ./index.html"},"keywords": [],"author": "","license": "ISC"
}

如果不通过npm启动，直接用electron程序执行index.js脚本效果也是一样：electron index.html

（2）安装electron依赖

然后，将 electron 包安装到应用的开发依赖中，注意，如果之前‘‘第三步安装electron‘’已经全局安装了electron，这一步可以省略。

npm install --save-dev electron

（3）新建main.js主进程文件

1）先新建一个main.js文件，输入代码如下：

var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
var win = null;app.on('ready',function(){ win = new BrowserWindow({ webPreferences:{nodeIntegration: true} }); win.loadFile('index.html'); // 这边loadFile如果换成win.loadURL('http://www.baidu.com');，就变成一个精简版的浏览器了win.on('closed',function(){win=null}); 
});
app.on('window-all-closed', function(){app.quit();
});

这个代码也够简单的。不过对于不习惯JavaScript语法的同学，其实也没那么简单，没关系，先把代码运行起来，一定要注意这里的括号问题，可不要少了括号。

（4）新建index.html文件

代码如下：

<html><head><title> 窗口标题</title></head><body><div>hello world!</div></body>
</html>

（5）运行

在终端命令行输入：

npm start

运行成功。

4.3 打包程序

有很多种打包方式，这边用electron-builder。

（1）安装electron-builder

cnpm install electron-builder -g# 查看版本，看是否安装成功
electron-builder --version
23.6.0

（2）修改配置文件package.json

修改配置文件package.json，增加构建选项和依赖版本，具体如下，实际使用时请务必删除里面注释的内容，json中不支持注释方法，有特定的方法如增加 “comment” 属性，但是不建议。

// scripts增加这个构建工具字段，这边没有把全部内容打出来
"scripts": {"dist": "electron-builder"
},
// 增加以下构建字段
"build": {"productName": "electron-hello",   // 安装包文件名"directories": {"output": "dist"  // 安装包生成目录},"nsis": {"oneClick": false,  // 是否一键安装"allowToChangeInstallationDirectory": true    // 允许用户选择安装目录}
},
"devDependencies": {// 可以用^符号表示您安装的是 electron 包的 24.x.x 版本中的最新版本，如^24.1.2// 但是这边我试了会报错"  ⨯ Cannot compute electron version from installed node modules - none of the possible electron modules are installed.""electron": "24.1.2","electron-builder": "23.6.0"
}

devDependencies需要增加版本号，避免出现下面的问题：

  ⨯ Cannot compute electron version from installed node modules - none of the possible electron modules are installed.

（3）构建应用程序

在命令行中运行

npm run dist

命令，electron-builder 会自动构建和打包您的应用程序。

构建结果：

> hello-electron@1.0.0 dist
> electron-builder• electron-builder  version=23.6.0 os=10.0.19045• loaded configuration  file=package.json ("build" field)• writing effective config  file=dist\builder-effective-config.yaml• packaging       platform=win32 arch=x64 electron=24.1.2 appOutDir=dist\win-unpacked• default Electron icon is used  reason=application icon is not set• downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z size=5.6 MB parts=1• downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z duration=5m44.666s• building        target=nsis file=dist\electron-hello Setup 1.0.0.exe archs=x64 oneClick=false perMachine=false• downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z size=1.3 MB parts=1• downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z duration=2m1.633s• downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z size=731 kB parts=1• downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z duration=42.355s• building block map  blockMapFile=dist\electron-hello Setup 1.0.0.exe.blockmap

为了避免构建过程中下载依赖包缓慢，建议从 https://github.com/electron/electron/releases 下载最新发布所需的稳定版electron-vxxx-win32-x64.zip（根据平台选择），放入以下目录，不用解压

C:\Users\用户\AppData\Local\electron\Cache

从 https://github.com/electron-userland/electron-builder-binaries/releases/ 下载所需要的包。

根据需要把对应的压缩包复制到以下目录，比如这次需要的是winCodeSign，整个复制到Cache目录下，并解压到当前目录

C:\Users\用户名\AppData\Local\electron-builder\Cache

（4）安装并运行

dist目录下就是打包好的安装包，直接双击安装到所有用户，然后运行即可。