Electron-ATM 是一个 Electron 应用程序模板，它针对前端开发人员开发 Electron 应用程序提供了一个强大的模板。使用此模板，开发人员可以轻松创建自己的 Electron 应用程序并将其运行在多种平台上。
在本文中，我们将提供 electron-atm 的使用教程。我们将介绍如何安装和使用此模板以及如何创建您自己的 Electron 应用程序。
安装
安装 Electron-ATM，您需要在终端中输入以下命令：
npm install electron-atm -g
此命令将全局安装 electron-atm 包。
创建一个新的 Electron 应用程序
接下来，我们将演示如何使用 Electron-ATM 创建一个新的 Electron 应用程序。在这个例子中，我们将创建一个简单的应用程序，用于显示信用卡余额和交易历史记录。
首先，在终端中，切换到您希望在其中创建新应用程序的目录中。然后，输入以下命令：
electron-atm new my-app
此命令将创建一个名为 my-app 的新应用程序。
运行应用程序
在终端中，进入新创建的应用程序目录中，执行以下命令以运行应用程序：
npm start
Electron-ATM 将在您的计算机上启动应用程序。
了解应用程序模板的结构
从根目录中，您将看到以下目录结构：
my-app/ ├── public/ │ └── index.html ├── src/ │ ├── main.js │ └── renderer.js ├── package.json └── README.md
在这个例子中，我们只需要关注 public 和 src 目录。public 目录包含用于渲染界面的 HTML 和 CSS 文件。src 目录包含用于实现应用程序逻辑的 JavaScript 代码。
main.js 文件包含应用程序的主进程。这个进程运行与 Node.js 环境上，并与您的计算机系统交互，如打开文件、收到系统通知等等。
renderer.js 文件包含应用程序的渲染进程。在 Electron 中，你可以通过多种方式创建渲染进程。renderer.js 将是渲染进程的入口文件。
添加功能
在我们的示例应用程序中，我们希望显示信用卡余额和交易历史记录。为此，我们将创建一个新的 JavaScript 文件用于实现此功能。
在 src 目录中，创建一个名为 credit-card.js 的新文件。在这个文件中，将以下代码复制并粘贴：
-- -------------------- ---- -------
----- ------- - -----------------------------------
----- ---------------- - --------------------------------------------
----- ---------------- - -
- ------------ ---- --------- ------- --------- --
- ------------ ------------ ------- ---------- --
- ------------ ----------- ------- ----------- --
--
-------- ---------------------------- -
----------------- - -------------
-
-------- --------------------------------- -
-------------------------- - ---
---------------------------------- -- -
----- -- - -----------------------------
------------ - --------------------------- -----------------------
---------------------------------
---
-
--------------------------
--------------------------------------此代码将获取 HTML 元素 balance 和 transactionsList，然后在 displayBalance 和 displayTransactions 函数中，将 balanceValue 和 transactionsData 的值显示在这些元素中。
接下来，在 renderer.js 文件中，将以下代码添加到 renderer.js 文件的底部：
require('./credit-card');此代码将 credit-card.js 引入到渲染进程中。现在，运行应用程序，然后您应该能够在应用程序中看到信用卡余额和交易历史记录。
结论
在本文中，我们提供了一个 electron-atm 的使用教程。我们介绍了如何安装和使用此模板，以及如何创建自己的 Electron 应用程序。我们还提供了一个简单的示例应用程序，用于演示如何向 Electron 应用程序中添加功能。希望这篇文章对您有帮助，您可以通过 electron-atm 来快速、简单的创建自己的 Electron 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562eb81e8991b448e09c5