探索 Electron：将 Web 技能带入桌面应用

缠丝猫 · 2024-7-24 08:37:01

Electron是一个开源的桌面应用步调开发框架，它允许开发者利用Web技能（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用步调，它的出现极大地简化了桌面应用步调的开发流程，让更多的开发者能够利用已有的 Web 开发技能来构立功能强大且跨平台的应用步调，这对于提升开发服从和应用步调的快速交付具有重要意义。
目次
初识Electron
项目工程搭建
加载本地文件
完善窗口行为
配置自动重启
主进程与渲染进程
进程通讯
打包应用

初识Electron

Electron是一个由GitHub及众多贡献者组成的活跃社区共同维护的开源项目，其兼容Mac、Windows和Linux，可以构建出三个平台的应用步调，这里给出其官网和中文网，如下：

像我们平常耳熟能详的vscode就是利用electron来进行开发的，当然还要一些我们常用的工具都是采用electron进行开发，包罗我们现在利用的最新版的腾讯QQ，也是采用了electron框架技能实现多端跨平台运行，可以说electron算是一个生态完善、功能齐备、系统简便的框架了。

对于创建常见的桌面GUI工具有以下各种框架，这里简单说一下各种框架之间的优缺点：
名称语言优点缺点QTC++跨平台、性能好、生态好依赖多，步调包大PyQTPython底层集成度高、易上手授权问题WPFC#类库丰富、扩展灵活只支持Windows，步调包大WinFormC#性能好、组件丰富、易上手只支持windows，UI差SwingJava基于AWT，组件丰富性能差，UI一般NW.jsJS跨平台性好，界面美观底层交互差、性能差，包大ElectronJS相比NW发展更好底层交互差、性能差，包大CEFC++性能好，灵活集成，UI美观占用资源多，包大技能是为业务服务的，选择合适的最重要，如下对框架进行一个概述：
  1）底层依赖+调用：CEF、QT、Swing
  2）UI美观：Electron（NW.js）、PyQT
  3）跨平台：Swing（JAVA）、PyQT（Python、C++）、Electron（前端）
  Electron技能架构：Electron的核心组成重要有以下三个部分组成，这里对这三个部分进行简述：
Chromium：渲染引擎，负责表现HTML、CSS和JS内容，提供了现代浏览器的功能
  Node.js：后端引擎，提供访问本地文件系统和操作系统功能的本领
  Native apis：操作系统或平台提供的原生应用步调接口(API)用于与硬件和系统功能进行交互

Electron说明：它其实就是一个及时的框架，将chromium和node.js整合一个运行环境当中，它允许我们利用web技能来构建桌面应用步调，并可以调用一些api来对差别操作环境下的系统进行相应操作，终极实现一个跨平台并且兼容性极好的桌面应用。
Electron工作流程：Electron开发桌面端应用是怎样完成团体的工作呢？这里做一个简单的概述，从下图所示可以看出，桌面应用其实就是运行在差别操作系统上的一款软件，当前我们要讨论的就是在底层系统运行上层发生的一些行为：

具体流程包罗初始化项目、创建基本文件结构、编写主进程脚本和前端页面、配置package.json以及启动和调试应用，主进程可以看做是 package.json 中 main 属性对应的文件，一个应用只会有一个主进程，只有主进程可以进行GUI的API操作；渲染进程中Windows展示的界面通过渲染进程表现，一个应用可以有多个渲染进程：

项目工程搭建

接下来我们开始搭建electron项目了，首先我们先打开electron官网，对于新手来说直接阅读官网是一个比较不错的选择，这里我们点击官网的快速入门，往下滑动找到我们想要的信息。
第一步：首先我们先查阅一下自身电脑有无安装node环境，没有的话请参考我之前的文章进行安装：地址，安装最新稳定版本的node即可：

第二步：通过 npm init 下令去初始化包，这里就不先直接上框架讲解了，下一篇文章在说，初始化包下令直接一起回车即可：

第三步：接下来我们就需要开始安装electron相干包了，下令如下，安装完成之后配置一下start：

npm install --save-dev electron

复制代码

第四步：在根目次创建main.js文件用作electron的入口文件，然后编写相应的基础代码，如下：

// app应用；BrowserWindow 窗口
const { app, BrowserWindow } = require('electron')
// 当app准备完毕，创建窗口
app.on('ready', () => {
new BrowserWindow({ // 窗口的配置
width: 800,
height: 600
})
})

复制代码

接下来直接终端实行 npm start 下令，直接运行项目，如下可以看到桌面应用已经启动了，其自带一些桌面的菜单和相干基础按钮：

这里我们可以将自带的导航栏隐蔽掉，并且在空白页面中内嵌一个别的网站的网页，如下：

// app应用；BrowserWindow 窗口
const { app, BrowserWindow } = require('electron')
// 当app准备完毕，创建窗口
app.on('ready', () => {
const win = new BrowserWindow({ // 窗口的配置
width: 800,
height: 600,
autoHideMenuBar: true, // 自动隐藏菜单栏
})
win.loadURL('http://www.baidu.com') // 加载页面
})

复制代码

呈现的结果如下所示：

当然关于窗口的配置还有很多相干的配置项，各人可以自信去官网相识，这里就不再逐一介绍了，背面讲解项目碰到相应问题需要解决的时候，再讲解相干的配置：

加载本地文件

上文我们讲解到了利用electron运行项目以及利用了一个线上的链接进行项目标实现，接下来我们开始编写怎样在electron中加载本地文件，首先我们先创建一下src文件，新建一个html和css文件，然后在文件中编写相应的内容，如下：

然后我们调用BrowserWindow中的函数加载本地文件，如下所示：

// app应用；BrowserWindow 窗口
const { app, BrowserWindow } = require('electron')
// 当app准备完毕，创建窗口
app.on('ready', () => {
const win = new BrowserWindow({ // 窗口的配置
width: 800,
height: 600,
autoHideMenuBar: true, // 自动隐藏菜单栏
})
win.loadFile('./src/index.html') // 加载页面
})

复制代码

终极呈现的结果如下所示，可以看到本地的文件已经在桌面端中加载出来了：

假如想像浏览器那样利用控制台的话，可以通过快捷键 ctrl + shift + i 打开控制台，如下所示，假如想刷新页面内容的话和浏览器一样，也是f5即可：

由于vscode也是通过electron开发的嘛，所以说vscode也是有控制台的，如下这个就是vscode的控制台：

然后我们打开控制台，一开始会报出如下的告诫，说是内容安全计谋的问题，这里我们在hmtl文件加上如下代码即可消除告诫：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';" />

复制代码

完善窗口行为

在window系统下我们开启一个应用，关闭之后是直接在任务栏中消失掉了，而mac系统照旧会在任务栏中保留的，为了匹配差别系统下的利用风俗，这里我们也要对electron进行相应的代码配置，如下：

// app应用；BrowserWindow 窗口
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({ // 窗口的配置
width: 800,
height: 600,
autoHideMenuBar: true, // 自动隐藏菜单栏
})
win.loadFile('./src/index.html') // 加载页面
}
// 当app准备完毕，创建窗口
app.on('ready', () => {
createWindow()
})
// 当所有的窗口都被关闭时，并且还不是苹果系统，则直接退出程序
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// 当应用被激活时，判断当前窗口的数量，如果是0就创建窗口
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

复制代码

配置自动重启

我们每次对代码进行修改都需要手动去重启electron应用才可以看到新的结果，这对编写代码的服从来讲是很底下的，所以这里我们需要配置一下自动重启的配置，终端实行如下下令：

npm i nodemon -D

复制代码

然后我们在package.json文件中配置一下启动下令如下：

"scripts": {
"start": "nodemon --exec electron ."
}

复制代码

当我们在main.js文件中打印一下可以看到会被及时监听到：

但是我们修改本地文件，页面是不会发生变革的，每次还需要我们手动去ctrl + r 逼迫刷新一下才行

这对于开发者来说照旧不太友好，所以这里我们需要一下nodemon.json规则才行，如下我们在根目次创建 nodemon.json 文件，内容如下：

{
"ignore": [
"node_modules",
"dist"
],
"restartable": "r",
"watch": ["*.*"],
"ext": "html,js,css"
}

复制代码

接下来当我们开始编写本地文件的时候，会自动重启electron桌面项目进行及时刷新：

主进程与渲染进程

在Electron中，主进程(Main Process)和渲染进程(Renderer Process)是两个核心概念，它们在应用步调中扮演着差别的角色和功能：
主进程(Main Process)：主进程是整个 Electron应用步调的核心，负责管理应用的生命周期和重要的系统交互,通常一个Electron应用步调只有一个主进程，负责创建应用窗口(BrowserWindow)，处理系统事件(如文件系统访问、进程间通讯等)，以及实行与操作系统交互的重要任务。
渲染进程(Renderer Process)：渲染进程是Electron应用步调中负责展示界面和与用户交互的部分，每个应用窗口都运行在单独的渲染进程中，渲染进程通过Web页面(通常是用 HTML、CSS 和 JavaScript 编写的)来实现应用的用户界面。
如下通过一个简单的代码进行示例：