随着移动设备和云计算的发展，客户端应用程序的需求逐渐减少。然而，一些应用程序仍然需要在本地运行并提供更好的用户体验。这就是为什么桌面应用程序仍然非常受欢迎的原因。在本文中，我们将学习如何使用 Node.js 和 Electron 框架来构建桌面应用程序。
介绍
在过去的几年中，Electron 框架变得非常受欢迎。这个框架基于 Node.js 和 Chromium，可以让开发者使用 Web 技术如 HTML、CSS 和 JavaScript 来构建桌面应用程序。Node.js 提供了访问本地系统资源的能力，而 Chromium 则提供了一个类似浏览器的 UI。这种结合使得开发者能够在本地运行 Web 应用，同时不需要学习新的桌面开发技术。
在前进之前，让我们来看一下应用程序的架构。应用程序有两部分：
- 主进程：使用 Node.js，它管理应用程序的生命周期以及所有的网络和本地系统访问。
- 渲染进程：使用 Web 技术（HTML、CSS 和 JavaScript），提供了应用程序的 UI。
为了和用户交互，主进程和渲染进程使用一些很有用的 API。我们将在下面的章节中学习这些 API。
安装
首先，你需要安装 Node.js。
其次，安装 Electron。你可以在安装 Shell 中执行以下命令：
--- ------- -- --------
如何使用 Electron
创建一个新应用程序
首先，让我们创建一个新的应用程序。在你的代码编辑器中新建一个文件夹，我们将其命名为 my-electron-app，并在该目录下面创建一个 package.json 文件（使用 npm init）。
执行以下命令：
--- ------- ------ --------
在 my-electron-app 文件夹下新建 main.js 文件，这是主进程中的入口文件。
在 main.js 文件里执行以下代码：
----- - ---- ------------- - - -------------------
-------- -------------- -
----- --- - --- ---------------
------ ----
------- ----
--------------- -
---------------- ----
-
--
--------------------------
-
----------------------- -- -
--------------
------------------ -------- -- -
-- ------------------------------------- --- -- --------------
--
--
--------------------------- -------- -- -
-- ----------------- --- --------- ----------
--上面的代码先引入 electron 里的 app 和 BrowserWindow 模块。创建了一个名为 createWindow 的函数，该函数用于创建一个新的 BrowserWindow 对象，并将其加载到 index.html 上。
app.whenReady() 方法用于在 Electron 准备完毕后创建窗口。如果应用程序在 macOS 下运行，那么注销事件将被忽略，因为该操作不会导致应用程序的关闭。
现在，我们需要在 my-electron-app 文件夹下新建 index.html 文件。
--------- -----
------
------
----- --------------- --
------------ --------------
-------
------
--------- -----------
-- --- ----- ------- -------------------------------------------------------
-------- ---------------------------------------------------------
--- -------- -----------------------------------------------------------
-------
-------运行以下命令：
-------- -
现在你应该在你的桌面上看到一个新的 Electron 窗口，其中包含一个运行 Hello World 的 HTML 页面。
使用 Node.js 模块
在主进程中，Node.js 模块可以直接使用。但是，在渲染进程中使用它们意味着我们需要定义它们。为了允许在渲染进程中使用 Node.js 模块，需要在创建 BrowserWindow 对象时设置 webPreferences 配置项，将 nodeIntegration 设置为 true：
----- - ------------- - - -------------------
-------- -------------- -
----- --- - --- ---------------
--------------- -
---------------- ----
-
--
-在主进程和渲染进程中，您可以使用 require() 导入 Node.js 模块。
访问文件系统
Electron 可以访问操作系统以及本地文件系统的能力，而这正是许多人选择 Electron 的原因之一。
在这里，我们将学习如何在 Electron 应用程序中访问文件系统。
在主进程中，您可以使用 Node.js 的 fs 模块轻松访问文件系统。而在渲染进程中，您需要使用 Electron 的 remote 模块来访问它。
-- --- ----- -- - ------------- -- ------ ----- ------- - --------------------------- ------- -------------------- -- ------ -- ---- ----- - ------ - - ------------------- ----- -- - ------------- ----- ------- - --------------------------- ------- -------------------- -- ------
打开和保存对话框
在 Electron 中，您可以使用对话框选择打开或保存文件。这可以通过使用一个 dialog 对象来实现。
你需要在 main.js 文件的应用程序上设置以下选项：
----- - ---- -------------- ------ - - -------------------
-- --- ---- ----- ----
--- ---- - ----
-------- -------------- -
----- --- - --- ---------------
------ ----
------- ----
--------------- -
---------------- ----
-
--
--------------------------
-- -------
----- - -------------- - - -------------------
------------------------------------------------- -- -- -
-- ----------
----- ---- - ------------------------------ -
----------- -------------
-------- -
- ----- ----- ------- ----------- ------- --
- ----- ---- ------- ----------- ----- -
-
--
-- ---------
-----------------
--
-
----------------------- -- -
--------------
------------------ -------- -- -
-- ------------------------------------- --- -- --------------
--
--
--------------------------- -------- -- -
-- ----------------- --- --------- ----------
--在渲染进程中，我们可以使用远程模块来使用 openFileDialog() 和 saveFileDialog() 方法来打开和保存文件。
----- - ------ - - ------------------- ----- ---- - ---------------------------------- ----------- ------------- -------- -- ----- ----- ------- ----------- ------- -- -- -----------------
在应用程序中创建菜单
菜单是每个应用程序中的重要组成部分。在 Electron 中，您可以使用 Menu 和 MenuItem 模块来创建自定义菜单。
这是一个示例代码：
----- - ---- -------------- ---- - - -------------------
--- ---- - ----
-------- -------------- -
----- --- - --- ---------------
------ ----
------- ----
--------------- -
---------------- ----
-
--
--------------------------
-----------------------------
-
----------------------- -- -
--------------
------------------ -------- -- -
-- ------------------------------------- --- -- --------------
--
----- -------- - -
-
------ -------
-------- -
- ------ ------- ------------ -------------- ------- -- --
- ------ ------- ------------ -------------- ------- -- -
-
--
-
------ -------
-------- -
-
------ ------ ------
------ ----- -- -- -
----- - ----- - - -------------------
----- --------------------------------------------
-
-
-
-
-
---- - --------------------------------
--
--------------------------- -------- -- -
-- ----------------- --- --------- ----------
--使用 IPC 通信
在 Electron 中，您可以使用 IPC 通信来在主进程和渲染进程之间传递消息。IPC 通信表示进程间通信，使用这种方法可以将消息从主进程发送到渲染进程或反之，以及从一个渲染进程发送到另一个渲染进程。
以下是示例代码：
-- ----- ----- - ------- - - ------------------- ------------------ ------- ----- -- - ----------------- -- -- ------ ------ ------------------- ------ ------ -- -- ------ ----- -- -- ------ ----- - ----------- - - ------------------- ------------------------ ------ ------- ---------------------- ------- ----- -- - ----------------- -- -- ------ ----- --
问题与解决
如何避免安全问题？
在 Electron 中，运行沙盒化应用程序可以有效防止应用程序的安全问题，这意味着在主进程或渲染进程中使用 Node.js 时存在潜在的漏洞。
您可以使用 contextIsolation 配置来沙盒化渲染进程，禁用 Node.js API。更多关于如何避免安全问题的详细信息，请参见 Electron 安全文档。
如何在生产环境中使用？
在生产环境中，您可以创建一个可执行文件，其中包含所有依赖项并自动运行您的应用程序。查看 Electron 打包文档 以了解更多信息。
如何在 Electron 中使用 TypeScript？
使用 TypeScript 开发 Electron 应用程序可以提高代码可维护性和开发效率。您可以使用 TSLint、TypeScript、和 Webpack 来加速您的开发。请查看 Electron TypeScript 应用模板 以开始您的 TypeScript 之旅。
结论
Electron 是一个使用 JavaScript 和 Web 技术来构建桌面应用程序的非常好的选择。本文中，我们详细介绍了如何使用 Node.js 和 Electron 框架来构建桌面应用程序。希望这篇文章可以帮助您了解如何构建充满乐趣的桌面应用程序！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672eae86eedcc8a97c8a748d