📅  最后修改于: 2020-10-25 10:52:50        🧑  作者: Mango

PDF版本快速指南资源资源求职讨论区Electron是由GitHub开发的开源库，用于使用HTML，CSS和JavaScript构建跨平台的桌面应用程序。 Electron通过将Chromium和Node.js组合为一个运行时来实现这一点，并且可以将应用程序打包为Mac，Windows和Linux。听众本教程适用于那些渴望为Linux，Windows和MacOS构建跨平台桌面应用程序的学习者。先决...

📅  最后修改于: 2020-10-25 10:53:03        🧑  作者: Mango

为什么选择电子？Electron通过为运行时提供丰富的本机（操作系统）API，使您能够使用纯JavaScript创建桌面应用程序。这并不意味着Electron是绑定到图形用户界面（GUI）库的JavaScript。相反，Electron使用网页作为其GUI，因此您也可以将其视为由JavaScript控制的最小Chromium浏览器。因此，从技术上讲，所有电子应用程序都是运行在可利用您的OS API...

📅  最后修改于: 2020-10-25 10:53:20        🧑  作者: Mango

要开始使用Electron进行开发，您需要安装Node和npm（节点程序包管理器）。如果还没有这些，请转到“节点设置”以在本地系统上安装节点。通过在终端中运行以下命令来确认已安装节点和npm。上面的命令将生成以下输出-每当我们使用npm创建项目时，都需要提供一个package.json文件，其中包含有关我们项目的所有详细信息。 npm使我们可以轻松设置此文件。让我们建立我们的开发项目。启动您的终端...

📅  最后修改于: 2020-10-25 10:53:36        🧑  作者: Mango

Electron提取package.json文件中定义的主文件并执行它。该主文件创建应用程序窗口，其中包含渲染的网页以及与操作系统的本机GUI（图形用户界面）的交互。当您使用Electron启动应用程序时，将创建一个主进程。该主要过程负责与操作系统的本机GUI进行交互。它创建您的应用程序的GUI。仅启动主过程并不会为您的应用程序用户提供任何应用程序窗口。这些是由主进程使用BrowserWindow...

📅  最后修改于: 2020-10-25 10:53:54        🧑  作者: Mango

我们已经为我们的项目创建了一个package.json文件。现在，我们将使用Electron创建第一个桌面应用程序。创建一个名为main.js的新文件。在其中输入以下代码-创建另一个文件，这次是一个名为index.html的HTML文件。在其中输入以下代码。使用以下命令运行此应用程序-将会打开一个新窗口。它看起来像下面的样子-这个应用程式如何运作？我们创建了一个主文件和一个HTML文件。主文件使用...

📅  最后修改于: 2020-10-25 10:54:13        🧑  作者: Mango

Electron应用程序的用户界面是使用HTML，CSS和JS构建的。因此，我们也可以在此处利用所有可用的工具进行前端Web开发。您可以使用Angular，Backbone，React，Bootstrap和Foundation等工具来构建应用程序。您可以使用Bower来管理这些前端依赖项。使用以下命令安装凉亭-现在，您可以使用bower获得所有可用的JS和CSS框架，库，插件等。例如，要获取最新的...

📅  最后修改于: 2020-10-25 10:54:34        🧑  作者: Mango

文件处理是构建桌面应用程序的非常重要的部分。几乎所有桌面应用程序都与文件交互。我们将在我们的应用程序中创建一个表单，该表单将使用一个名称和一个电子邮件地址作为输入。该表格将保存到文件中，并创建一个列表，将其显示为输出。使用main.js文件中的以下代码来设置您的主要流程-现在打开index.html文件，并在其中输入以下代码-现在我们需要处理添加事件。我们将在view.js文件中执行此操作。我们将...

📅  最后修改于: 2020-10-25 10:55:01        🧑  作者: Mango

在上一章中，我们使用了一个节点模块fs。现在，我们将介绍可与Electron一起使用的其他一些节点模块。操作系统模块使用OS模块，我们可以获得有关运行应用程序的系统的很多信息。以下是在创建应用程序时提供帮助的一些方法。这些方法可帮助我们根据正在运行的操作系统自定义应用程序。Sr.NoFunction & Description1os.userInfo([options])Theos.userInf...

📅  最后修改于: 2020-10-25 10:55:19        🧑  作者: Mango

Electron为我们提供了2个IPC（进程间通信）模块，称为ipcMain和ipcRenderer。ipcMain模块用于从主进程到渲染器进程异步通信。在主流程中使用时，该模块处理从渲染器流程（网页）发送的异步和同步消息。从渲染器发送的消息将被发送到此模块。ipcRenderer模块用于从渲染器进程与主进程异步通信。它提供了一些方法，因此您可以将同步消息和异步消息从渲染器进程（网页）发送到主进程...

📅  最后修改于: 2020-10-25 10:55:40        🧑  作者: Mango

对于任何应用程序而言，成为易于使用的应用程序都非常重要。因此，您不应使用alert（）调用创建对话框。 Electron提供了一个很好的界面来完成创建对话框的任务。让我们来看看它。Electron提供了一个对话框模块，我们可以使用该模块显示本机系统对话框，以打开和保存文件，发出警报等。让我们直接跳至示例并创建一个应用程序以显示简单的文本文件。创建一个新的main.js文件，并在其中输入以下代码-每...

📅  最后修改于: 2020-10-25 10:56:04        🧑  作者: Mango

桌面应用程序带有两种类型的菜单-应用程序菜单（在顶部栏）和上下文菜单（右键单击菜单）。在本章中，我们将学习如何创建这两者。我们将使用两个模块-菜单和菜单项模块。请注意，Menu和MenuItem模块仅在主过程中可用。为了在渲染器过程中使用这些模块，您需要远程模块。当我们创建一个上下文菜单时，我们会碰到这一点。现在，让我们为主要流程创建一个新的main.js文件-我们在这里从模板构建菜单。这意味着我...

📅  最后修改于: 2020-10-25 10:56:21        🧑  作者: Mango

系统任务栏是应用程序窗口之外的菜单。在MacOS和Ubuntu上，它位于屏幕的右上角。在Windows上，它位于右下角。我们可以使用Electron在系统托盘中为我们的应用程序创建菜单。创建一个新的main.js文件，并向其中添加以下代码。准备将png文件用于系统任务栏图标。设置基本的浏览器窗口后，我们将创建一个新的index.html文件，其内容如下：我们使用纸盘子模块创建了纸盘。然后，我们使用...

📅  最后修改于: 2020-10-25 10:56:39        🧑  作者: Mango

Electron仅为MacOS提供本机通知API。因此，我们将不使用它，而是使用一个名为node-notifier的npm模块。它使我们可以在Windows，MacOS和Linux上通知用户。在该文件夹中使用以下命令将node-notifier模块安装在您的应用文件夹中-现在，让我们创建一个具有按钮的应用程序，该按钮将在每次单击该按钮时生成通知。创建一个新的main.js文件，并在其中输入以下代码...

📅  最后修改于: 2020-10-25 10:56:59        🧑  作者: Mango

webview标签用于将“访客”内容（例如网页）嵌入到Electron应用程序中。此内容包含在webview容器中。应用程序中的嵌入式页面控制如何显示此内容。Webview在与您的应用程序不同的过程中运行。为了确保免受恶意内容侵害，Webview与您的网页没有相同的权限。这样可以确保您的应用不受嵌入内容的影响。您的应用程序与嵌入式页面之间的所有交互都是异步的。让我们考虑一个示例，以了解在我们的El...

📅  最后修改于: 2020-10-25 10:57:20        🧑  作者: Mango

如果您正在构建用于屏幕共享，语音备忘录等的应用程序，则音频和视频捕获是重要的特征。如果您需要一个应用程序来捕获个人资料图片，则音频和视频捕获也很有用。我们将使用getUserMediaHTML5 API通过Electron捕获音频和视频流。让我们首先在main.js文件中设置我们的主要过程，如下所示：现在我们已经设置了主要流程，让我们创建将捕获此内容的HTML文件。创建一个名为index.html...