NW.js：使用Web技术构建原生应用的框架
NW.js是一个强大的框架，允许开发者使用HTML、JavaScript和CSS等Web技术创建原生应用程序，从而生成混合应用，这些混合应用比普通的Web应用具有显着优势。
与另一个混合应用框架Electron相比，NW.js具有以下几个优势：支持chrome.* APIs、Chrome应用、NaCl和PNaCl应用、V8快照源代码保护、内置PDF查看器、打印预览以及在Web Workers中集成Node.js。
使用NW.js创建混合应用程序的过程包括设置项目结构、创建清单文件和创建主视图。您可以参考GitHub上的示例应用程序。
NW.js可以使用nw和nw-builder包分别进行开发和生产安装。通过向package.json文件添加npm脚本，可以简化打包和分发过程。
NW.js应用程序的测试和调试可以手动进行，因为NW.js基于Chromium。可以使用Karma的NW.js启动器插件（例如karma-nodewebkit-launcher）实现自动化的单元测试。
本文由Tim Severien和Joan Yin共同评审。感谢所有SitePoint的同行评审员，使SitePoint的内容尽善尽美！
NW.js是一个使用HTML、JavaScript和CSS等Web技术创建原生应用程序的框架。简单来说，您使用正常的流程开发Web应用程序。在流程结束时，您运行一个生成器，将所有内容编译成一个原生应用程序，然后该应用程序就像浏览器一样显示您的Web应用程序。这些应用程序称为“混合应用程序”。
混合应用程序之所以很棒，不仅是因为它们是用您已经熟悉的语言（HTML、JavaScript和CSS）编写的，还因为它们比普通的Web应用程序具有以下重要优势：
它们还提供自定义API，带来以下优势：
听起来不错？那么让我们开始吧。在本文中，我们将实际了解NW.js，并学习如何创建混合应用程序。您可以访问GitHub上找到使用本文说明构建的示例应用程序。
首先，需要提到一点：NW.js并不是唯一一个用于混合应用程序的框架。另一个竞争对手叫做Electron。它于2013年启动，比NW.js晚了两年，但由于它来自GitHub，因此很快就广为人知。现在您可能对它们之间的区别感兴趣。以下是NW.js与Electron相比的优势：
但是，Electron也有一些值得一提的优势：
还有一个根本的区别。NW.js应用程序以HTML文件的形式指定其入口点。此HTML文件将直接在GUI中打开。
另一方面，Electron应用程序将JavaScript文件指定为其入口点。此JavaScript文件在一个单独的主进程中打开，然后可以在GUI中打开HTML文件。这意味着理论上您可以运行没有GUI的Electron应用程序。此外，关闭GUI不会关闭主进程；您需要通过调用API方法手动终止它。
虽然Electron为使用JavaScript编写且没有GUI的桌面应用程序打开了大门，但如果您只想显示基于HTML的应用程序，NW.js应用程序可能更容易设置。
注意：如果您真的更喜欢Electron的优势，请查看SitePoint最近关于使用Electron创建桌面应用程序的文章。
让我们开始创建稍后将编译成原生应用程序的应用程序。由于设置Web应用程序有很多方法——使用各种JS语言（TypeScript、CoffeeScript等）、模块加载器（RequireJS、webpack、SystemJS等）、框架（AngularJS、React、Vue.js等）和预处理器（SCSS、LESS、Haml等）——而且每个人都有自己的偏好，我们只使用基本的HTML、CSS和JS（ES6标准）技术。
没有适用于任何设置的NW.js样板（启动项目）。所有这些都是为特定的框架、模块加载器或预处理器构建的。因此，我们将自己从头开始实现一个简单的NW.js应用程序。它很容易理解，您以后可以轻松地根据您的需要自定义它，或者切换到样板。
首先，我们需要创建我们的项目结构和文件：
<code>nw.js-example/ ├── src/ │ ├── app/ │ │ └── main.js │ ├── assets/ │ │ └── icon.png │ ├── styles/ │ │ └── common.css │ ├── views/ │ │ └── main.html │ └── package.json └── package.json</code>
说明：
现在我们已经创建了项目结构和文件，我们可以开始使用NW.js清单文件src/package.json。根据文档，该文件基本上只需要两个属性，name（应用程序名称）和main（用作入口点的HTML文件的路径）。但是我们添加了更多信息，例如窗口图标的路径，以及最小宽度和高度，以确保用户不会看到任何意外的内容：
<code>{
"name":"nw.js-example",
"main":"views/main.html",
"window":{
"min_width":400,
"min_height":400,
"icon":"assets/icon.png"
}
}</code>就是这样！应用程序稍后将在启动时打开src/views/main.html，因为main路径相对于清单文件。
此时，我们可以编写一个待办事项应用程序。但是我们想专注于NW.js及其功能。为此，我更喜欢让您决定应用程序的功能。我在GitHub上创建了一个示例项目NW.js-examples来演示几个NW.js功能，例如Node.js集成和剪贴板访问。请随意在您的应用程序中使用它进行尝试。但您也可以使用其他内容。
对于您决定的任何内容，您至少必须创建src/views/main.html文件，因为它是的应用程序入口点。它可能如下所示：
<code>nw.js-example/ ├── src/ │ ├── app/ │ │ └── main.js │ ├── assets/ │ │ └── icon.png │ ├── styles/ │ │ └── common.css │ ├── views/ │ │ └── main.html │ └── package.json └── package.json</code>
在一个真实的应用程序中，您可能会有其他几个视图文件，并使用Ajax加载它们。为简单起见，您还可以创建本机超链接并引用其他HTML文件。例如：
<code>{
"name":"nw.js-example",
"main":"views/main.html",
"window":{
"min_width":400,
"min_height":400,
"icon":"assets/icon.png"
}
}</code>然后，在src/views/中创建https://www.php.cn/link/58c1dbad4977b4c106bca8015477757e文件。这就是我在示例项目中如何操作的。
我们现在已经创建了NW.js项目，包括清单和主视图。我们最终需要一种方法来直接在我们的开发机器上运行NW.js进行开发，并实现一个构建过程，为多个操作系统生成原生应用程序。
为此，我们需要以下两个包：
由于它们与我们的实际应用程序无关（它们仅用于开发目的和生产构建），因此我们在根文件夹中的第二个package.json中将它们创建为devDependencies，以及所需的名称和版本字段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NW.js-example | main</title>
<link rel="stylesheet" href="../styles/common.css">
</head>
<body>
<h1>Hello World :-)</h1>
<🎜>
</body>
</html>现在我们只需要在项目的根文件夹中运行以下命令来安装devDependencies：
<a href="https://www.php.cn/link/58c1dbad4977b4c106bca8015477757e">Something</a>
完成了！让我们构建。
为了简化打包，我们将npm脚本添加到我们的package.json文件中。它们允许我们运行CLI命令，在右侧定义，在左侧使用npm run使用快捷方式定义。我们添加了两个脚本，一个用于开发，一个用于生产：
{
"name":"nw.js-example",
"version":"1.0.0",
"devDependencies":{
"nw":"^0.18.2",
"nw-builder":"^3.1.2"
}
}要直接启动NW.js应用程序，只需运行：
$ npm install
此快捷方式将调用我们在dev下scripts中定义的命令，使用nw包。应该直接在您的开发机器上打开一个新窗口，显示src/views/main.html。
生产构建将使用nw-builder，它支持Windows、Linux和macOS的输出。在我们的示例中，我们为所有这些平台构建了一个包，包括32位和64位版本。对于macOS，目前只能以旧版模式构建32位。（请参阅GitHub上的此问题。）因此，仅构建64位。
要运行我们的生产构建，只需运行：
{
"name":"nw.js-example",
"version":"1.0.0",
"devDependencies":{
"nw":"^0.18.2",
"nw-builder":"^3.1.2"
},
"scripts":{
"dev":"nw src/",
"prod":"nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/"
}
}与直接运行NW.js一样，这将使用我们在scripts中定义的CLI命令。
这需要一段时间……
完成后，查看您的dist/文件夹。它应该如下所示：
$ npm run dev
太棒了，我们快完成了！
由于NW.js基于Chromium，因此手动测试就像在Chrome中一样简单。当您遇到错误（视觉或功能）时，您可以使用键盘快捷键F12或以编程方式使用以下方法打开开发者工具：
<code>nw.js-example/ ├── src/ │ ├── app/ │ │ └── main.js │ ├── assets/ │ │ └── icon.png │ ├── styles/ │ │ └── common.css │ ├── views/ │ │ └── main.html │ └── package.json └── package.json</code>
请注意，这需要SDK构建风格。如果您想在生产中禁用开发者工具，您可以使用不同的风格构建NW.js或禁止F12事件。
自动化单元测试（幸运的是）被广泛用于确保在各种实现中都能正常工作，而无需进行持续的手动测试。
如果您的应用程序没有使用NW.js特定的API方法，那么理论上您可以保留您通常的Web应用程序工作流程——例如，使用Karma作为规范运行器，结合Jasmine作为测试框架。
但是，如果您使用的是NW.js特定的API方法，则需要在NW.js应用程序中运行测试，以确保定义了API方法。一种方法是使用Karma的NW.js启动器插件，例如karma-nodewebkit-launcher。它的工作方式与Karma的任何其他浏览器启动器插件一样：它在NW.js容器中打开应用程序以执行检查，然后自动关闭它。
但是，由于NW.js不是无头的（与PhantomJS等不同），因此它始终需要物理显示器。这意味着在纯CLI服务器上运行测试是不可能的。幸运的是，在这种情况下，您可以使用Xvfb来模拟显示器。例如，这在Travis CI上有效。对于Jenkins，您需要安装Xvfb插件。请参阅GitHub上的此问题以了解更多信息。
希望本文能让您深入了解NW.js的优势和用例。有很多理由说明为什么使用混合应用程序比分发包含HTML文件的.zip文件夹（然后从文件系统运行）更好。NW.js也可以用作原生应用程序的替代品，因为您不需要专注于复杂的GUI，并且您有很多内置功能，例如视频播放器。由于您可以检测环境，因此还可以开发一个应用程序，该应用程序可以使用NW.js在普通Web服务器和客户端机器上运行。通过一些技巧，并且由于强大的Chromium引擎，用户几乎感觉不到与原生应用程序的区别。
创建新的NW.js项目时，首先确定您要使用的框架、模块加载器和预处理器——取决于您熟悉的内容——或者直接从头开始。做出这些决定后，您可以找到适合您需求的NW.js样板。如果没有合适的样板，您可以使用基于本教程的应用程序作为基础。
您首选的样板是什么？或者您首选哪些技术来开发NW.js应用程序？在本文中使用NW.js示例而不是待办事项应用程序实现是否有效？请在评论中告诉我。
NW.js是开发跨平台桌面应用程序的强大工具。与其他框架不同，NW.js允许开发人员使用HTML、CSS和JavaScript编写代码，这些语言通常用于Web开发。这使得Web开发人员更容易过渡到桌面应用程序开发。此外，NW.js具有一个独特的功能，允许直接访问DOM中的Node.js API，从而实现更复杂和强大的功能。
要开始使用NW.js，您首先需要从官方网站下载并安装它。安装完成后，您可以创建一个新的项目目录，添加您的HTML、CSS和JavaScript文件，然后使用NW.js可执行文件运行您的应用程序。NW.js文档提供了有关如何入门的详细指南。
是的，您可以将NW.js用于商业项目。NW.js是开源的，并且可以免费使用，这使其成为开发跨平台桌面应用程序的经济高效的解决方案。但是，需要注意的是，任何使用的第三方模块可能都有其自身的许可要求。
打包和分发NW.js应用程序涉及创建可以在目标平台上运行的独立可执行文件。这可以使用nw-builder或webpack等工具来完成。打包后，应用程序可以通过各种渠道分发，例如直接下载或应用商店。
NW.js支持各种平台。它可以用于为Windows、Mac和Linux开发应用程序。这种跨平台支持是使用NW.js的关键优势之一，因为它允许开发人员编写一次代码并在多个平台上运行。
调试NW.js应用程序类似于调试Web应用程序。您可以使用NW.js捆绑提供的Chrome开发者工具进行调试。这些工具提供了许多用于检查和调试代码的功能。
是的，NW.js的关键功能之一是能够直接在DOM中使用Node.js模块。这允许在您的应用程序中实现更复杂和强大的功能。您可以在NW.js应用程序中使用npm上提供的数千个模块中的任何一个。
更新NW.js应用程序涉及用新版本的应用程序替换旧版本的应用程序。这可以由用户手动完成，或者您可以使用nw-updater等模块在应用程序中实现自动更新功能。
是的，NW.js允许通过Node.js直接访问原生API。这意味着您可以在应用程序中使用诸如文件系统、网络、设备等原生功能。这是NW.js优于传统Web技术的一个关键优势。
优化NW.js应用程序的性能涉及各种技术，例如最小化和连接JavaScript文件、优化图像以及使用高效的算法和数据结构。此外，您可以使用Chrome开发者工具来分析和调试性能问题。
This revised output maintains the original image placement and format, rephrases sentences and paragraphs for originality while preserving the core meaning, and uses more concise and impactful language. It also addresses the slightly repetitive nature of the original FAQ section.
以上是使用NW.JS构建跨平台桌面应用的详细内容。更多信息请关注PHP中文网其他相关文章！
