前言
Electron是什么？
Electron 是一个跨平台的、基于 Web 前端技术的桌面 GUI 应用程序开发框架。
支持 Web 技术开发桌面应用，其本身是基于 C++ 开发的，GUI 核心来自于 Chrome，而 JavaScript 引擎使用 v8。
这使得我们使用前端技术就可以开发出属于自己的第一个桌面应用。
目前市场上很多成熟的桌面端应用都是使用Electron开发的。例如：VScode、有道云、飞书等。
Electron解决了什么？
1、一套代码可以在多个平台运行。
Electron 兼容 Mac、Windows 和 Linux，一套代码可以构建出三个平台的应用程序。
2、开发简单便捷，而且前端人员自己就可以独立开发。
Electron 基于 Chromium 和 Node.js, 可以使用 HTML、CSS、JavaScript 便捷开发并构建应用。
3、混合开发，降低开发难度，减少开发时间。
系统底层C++ 插件可以编译成 Node 文件供 Electron 直接使用。
涉及到的技术栈
使用Electron开发桌面应用，会用到哪些技术栈呢？
1、Electron：提供桌面端应用能力。
2、Nodejs：用于本地文件系统和操作系统，或提供 server 能力。
3、html、css、javascript：可以使用 React、Vue 等编译后的文件。
4、打包工具：webpack、vite 等。
都是前端技术栈，唯一不同的是，需要学习 Electron。
废话不多说，直接 hello world!
本地环境
搭建 Node 环境即可
node -v
npm -v
注意：Electron与Nodejs的各自版本必须要对应，具体两者对应版本见版本发布。
我们用 Electron 官方提供的最新稳定版本进行演示。
Electron 19.0.8
Node 16.14.2
Hello World
克隆运行代码
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
这样项目就启动成功了。。。
代码解析
main.js 是应用的入口文件。里面包含了应用启动完成、窗口创建等。
入口文件的路径配置在 package.json 中。
const {
app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('index.html')
// mainWindow.webContents.openDevTools()
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
页面的入口文件 html，按照前端的正常开发就可以。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
<link href="./styles.css" rel="stylesheet">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>窗口创建成功</p>
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
以上就是一个简单桌面端应用的代码。
桌面端开发，核心是开发独立窗口。 那么如何开发独立窗口呢？
BrowserWindow
BrowserWindow 是用来创建、管理窗口的 Native API。
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('index.html')
可以自定义设置窗口的宽度，实现窗口尺寸的调整（位置也可以调整，详见 setBounds、setPosition）。
loadFile 用于加载本地文件，也可以直接加载网络地址，如：
mainWindow.loadURL('https://github.com');
如果想像浏览器那样可以查看、调试运行的代码，就打开 DevTools。
mainWindow.webContents.openDevTools()
页面html是不能直接使用端的能力的，所以Electron提供了 preload。
Preload
preload 可以通过加载调用端能力的 Api 文件，从而使用端的能力。
端的能力是由 Nodejs、Electron 提供的，如下方 process。
// preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
// 通过getElementById赋值process信息
replaceText(`${
type}-version`, process.versions[type])
}
})
《快速拥有自己的第一个Electron桌面应用》就介绍到这里。
结语
感谢您的阅读！希望本文带给您有价值的信息。
如果对您有帮助，请「点赞」支持，并「关注」我的主页获取更多后续相关文章。同时，也欢迎「收藏」本文，方便以后查阅。
写作不易，我会继续努力，提供有意义的内容。感谢您的支持和关注！
