2023 最新前端 Electron Gui 实现桌面应用开发详细教程（基础篇）_electron 淘宝镜像

Electron 基本概述

Electron 是利用 web 前端技术进行桌面应用开发的一套框架，它是由 Github 开发的，利用HTML、CSS、JavaScript 来构建跨平台桌面应用程序的一个开源库。Electron 通过将 Chromium 和 Node.js 合并到同一个运行时环境中，并将其打包成 Mac、Windowns、Linux 系统下的应用来实现这一目的。

Electron 官方网站：https://www.electronjs.org/

chrome 和 chromium 用户界面几乎一摸一样，但是还是有一些差异的。比如 chrome 的系统标题和边框是被默认禁用的，而 chromium 是默认开启的。另外chrome地址栏里有分享功能，我们可以分享网站，但是 chromium 没有这个功能。

界面的细微差别主要是这两个浏览器面向的用户是不一样的，一般来说使用 chrome 的用户是普通用户，用它来浏览网页使用，而使用 chromium 大部分是极客、开发人员和体验新功能的的用户。

1. Chromium：支持最新特性的浏览器。
2. Node.js：javascript运行时，可实现文件读写等。
3. Native APls：提供统一的原生界面能力。
1
2
3

主进程 Main Process & 渲染进程 Renderer Process & IPC 通信机制

渲染进程无法调用 计算机系统资源，只能由主进程去调用系统资源。

Main Process 主进程：一个应用只会有一个主进程，只有主进程才能进行 GUI 的 API 操作。

Renderer Process 渲染进程：一个应用可以有一个主进程，渲染进程才是 GUI 的表现。

Electron 环境安装

验证 node 是否安装成功

在 cmd 窗口：node -v 如果出现版本号表示安装成功。

C:\Users\HP>node -v
v16.10.0
1
2

在 cmd 窗口：npm -v 查看 npm 的版本

C:\Users\HP>npm -v
7.24.0
1
2

安装 cnpm 采用淘宝镜像安装 electron

npm install cnpm -g  --registry=https://registry.npm.taobao.org
1

cnpm : 无法加载文件 E:\Environment\NodeJs-16.10.0\node_global\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=13 5170 中的 about_Execution_Policies。

解决方案：打开 PowerShell 管理员模式

PS C:\Windows\system32> set-ExecutionPolicy RemoteSigned
1

在 cmd 命令窗口：cnpm -v 查看版本信息

PS C:\Users\HP\Desktop\JS-EXE> cnpm -v
cnpm@9.0.1 (E:\Environment\NodeJs-16.10.0\node_global\node_modules\cnpm\lib\parse_argv.js)
npm@8.19.4 (E:\Environment\NodeJs-16.10.0\node_global\node_modules\cnpm\node_modules\npm\index.js)
node@16.10.0 (E:\Environment\NodeJs-16.10.0\node.exe)
npminstall@7.5.1 (E:\Environment\NodeJs-16.10.0\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=E:\Environment\NodeJs-16.10.0\node_global
win32 x64 10.0.19044
registry=https://registry.npmmirror.com
1
2
3
4
5
6
7
8

安装 electron，全局安装

打开cmd窗口，在命令窗口输入命令下载安装：

cnpm install electron -g
1

当然可以直接 npm 下载

npm install electron -g
1

All packages installed (70 packages installed from npm registry, used 42s(network 29s), speed 68.43KB/s, json 68(765.94KB), tarball 1.2MB, manifests cache hit 0, etag hit 0 / miss 0)
[electron@23.1.1] link E:\Environment\NodeJs-16.10.0\node_global\electron@ -> E:\Environment\NodeJs-16.10.0\node_global\node_modules\electron\cli.js
1
2

在cmd命令窗口中输入命令：electron -v 查看版本信息

PS C:\Users\HP\Desktop\JS-EXE> electron -v

v23.1.1
1
2
3

启动 electron 快捷会话窗

PS C:\Users\HP\Desktop\JS-EXE> electron -version
1

环境安装异常

登录淘宝 NPM 镜像网站（https://npm.taobao.org/）进入 electron 镜像

选择你计算机操作系统相应的版本：Window 系统 x64 版本 安装

解压完成

下载完毕，解压压缩包，进入demo项目的 node_modules > electron 文件夹，创建 dist 文件夹，将下载的 zip 包里的文件复制到 dist 文件夹下，注意目录结构

推荐配置环境变量

测试结果：

PS C:\Users\HP\Desktop\唤醒手腕\electron-2023-03-02> electron -v
PS C:\Users\HP\Desktop\唤醒手腕\electron-2023-03-02> 
v23.1.1
1
2
3

让 electron 全局读取到包：把 electron文件夹 放到 node_global/node_modules 目录下

require 找包流程

当主程序执行到 const { app, BrowserWindow } = require(‘electron’) 这句的时候，会首先在主程序 main.js 同级目录下查找 node_modules 目录。
然后在 node_modules 目录下查找 electron 包目录。
然后在 electron 包目录下的 package.json 文件中找到 main 属性，main 属性的值就是要加载的文件。
“main”: “./lib/xxx.js”
如果 electron 包目录下没有 package.json 文件，或者 package.json 文件中没有 main 属性，则会默认加载electron 包目录下的 index.js 文件。
如果以上方式没有找到，然后会去全局查找 node_global/node_modules 文件夹。
1
2
3
4
5
6

安装 Snippets 插件

A collection of handy ElectronJS snippets.

创建 Hello World

初始化 npm 项目

Electron 应用基于 npm 搭建，以 package.json 文件作为入口点。 首先创建一个文件夹，然后在其中执行 npm init 初始化项目。

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

这条命令会帮您配置 package.json 中的一些字段。然后将 Electron 安装为您项目的 devDependencies，即仅在开发环境需要的额外依赖。

package.json：入口点 应当是 main.js (您很快就会创建它) author (作者)、license (开源许可证) 和 description (描述) 可以为任意内容，不过在晚些的 打包应用程序 步骤中可能是需要的。

为什么 ELECTRON 是 DEVDEPENDENCY?

您的应用需要运行 Electron API，因此这听上去可能有点反直觉。 实际上，打包后的应用本身会包含 Electron
的二进制文件，因此不需要将 Electron 作为生产环境依赖。

安装 electron

npm install electron --save-dev
1

在初始化并且安装完 Electron 之后，您的 package.json 应该长下面这样。 文件夹中会出现一个 node_modules 文件夹，其中包含了 Electron 可执行文件；还有一个 package-lock.json 文件，指定了各个依赖的确切版本。

package.json

{
	"name": "my-electron-app",
	"version": "1.0.0",
	"description": "Hello World!",
	"main": "main.js",
	"author": "Jane Doe",
	"license": "MIT",
	"devDependencies": {
	  	"electron": "19.0.0"
	}
}
1
2
3
4
5
6
7
8
9
10
11

添加 .gitignore 文件

.gitignore 指定了哪些文件不需要 Git 追踪版本。 建议您复制一份 GitHub 的 Node.js gitignore 模板 到您项目的根目录，以避免将 node_modules 文件夹提交到版本控制系统中。

运行 Electron 应用

您在 package.json 中指定的脚本文件 main 是所有 Electron 应用的入口点。 这个文件控制 主程序 (main process)，它运行在 Node.js 环境里，负责控制您应用的生命周期、显示原生界面、执行特殊操作并管理渲染器进程 (renderer processes)

因为 Electron 的主进程是一个 Node.js 运行时，您可以使用 electron 命令执行任意 Node.js 代码（甚至将其用作 REPL）。 要执行这个脚本，在 package.json 的 scripts 字段中添加一个 start 命令，执行内容为 electron . 。 这个命令会告诉 Electron 在当前目录下寻找主脚本，并以开发模式运行它。

{
	"name": "my-electron-app",
	"version": "1.0.0",
	"description": "Hello World!",
	"main": "main.js",
	"author": "Jane Doe",
	"license": "MIT",
	"scripts": {
	  	"start": "electron ."
	},
	"devDependencies": {
	  	"electron": "^19.0.0"
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

npm run start
1

将网页装载到 BrowserWindow

在 Electron 中，每个窗口展示一个页面，后者可以来自本地的 HTML，也可以来自远程 URL。 在本例中，您将会装载本地的文件。 在您项目的根目录中创建一个 index.html 文件，并写入下面的内容：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Hello from Electron renderer!</title>
	</head>
	<body>
		<h1>Hello from Electron renderer!</h1>
		<p>声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】