>
我们都知道JavaScript和Web技术的力量，并看到了使用此知识开发和包装跨平台桌面应用程序的一波选项。电子，github是一种选择，但是由于我已经很高兴地使用了与之构建的多个应用程序，因此研究似乎是一个不错的选择。经过两年的开发，包括一个名称更改（来自原子壳），Electron最近已达到1.0版，这始终是任何项目存在的里程碑。有什么更好的时间来了解它的能力。
>
安装电子Electron具有快速的启动项目和预先构建的版本，但让我们直接潜入深处，并通过NPM安装电子：
或Mac Homebrew Lovers，通过桶：
<span>npm install electron-prebuilt -g </span>
无论您遵循哪个选项，您都应最终得到可执行的电子二进制。
一个电子项目需要三个文件：
index.html：默认呈现的网页。
你需要一个英雄
打开软件包。
这是一个标准软件包。在此设置应用程序名称，版本，主JavaScript文件和依赖项。
>
>在添加它们后运行NPM安装以确保您安装了依赖项。brew <span>install Caskroom/cask/electron </span>
>
首先，让我们设置所需的要求（即电子），创建一个应用程序，本机浏览器窗口和一个可使用的主窗口占位符。
下一个句柄，如果关闭了Windows，请退出应用程序。如果平台是OS X，则应用程序关闭所有窗口后通常会保持打开状态，并且用户通常会明确戒烟，因此请处理该用例。
>初始化电子后，创建浏览器窗口并加载应用程序代码。如果窗口关闭，请解除窗口对象。
<span>{
</span> <span>"name": "hero-browser",
</span> <span>"version": "0.1.0",
</span> <span>"main": "main.js",
</span> <span>"dependencies": {
</span> <span>"dotenv": "^2.0.0",
</span> <span>"md5": "^2.1.0"
</span> <span>}
</span><span>}
</span>创建一个称为应用的子文件夹。在App/index.html中，将引用添加到所需的样式表和JavaScript文件中，并设置接口的HTML结构。
<span>'use strict';
</span>
<span>const electron = require('electron');
</span><span>const app = electron.app; // Module to control application life.
</span><span>const BrowserWindow = electron.<span>BrowserWindow</span>; // Module to create native browser window.
</span><span>var mainWindow = null;
</span>
app<span>.on('window-all-closed', function() {
</span> <span>if (process.platform != 'darwin') {
</span> app<span>.quit();
</span> <span>}
</span><span>});
</span><span>npm install electron-prebuilt -g </span>
奇迹API是一个有趣的API，但其身份验证和数据结构可能会令人困惑。在此处注册以获取键，然后遵循以下说明以获取上述三个参数。身份验证所需的公共密钥和私钥存储在.env文件中，并使用dotenv软件包访问。
。brew <span>install Caskroom/cask/electron </span>
限制值设置要请求的记录数量，还有其他参数可以设置。
接下来创建将每个字符输出到targue_list div中所需的HTML和占位符变量：
<span>{
</span> <span>"name": "hero-browser",
</span> <span>"version": "0.1.0",
</span> <span>"main": "main.js",
</span> <span>"dependencies": {
</span> <span>"dotenv": "^2.0.0",
</span> <span>"md5": "^2.1.0"
</span> <span>}
</span><span>}
</span>接下来，请致电API并处理响应，然后钻入JSON结构中的实际字符列表。data.data.results。
>为每个字符创建HTML元素，并将其附加到tarne_list。 Marvel API中的图像分为文件名和扩展名。如果没有可用的图像，它将显示“不可用的图像”图像，我们可以处理此图像，但在此示例中不会。<span>'use strict';
</span>
<span>const electron = require('electron');
</span><span>const app = electron.app; // Module to control application life.
</span><span>const BrowserWindow = electron.<span>BrowserWindow</span>; // Module to create native browser window.
</span><span>var mainWindow = null;
</span>循环完成后，显示系统通知，关闭方法并处理连接到API的潜在错误。
通过在项目的根目录中执行下面的命令来运行应用程序：
app<span>.on('window-all-closed', function() {
</span> <span>if (process.platform != 'darwin') {
</span> app<span>.quit();
</span> <span>}
</span><span>});
</span>包装应用程序
将代码打包到“本机”应用程序中的app<span>.on('ready', function() {
</span> mainWindow <span>= new BrowserWindow({width: 800, height: 600});
</span> mainWindow<span>.loadURL('file://' + __dirname + '/app/index.html');
</span>
mainWindow<span>.on('closed', function() {
</span> mainWindow <span>= null;
</span> <span>});
</span><span>});
</span>
> 包装项目的最简单方法是使用Electron-Packager NPM模块（注意：需要单独安装此项目）。它可以生成大型二进制文件，对于桌面应用程序，这可能不是问题，但是如果是，则在此处描述其他选项。
如果您是在非窗口平台上的Windows包装，则需要安装葡萄酒，这是一个很大的依赖。 除了这些警告之外，这是如何创建应用程序二进制文件的方法。在您的项目文件夹中，运行（替换为项目
>的相关值）：
顺序，这些参数设置：
替换相关参数
>
经常询问有关带电子桌面节点应用的问题
>使用电子开发桌面应用程序的先决条件是什么？ node.js是一个JavaScript运行时，允许您在服务器或计算机上运行JavaScript，而NPM是Node.js软件包的软件包管理器。您可以从官方node.js网站下载node.js和npm。安装了这些安装后，您可以使用NPM安装电子。
创建一个新的电子项目，首先，为您的项目创建一个新目录。在您的终端或命令提示符中导航到此目录，然后使用命令NPM INIT初始化一个新的Node.js项目。此命令在您的项目目录中创建一个新的package.json文件。然后，您可以使用命令npm安装-Save Electron在项目中安装Electron。
>电子应用程序通常包含三种类型的文件： package.json，main.js和index.html。 package.json文件包含有关您的应用程序及其依赖项的元数据。 main.js文件是您应用程序的入口点，您可以在其中控制应用程序的生命周期事件。 index.html文件是您的应用程序启动时显示的网页。
>如何打包我的电子应用程序以进行分发？
是的，您可以使用节点.JS模块在您的电子应用中。 Electron使用node.js运行时，因此您可以在应用程序中使用任何node.js模块。
是的，您可以在中使用Web Technologies您的电子应用。电子本质上是一个网络浏览器，允许您使用HTML，CSS和JavaScript等Web技术创建桌面应用程序。
我可以用电子构建跨平台应用程序吗？用电子构建跨平台应用。电子允许您构建在Windows，MacOS和Linux上运行的应用程序。
以上是用电子创建跨平台桌面节点应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！
