electron学习

一、Electron概述

1、Electron概念

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

2、Electron的优势和特点

2.1低门槛的学习曲线

Electron使用JavaScript和Web技术进行开发，这使得它的学习曲线相对较低。对于已经熟悉JavaScript的开发者来说，掌握Electron的开发技术和工具并不难，可以更快地上手并进行应用程序的开发。

2.2跨平台特性

Electron能够实现跨平台的应用程序开发，无论是在Windows、macOS还是Linux平台上，都可以构建出相同的应用程序。这大大简化了开发工作，减少了开发团队的工作量，并且具备更广泛的应用和推广范围。

2.3丰富的生态系统

Electron拥有庞大的社区和丰富的生态系统，开发者可以轻松地找到各种插件、工具和资源来辅助开发工作。

2.4灵活的界面设计

Electron中使用HTML和CSS来进行界面的设计和布局，这使得开发者可以利用Web前端技术的优势创建美观而且高度可定制的用户界面。

二、Electron 项目开发实践

1、环境准备

1.1 Node.js 环境

nodejs 版本选择最新的LTS版本，也就是 v18.18.2

1.2 安装 Electron

安装 Electron 是入门前比较麻烦的一步，主要是因为国内的网络问题，解决方案有两种

使用国内代理
使用科学上网
网上下载node包，修改源代码

使用代理

npm install -g cnpm --registry=https://registry.npmmirror.com

cnpm i electron

科学上网

开启科学上网直接运行命令

npm i electron

修改源码

官方给了下载地址和具体步骤
[https://github.com/electron/electron/releases]

亲测这个方法在electron 11.2.0之前可以用，后续版本虽然显示的是安装成功，但程序运行时报错。

在开启了科学上网的情况下，仍然不能安装成功，这就要区分公司网络和家庭网络，大部分公司内部网络本身就有代理，所以导致即使按照上面的操作也无法安装成功，这时候把切换到手机热点再去安装就可以了。

3、初始化项目

3.1 初始化项目结构

使用npm init 命令初始化 package.json 文件，安装electron后添加main.js

console.log('Hello word')

package.json 文件配置运行命令

"scripts": {
    "dev": "electron ."
 }

执行 npm run dev

3.2 主进程与渲染进程基本概念

主进程

主进程是从你的 package.json 文件中的 “main” 脚本开始的进程。主进程运行的JavaScript可以直接调用操作系统的本地功能，因为它可以访问Node.js标准库。主进程负责创建和控制浏览器窗口，管理应用程序的生命周期，以及运行应用程序的主要功能。主进程可以创建多个渲染进程，每一个都是一个新的浏览器窗口或web页面。

渲染进程

渲染进程负责运行用户界面的JavaScript。每个Electron窗口都在其自己的渲染进程中运行。在默认情况下，渲染进程不能使用Node.js或Electron API，因为这可能会产生安全问题。这类似于在传统的网页开发中，浏览器的一个标签页。它运行页面的JavaScript，处理用户界面。每个Electron窗口在其自己的渲染进程中运行，类似于浏览器为每个标签页分配了自己的进程。

3.3 创建主进程和渲染进程

main.js

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('node:path')
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  })
  win.loadFile('./views/index.html')
}

app.whenReady().then(() => {
  ipcMain.handle('ping', () => 'pong')
  createWindow()
})

3.4 构建并运行应用

创建 views 文件夹来存放 html 文件，存放渲染进程需要的界面。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
	<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
</head>

<body>
	<h1>来自 Electron 渲染器的问好！</h1>
	<p>👋</p>
	<p id="info"></p>
</body>

</html>

3.5 主进程与渲染进程交互

在main.js 变更 win

const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
})

preload.js

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('versions', {
    node: () => process.versions.node,
    chrome: () => process.versions.chrome,
    electron: () => process.versions.electron,
    // 除函数之外，我们也可以暴露变量
    ping: () => ipcRenderer.invoke('ping')
})

index.html 增加script 内容

const information = document.getElementById('info')
information.innerText = `获取到了系统信息 (v${window.versions.chrome()}), Node.js (v${window.versions.node()}), and Electron (v${window.versions.electron()})`


const func = async () => {
    const response = await window.versions.ping()
    console.log(response) // 打印 'pong'
  }
  
func()

运行如下

4、应用打包发布（macos）

运行官方给出的打包命令，这一步国内环境也能正常安装，没什么难度。

npm install --save-dev @electron-forge/cli

安装好打包依赖后在package.json 添加命令

"scripts": {
    "dev": "electron .",
    "make": "electron-forge make"
}

运行 npm run make

构建失败了，经过科学上网处理后执行

成功后根目录多了一个out 文件夹，里面有mac平台的一个应用程序包。

直接打包出来的app是不能运行的，在mac平台需要注册开发者账户，配置相应的app信息，通过校验后才能运行相应的app。

三、Electron 生态和资源

1、 Electron 插件和库

Electron Forge

一个用于创建和打包 Electron应用的命令行工具，帮助开发者更容易地初始化、调试和发布应用。

Electron Builder

一个用于打包和发布 Electron 应用的插件，支持多平台的构建和自动更新。

Electron Store

一个简化操作和存储应用程序设置的库，提供了易于使用的 API。

Electron Packager

一个命令行工具，用于将 Electron 应用程序打包为可执行文件，支持多种操作系统和架构。

Electron-Webpack

一个用于将 Electron 应用程序与 Webpack 构建工具集成的插件，帮助开发者实现模块化和代码分割等功能。

2、学习资源和文档

electron api文档
https://www.electronjs.org/docs/latest/api/app
vue-cli-plugin-electron-builder
https://github.com/nklayman/vue-cli-plugin-electron-builder
electron-build文档
https://www.electron.build/
electron-updater文档
https://www.electron.build/auto-update.html

四、总结和展望

1、不足

较高的资源消耗，Electron 桌面应用程序需要同时运行一个 Chromium 实例和一个 Node.js 实例，这会占用相对较高的系统资源，使应用程序的内存占用和启动时间较高。
app包较大，由于 Electron 框架需要打包包含 Chromium 引擎和 Node.js 运行时的全部文件，导致应用程序的体积较大，这可能会增加用户的下载和安装时间。
性能问题，Electron 应用程序使用的是完整的 Chromium 引擎，对于复杂的应用和大规模数据处理，会有一些性能问题。

2、发展前景

跨平台, Electron 可以同时在 Windows、macOS 和 Linux 等不同操作系统上运行。这使得开发人员可以更高效地开发和部署应用，覆盖更广泛的用户群体。
前端技术栈, Electron 基于 Web 技术栈，如 HTML、CSS 和 JavaScript，这些技术已经被广泛接受和采用，拥有庞大的开发人员社区和丰富的生态系统。开发人员可以利用已有的前端技能和资源来构建强大的桌面应用程序。
成熟的应用, 许多知名公司和应用程序选择了 Electron 作为构建桌面应用程序的首选框架，如 Visual Studio Code、QQ客户端等。这些成功案例验证了 Electron 的可靠性和实用性。