创建主进程
在 Electron 应用程序中，主进程负责创建和管理应用窗口。首先需要安装 Electron：
npm install electron --save-dev
然后，在项目根目录下创建一个 main.js 文件作为主进程文件。
-- -------------------- ---- -------
----- - ---- ------------- - - -------------------
--- ----------
-------- -------------- -
---------- - --- ---------------
------ ----
------- ----
--------------- -
---------------- -----
----------------- ------
-
--
-- ----- ---- --
---------------------------------
-- -------
-------------------------------------
-
----------------------------------
-- --------------
--------------------------- -- -- -
-- ----------------- --- --------- -
----------
-
--
------------------ -- -- -
-- ------------------------------------- --- -- -
--------------
-
--这个文件定义了主进程的主要功能，包括创建窗口、加载网页以及监听窗口关闭事件。
创建渲染进程
渲染进程是每个窗口的独立 JavaScript 环境。在这个例子中，我们将在 index.html 中添加一些基本的 HTML 和 CSS 来展示窗口的内容。
在项目根目录下创建一个 index.html 文件，内容如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
--------------- ----------
-------
---- -
------- --
-------- --
------------ ------ -----------
-
-- -
----------- -------
------ -----
-
--------
-------
------
-------- -------- ---------
---------- -------- -----------
-------
-------这个文件定义了一个简单的页面，包含一个标题和一段文字。
配置 package.json
为了方便运行我们的 Electron 应用程序，需要在 package.json 文件中配置启动脚本：
-- -------------------- ---- -------
-
------- ------------------
---------- --------
------- ----------
---------- -
-------- --------- --
--
------------------ -
----------- ---------
-
-这样，我们可以通过运行 npm start 来启动应用程序。
调试和优化
调试
Electron 提供了强大的调试工具。你可以通过 mainWindow.webContents.openDevTools() 在浏览器窗口中打开开发者工具来调试你的应用。
优化
对于生产环境，你可能需要对代码进行优化。例如，禁用 nodeIntegration 并启用 contextIsolation 可以提高安全性。此外，可以使用工具如 Webpack 对你的前端代码进行打包和优化。
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
}同时，确保你的应用在不同的操作系统和屏幕尺寸上都能正常工作，这可能需要对窗口大小和其他 UI 元素进行调整。
通过以上步骤，你已经成功创建了一个基本的 Electron 应用，并学会了如何管理窗口和渲染进程。接下来，你可以进一步探索更多高级功能，如 IPC 通信、文件系统访问等。
