简介
随着互联网技术的不断发展，桌面应用也逐渐受到了关注。与传统的桌面应用相比，使用 Web 技术开发桌面应用的优势不言而喻，无需担心跨平台、安装、升级等问题，同时还具有良好的用户体验。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，让 JavaScript 可以在服务器端运行。而 Electron 则是一款基于桌面应用开发的库，它结合了 Chromium 和 Node.js，使开发者可以用 Web 技术开发桌面应用。
安装
首先，我们需要安装 Node.js 和 npm。安装完成后，我们可以使用 npm 安装 Electron。
npm install electron --save-dev
创建项目
创建一个新目录并初始化 npm：
mkdir my-electron-app cd my-electron-app npm init -y
在该目录下创建如下的文件结构：
my-electron-app/ ├── main.js ├── index.html ├── package.json ├── renderer.js
其中，main.js 为 Electron 的主进程代码，index.html 和 renderer.js 为渲染进程代码。
编写代码
主进程
在 main.js 中写入以下代码：
-- -------------------- ---- -------
----- - ---- ------------- - - -------------------
-------- ------------ -- -
-- -------
--- --- - --- ---------------
------ ----
------- ----
--------------- -
---------------- ----
-
--
-- --------------
--------------------------
-- -------
------------------------------
-- -------
---------------- -- -- -
-- --------------
--- - ----
--
-
-- -------- --------
--------------- -------------
-- ---------------
--------------------------- -- -- -
-- ----------------- --- --------- -
----------
-
--
-- --------- ------
------------------ -- -- -
-- ---- --- ----- -
--------------
-
--上述代码创建了一个 Electron 的浏览器窗口，并加载了 index.html 文件。同时，它还给出了窗口关闭、退出程序和窗口激活等事件的处理方法。
渲染进程
在 renderer.js 中写入以下代码：
const { ipcRenderer } = require('electron')
ipcRenderer.on('message-from-main', (event, arg) => {
console.log(arg)
})
ipcRenderer.send('message-from-renderer', 'Hello from renderer process')ipcRenderer 是 Electron 的模块之一，它用于在渲染进程与主进程之间传递消息。上述代码演示了如何发送消息给主进程，并监听从主进程传递过来的消息。
HTML 文件
在 index.html 中写入以下代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- -------- -----------
-------
------
--------- -----------
------- -----------------------------
-------
-------上述代码非常简单，仅包含一个标题和一个脚本文件引用。脚本 renderer.js 中的代码在页面加载时会被执行。
运行程序
在命令行中输入以下命令启动程序：
npm start
如果一切正常，你应该会看到一个窗口打开，并显示出 “Hello World!”。同时开发者工具也会自动打开，并显示渲染进程发送的消息。
总结
本文介绍了如何使用 Electron 开发桌面应用程序。我们首先安装了 Node.js 和 Electron，然后创建了一个新的项目，并编写了主进程、渲染进程和 HTML 文件中的代码。最后，我们启动了该程序，并验证了它的功能。
如果你对 Node.js 和 Web 技术有所了解，使用 Electron 开发桌面应用是一项相对容易的任务。通过编写代码并实践，你可以深入了解 Electron 的工作原理，并开发出更加复杂的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64926fb748841e989403f4ac