使用 Electron 构建一个简单的桌面应用程序
使用 Electron 可以轻松创建桌面应用程序。你可以构建可在任何操作系统中运行的跨平台应用程序。在本篇文章中,我们将使用Vanilla JavaScript项目并将其转换为Electron 应用程序。如果你了解 Vanilla JavaScript,请跟随我一起完成本篇内容。
先决条件:
1. 在你的计算机上安装Node.js。
2. 有一个以前在 Vanilla JavaScript 中的项目示例(todo-list、notes-app、tic-tac-toe 等)
使用选举构建桌面应用程序
首先,在终端中写入以下内容,替换my-app
,随便取什么名字。
此命令将为我们的 Electron 应用程序生成结构。
然后,输入 cd
和 name of your project
在 src 文件夹中,你将找到一个 index.html
, style.css
, 和 index.js
文件。
文件名为 index.js
包含设置my-app
。我们必须对其进行一些更改。
这种配置允许 Electron 与 Node.js 并带有不同的模块。
现在您可以将文件复制到 src
文件夹。
请记住,主 HTML 文件必须命名为 index.html
,因为 mainWindow
函数将使用该文件来启动应用程序。
你还可以更改起始文件的名称而不是index.html
。请记住,你可以替换 HTML 和 CSS 文件,但不要更改index.js
文件。因为该文件是我们应用程序的核心。
现在你的项目准备好运行,输入npm start
。
你必须在应用程序运行时看到一个 Chromium 窗口弹出窗口。
在运行之前 build
命令检查一切正常。
如果你想对你的应用程序进行一些调整,现在是时候了。接下来,在你的终端中输入npm run make
。
此过程完成后,你将看到一个名为“out”的新文件夹。
现在你的应用程序已准备好安装在你的机器上。
进入目录./out/make/squirrel.[system]
并运行 setup.exe
文件。
结束语
单击你的桌面窗口并访问你全新的桌面应用程序!
到这里,你现在已经使用 Electron 构建了快速简便的桌面应用程序!
我希望这篇文章对大家能有所用。感谢阅读。