后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 JavaScript 构建桌面应用程序
什么是 Electron？
Electron 入门
后续步骤
GitHub 仓库： https://github.com/webcrumbs-community/webcrumbs
有没有想过 Visual Studio Code、Slack 和 Discord 以及许多其他很酷的应用程序是如何编码的？
答案是：Electron。它常被誉为革命性的框架，它使 JavaScript 开发人员能够使用 Web 技术构建跨平台的桌面应用程序。
该框架结合了 Node.js 和 Chromium 的强大功能，提供了一个独特的平台，可以利用熟悉的 Web 开发技能进行桌面应用程序开发。
什么是 Electron？
Electron 是一个开源框架，允许你使用 HTML、CSS 和 JavaScript 创建桌面应用程序。它本质上是 Chromium（Google Chrome 背后的开源项目）和 Node.js 的组合，它们打包在一起提供了一个运行时，允许你为 Windows、macOS 和 Linux 构建应用程序。
为什么 JavaScript 开发人员需要 Electron？
熟悉 Web 技术：如果您精通 JavaScript、HTML 和 CSS，Electron 可以让您直接将这些技能转化为桌面应用程序开发。
跨平台兼容性：只需编写一次代码，即可在任何主流操作系统上运行。无需学习针对每个平台的不同技术。
访问 Node.js： Electron 应用能够访问 Node.js API。这意味着您可以与文件系统交互，创建原生菜单、通知等等。
强大的社区和生态系统： Electron 开源且广受欢迎，拥有一个充满活力的社区。您可以找到大量专为 Electron 开发定制的资源、库和工具。
真实用例
流行的应用程序：一些最流行的桌面应用程序（如Visual Studio Code、Slack和Discord）都是使用 Electron 构建的。
定制业务应用程序：公司可以利用现有的 Web 开发专业知识，构建适合其特定业务需求的内部工具和应用程序。
支持我们！🙏⭐️
顺便说一句，我是 WebCrumbs 团队的一员，如果您能看看我们简化 Web 开发的 Node.js 无代码解决方案，那将非常感激。给我们一颗星就太好了。
我们付出了大量的努力来帮助开发人员尽可能快速、轻松地将他们的想法带到实时网站上（想想：轻松的插件和主题集成），我们非常感谢每一点支持！
好的。现在，让我们重新探索 Electron 的奇妙之处。
潜在缺点
性能和大小：与原生应用相比，Electron 应用可能占用大量资源，并且体积更大。这是因为每个应用都包含 Chromium 和 Node.js。
安全隐患：与任何框架一样，Electron 应用也存在潜在的安全漏洞，尤其是在 Electron 应用可以访问 Node.js 的情况下。开发者需要保持警惕，并遵循最佳安全实践。
Electron 入门
设置项目
创建新目录：为您的项目创建一个新文件夹并导航到该文件夹。
mkdir my-electron-app
cd my-electron-app
初始化 Node.js 项目：初始化一个新的 Node.js 项目。
npm init -y
安装 Electron：安装 Electron 作为开发依赖项。
npm install electron --save-dev
编写代码
创建主脚本（main.js）
在项目目录中，创建一个名为 main.js 的文件。这将是 Electron 应用程序的入口点。
const { app, BrowserWindow } = require('electron');
function createWindow() {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
// Load a local HTML file or a web URL
win.loadFile('index.html');
// Or load a remote URL
// win.loadURL('https://example.com');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
创建 HTML 文件 (index.html)
在同一目录中创建一个名为的文件index.html。该文件将显示在你的 Electron 应用程序窗口中。
<!DOCTYPE html>
<html>
<head>
<title>My Electron App</title>
</head>
<body>
<h1>Hello, Electron!</h1>
<p>Welcome to your first Electron application.</p>
</body>
</html>
更新Package.json文件
在你的 中package.json，将“main”脚本修改为“main”：“main.js”，并在“scripts”下添加启动脚本：
"main": "main.js",
"scripts": {
"start": "electron ."
}
运行应用程序
现在，您可以通过运行以下命令启动 Electron 应用程序：
npm start
这将打开一个新的 Electron 窗口，显示 index.html 的内容。恭喜，您已经创建了一个基本的 Electron 应用程序！
后续步骤
浏览 Electron 文档，了解更多关于其 API 和功能的信息。尝试不同的功能，例如自定义菜单、通知和系统交互。考虑为不同平台打包和分发您的 Electron 应用。
社区和贡献
Electron 依靠社区贡献蓬勃发展。作为一名 JavaScript 开发者，您可以通过参与讨论、贡献代码库或分享您自己的 Electron 项目来为其发展做出贡献。
如果您喜欢开源，请加入 GitHub 上的 Node.js 社区（WebCrumbs Community），或访问 WebCrumbs Community网站以获取更多信息。
结论
Electron 是一个出色的强大框架，适合 JavaScript 开发人员，旨在编写桌面应用程序开发，而无需脱离 Web 技术的舒适区。
它能够利用 Web 开发技能来创建跨平台桌面应用程序，使其成为开发人员工具库中的宝贵工具。
当您踏上 Electron 之旅时，请记住真正的力量在于实验、建设和与社区的互动。
关注我了解更多！
我通常写关于 JavaScript、WebDev 和Webcrumbs 的文章❤️。
