在当今的技术时代，桌面应用程序在我们的日常生活中具有巨大的意义，可以提供增强的用户体验并充分利用本地计算机的功能。传统上，开发桌面应用程序需要特定于平台的编程语言和框架方面的专业知识，这对希望涉足桌面开发的 Web 开发人员构成了挑战。然而，Electron.js 有效地解决了这一挑战。
Electron.js 以前称为 Atom Shell，是一个源自 GitHub 的开源框架。它使开发人员能够使用熟悉的 Web 技术（例如 HTML、CSS 和 JavaScript）构建跨平台桌面应用程序。通过弥合 Web 开发和桌面应用程序开发之间的差距，Electron.js 为开发人员创造了创建强大且功能丰富的桌面应用程序的新机会。
Electron.js 的架构
为了了解 Electron.js 的工作原理，让我们仔细看看它的架构。 Electron.js 结合了两个主要组件：Chromium 渲染引擎和 Node.js 运行时。
-
Chromium 渲染引擎 − Electron.js 使用与流行的网络浏览器 Google Chrome 相同的渲染引擎 — Chromium。这使得 Electron.js 应用程序能够以与 Web 浏览器相同的功能和性能来渲染和显示 Web 内容。
-
Node.js 运行时 − span>Electron.js 集成了 Node.js 运行时，提供对底层操作系统的访问和本机 API。这意味着开发人员可以充分利用 Node.js 的全部功能，并利用其广泛的模块和库生态系统来构建桌面应用程序。
Electron.js 利用多进程架构，其中每个 Electron.js 应用程序由两个主要进程组成：主进程和渲染器进程。
-
主要流程 − 主进程作为独立的 Node.js 进程运行，负责创建和管理浏览器窗口。它与渲染器进程通信，处理系统级事件，并可以访问本机 API。主进程控制应用程序的生命周期，并充当 Electron.js 应用程序的入口点。
-
渲染器进程 − 每个 Electron.js 应用程序可以有多个渲染器进程，每个进程对应一个单独的浏览器窗口。渲染器进程负责在每个浏览器窗口中渲染和显示 Web 内容。它们在单独的 JavaScript 上下文中运行，提供一定程度的隔离和安全性。每个渲染器进程都可以访问 Electron.js API，使其能够与主进程交互并执行操作 DOM、发出网络请求和处理用户交互等任务。
构建简单的 Electron.js 应用程序
现在我们已经很好地了解了 Electron.js 及其架构，接下来让我们深入使用 JavaScript 构建一个简单的 Electron.js 应用程序。我们将创建一个应用程序，该应用程序显示一个带有“Hello, Electron.js”消息的窗口。
要开始使用，请按照以下步骤操作 –
设置开发环境
确保您的计算机上安装了 Node.js，因为 Electron.js 是构建在 Node.js 之上的。您可以从官方网站（https://nodejs.org）下载并安装最新版本的Node.js。
创建一个新的 Electron.js 项目
创建一个新的项目文件夹并使用命令行导航到该文件夹。通过运行以下命令初始化一个新的 Node.js 项目 –
npm init -y
此命令使用默认设置初始化一个新的 Node.js 项目。
安装 Electron.js
通过执行以下命令安装 Electron.js 作为开发依赖项 –
npm install electron --save-dev
此命令会在您的项目中安装 Electron.js 包。
创建主入口点
在项目文件夹中创建一个名为index.js的新文件并添加以下代码 –
const { app, BrowserWindow } = require('electron');
function createWindow() {
// Create the browser window
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
// Load the index.html file
mainWindow.loadFile('index.html');
}
// When Electron has finished initialising and is ready to create browser windows
app.whenReady().then(() => {
createWindow();
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// Quit the application when all windows are closed
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit();
});
说明
在此代码中，我们从 Electron.js 包中导入必要的模块，定义 createWindow 函数来创建浏览器窗口，并为窗口创建和应用程序退出设置必要的事件处理程序。
创建 HTML 文件
在项目文件夹中创建一个名为index.html的新文件并添加以下代码 –
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron.js Application</title>
</head>
<body>
<h1>Hello, Electron.js</h1>
</body>
</html>
此 HTML 文件将显示在 Electron.js 应用程序的窗口中。
运行 Electron.js 应用程序
npx electron.
结论
Electron.js 彻底改变了开发人员使用 Web 技术构建桌面应用程序的方式。它提供了一个强大的框架，结合了 Chromium 渲染引擎和 Node.js 运行时，使开发人员能够使用 HTML、CSS 和 JavaScript 创建跨平台桌面应用程序。凭借其丰富的插件和工具生态系统，Electron.js 使开发人员能够构建功能丰富、高性能且具有视觉吸引力的桌面应用程序。
在本文中，我们探讨了 Electron.js 的基础知识，并学习了如何使用 JavaScript 构建简单的 Electron.js 应用程序。我们讨论了 Electron.js 的架构、它的主要进程以及主进程和渲染进程的作用。我们还逐步完成了设置开发环境和构建 Electron.js 应用程序的过程。
以上就是使用 JavaScript 和 Electron.js 构建桌面 GUI 应用程序的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 使用 JavaScript 和 Electron.js 构建桌面 GUI 应用程序
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
