OSC协作翻译
编译自：BuildingaCross-platformDesktopAppwithNW.js
链接：https://www.sitepoint.com/cross-platform-desktop-app-nw-js/
译者：Viyi,边城,spache,Tony
NW.js是一个利用Web技能创建本地应用的框架，如HTML、Java和CSS。简单地说，当你在利用平凡的流程开辟一个Web应用时，开辟完成后，运行一个天生器，将全部东西编译成一个本地应用，它会像一个欣赏器一样运行你的Web应用。这种应用就被称为“Hybrid应用（一种肴杂本地编程和Web编程技能的应用）”。
Hybrid应用的巨大之处，不但在于它可以利用你认识的语言（HTML、Java和CSS）来开辟，还由于它比平凡的Web应用更有良好性：
●控制欣赏器和欣赏器版本（你知道你的应用是调用的什么欣赏器）。NW.jshybrid应用利用Chromium来表现—这是一种开源欣赏器，也是GoogleChrome（谷歌欣赏器）的核心。因此，能在Chrome中运行的应用也能在NW.js中运行。
●控制视窗。比方，你可以界说一个固定巨细，大概最小化/最大化的视窗。
●对本地文件的访问不会受同源战略的束缚。假如你想在欣赏器通过打开一个不在雷同目次的本地文件，哀求会制止。而NW.js应用中关闭了如许的举动。
它们也提供了API，带来如下长处：
●整合Node.js
●访问剪贴板
●访问文件体系
●访问硬件（比如获取打印机列表）
●托盘图标
●自界说文件选择对话框
●整合shell（在默认的资源管理器或欣赏器中打开文件或URL）
●自界说主窗口的选项（关闭按钮、菜单栏）和上下文菜单
●设置和获取绽放品级。
看起来不错？那让我们开始吧。在这篇文章中，我们会通过练习认识NW.js，并学习怎样创建一个Hybrid应用。用于这篇文章的示例应用已经在GitHub上预备好了。
NW.js与Electron相比之下的上风
起首要说的是，NW.js并不是唯一的Bybrid应用框架。另一个如许的框架叫Electron。它诞生于2013年，比NW.js晚两年，不外由于它来自于GitHub，很快就被各人所认识。如今你大概对它们之间的区别感爱好。这里罗列了与Electron相比，NW.js的上风：
●支持chrome.*API。这些API可用于与欣赏器交互。（你可以在NW.js文档中找到更多相干的信息)
●支持Chrome应用。Chrome应用是利用Web语句编写并打包的应用。（更多信息请参阅Chrome开辟者文档。）这些应用与NW.js差别，由于它们没有整合Node.js，而且通过ChromeWebStore发布。●（Chrominum会在2018年8月取消对它的支持（参阅他们的博客）。不外由于这篇文章所说的缘故起因，NW.js仍旧会支持Chrome应用。）
●支持NaCl(NativeClient，本地客户端)和PNaCl(可移植的本地客户端)应用。它们致力于性能，因此利用C和C++编写。（参阅这篇教程相识如安在NW.js中利用它们。）
拥有V8的映像源码掩护，掩护你的应用程序源码。利用nwjc工具可以将你的代码编译为本地代码。（更多信息参考这篇文章。）
拥有一个内建的PDF阅读器。
●答应打印预览。
●支持Node.js整合WebWorkers。这用于编写多线程应用。
不外，Electron也有值得一提的长处：
●内建主动更新（你可以在这个事项里找到关于NW.js的主动更新）。
●主动向长途服务器陈诉程序瓦解。NW.js只会把错误信息写入一个本地文件，必要手工提交。
尚有一个紧张的区别。NW.js应用的入口是一个HTML文件中的Form。这个HTML文件会直接在GUI中打开。
另一方面，Electron应用利用一个Java文件作为入口。这个Java文件由另一个主进程打开，然后由它在GUI中打开HTML。如许的话，理论上你可以不通过GUI运行Electron应用。同样的原理，关闭GUI不会关闭主进程；你必要调用一个API来停止主进程。
固然Electron不利用GUI来启动Java写的桌面应用，但NW.js应用却更轻易创建示基于表现HTML的应用。
留意:假如你确实关心Electron的上风，看看SitePoint最新的文章利用Electon创建桌面应用。
创建一个演示应用
来，开始创建我们的应用，稍后我们会把它编译成本地应用。由于创建Web应用的方式多种多样——利用差别的JS语言（Type、Coffe等），模块加载器（RequireJS、webpack、SystemJS等），框架（AngularJS、React、Vuew.js等）和（样式表）预处理惩罚器（SCSS、LESS、Haml等）——每个人都有本身的偏好，我们只利用根本的技能，HTML、CSS和JS（ES6标准）。
NW.js没有样板(初始项目)来完成初始的设置。它们都通过特定的框架、模块加载器或预处理惩罚器来创建。然而，我们重新开始实现一个简单的NW.js应用程序。它会比力易懂，之后你可以很轻易按本身的需求定制，大概把它变成样板。
项目布局
起首，我们必要创建项的目次布局和文件：
nw.js-example/
├──src/
│├──app/
││└──main.js
│├──assets/
││└──icon.png
│├──styles/
││└──common.css
│├──views/
││└──main.html
│└──package.json
└──package.json
阐明：
●src/应用程序源文件。
●src/app/Java文件。
●src/assets/图片，在我们的例子中只有icon.png文件，它将作为一个窗口图标来表现。
●src/styles/通常包罗SCSS或LESS文件，在我们的例子中，仅仅是一个简单的CSS文件。
●src/views/包罗HTML视图文件。
●src/package.jsonNW.js应用程序清单文件（参考清单文件格式），我们也可以在这个文件中为应用程序指定特别的依靠项。
●package.json是一个npm包文件，我们用它来构建工作流，也可以指定特别的依靠，这在实际的NW.js应用程序中不是必须的，比方根据依靠构建。
创建清单文件
如今，我们已经创建了项目布局和文件，可以从NW.js的清单文件src/package.json开始了。根据文档，这个文件根本上仅必要两个属性：name，一个应用程序名称，和main，一个作为入口的HTML文件的路径。但是我们必要添加更多信息，如窗口的图标的路径，以及最小宽度和高度，以确保用户不会看到任何奇怪的事变：
{
"name":"nw.js-example",
"main":"views/main.html",
"window":{
"min_width":400,
"min_height":400,
"icon":"assets/icon.png"}
}
就是如许！应用程序在开始运行后，将打开src/views/main.html，main的路径是以清单文件（manifestfile）为参考的相对路径。
创建主视图
在这个时间我们可以编写一个待服务项程序。但是我们要专注于NW.js和它本身的功能。因此，我更倾向让你本身来决定我们的应用程序的功能。我在GitHub上创建了一个示例项目NW.js-示例来演示几个NW.js功能，比方，Node.js集成和剪贴板访问。您随时可以在应用程序中用它来测试和研究。固然你也可以利用其他的功能。
不管你作何决定，你都必须要创建thesrc/views/main.html文件。由于它是我们应用程序的入口点。文件内容如下：
!doctypehtml
html
head
metacharset="utf-8"
titleNW.js-example|main/title
linkrel="stylesheet"href="../styles/common.css"
/head
body
h1HelloWorld:-)/h1
src="../app/main.js"/
/body
/html
在真正的应用程序中，你大概有个多个其他的视图文件并用Ajax加载它们。
为了简单起见，您还可以创建本地超链接并引用其他HTML文件。比方：
ahref="something.html"Something/a
然后，在src/views/中创建something.html文件。
安装NW.js
如今我们创建了NW.js项目，包罗清单和主视图。终极我们必要一个方法直接在开辟中运行NW.js，并通过构建过程天生可运行于多个体系的本地应用。
为达此目标，我们必要两个包：
●nw(开辟)
●nw-builder(生产)
既然它们与我们的应勤奋能无关（利用它们只是为了开辟和生产目标），我们在第二个，即放在根目次下的package.json中创建devDependencies设置，参加它们。这个设置与必须的name和version字段并列：
{
"name":"nw.js-example",
"version":"1.0.0",
"devDependencies":{
"nw":"^0.18.2",
"nw-builder":"^3.1.2"}
}
如今只必要在项目标根目次下运行下面的下令来安装devDependencies：
$npminstall
搞定！可以构建了。
打包和发布
我们在package.json中参加npm脚原来让打包变得简单。npm脚本在右边界说要运行的CLI下令，在左边界说它的快捷方式，然后答应我们通过npmrun来运行指定的快捷方式。如今添加两个脚本，一个用于开辟，一个用于生产：
{
"name":"nw.js-example",
"version":"1.0.0",
"devDependencies":{
"nw":"^0.18.2",
"nw-builder":"^3.1.2"},
"s":{
"dev":"nwsrc/",
"prod":"nwbuild--platformswin32,win64,osx64,linux32,linux64--buildDirdist/src/"}
}
直接运行NW.js
直接运行NW.js应用，只必要这个下令：
$npmrundev
这个快捷方式会调用我们界说在下dev对应的下令以利用nw包。开辟呆板上直接打开一个新窗口，表现着src/views/main.html。
生产构建
要举行生产构建必要利用nw-builder，它支持针对Windows、Linux和macOS举行输出。在我们的例子中，我们会针对全部这些平台打包，而且包罗32位和64位版本。对于macOS来说，如今只能在从前的模式下构建32位的版本。（参阅GitHub上的这个issue。）以是，我们只构建64位版本。
运行如下下令举行生产构建：
$npmrunprod
和直接运行NW.js一样，它也利用我们界说在s中的CLI下令。
然后得等一会儿…
完成之后，看看你的dist/目次，就像如许：
dist/
└──nw.js-example/
├──linux32/
├──linux64/
├──osx64/
├──win32/
└──win64/
非常好，我们差不多完成了！
测试和调试
手工测试
既然NW.js是基于Chrominum的，那么它的手工测试和Chrome一样简单。假如你碰到一个BUG——可视结果大概功能性的——你都可以通过快捷键F12大概下面的程序打开开辟者工具：
nw.Window.get().showDevTools();
留意这必要SDKbuildflavor[译者注：flavor可以明白为插件大概功能扩展]。假如你想在生产构建的时间去掉开辟者工具，你可以利用另一个flavor大概直接制止F12变乱。
主动化测试
主动化的单位测试（幸好有你）广泛用于确保差别的实现能精确工作，这克制了总是举行手工测试。
假如你的应用不利用NW.jsAPI提供的特有方法，理论上来说你可以停顿在一样平常的Web应用工作流上——比方，把Karma作为一个运行器与作为框架的Jasmine连合利用。
但是假如你利用NW.jsAPI特有的方法，你必要在NW.js应用中运行测试，这才华确保利用到的API方法存在。一种方法是利用NW.js的Karma启动器插件，比如karma-nodewebkit-launcher。它和别的欣赏器的Karma启动器插件一样：在NW.js容器中打开应用并举行查抄，完成之后再主动关闭应用。
不外既然NW.js不是headless（就像PhantomJS那样的)[译者注：Headless欣赏器就是没有GUI的欣赏器],它总是必要表现出来。换句话说，它不能在纯CLI服务器上运行测试。荣幸的是，这种环境下可以利用Xvfb来模仿表现。在Jenkins[译者注：一个连续集成引擎]中，你必要安装Xvfb插件。更多信息参阅GitHub上的这个讨论。
总结
盼望本文先容已让你认识NW.js的长处及利用环境。利用肴杂应用程序，要比分发包罗HTML文件的压缩文件夹然后运行好得多，有很多因素可以证明这一点。NW.js可以用来代替本地的应用程序，由于你不再必要专注于复杂的GUI，而且，它有很多内置的功能，如视频播放器。由于可以检测运行环境，你可以用NW.js开辟既能在通例Web服务器上利用，又能在客户端盘算机上利用的应用程序。共同利用一些小本领，再加上有强大的Chromium引擎，用户体验险些与本机应用程序无异。
当创建一个新的NW.js项目时，你起首要明白想利用的框架、模块加载器和预处理惩罚器——这取决于你对这些工具的认识度——否则只能是重新开始。做好决定之后，您可以探求一个得当您需求的NW.js样板文件。假如没有得当的样板，您可以利用基于本教程的应用程序作为开辟的底子。
保举阅读
2017年你应该学习的编程语言、框架和工具
GoogleGo语言从入门到应用必备开源项目
27款iOS开源库，让你的开辟溜到飞起
Java的开源功能插件和框架小集锦
7款从HTML文档提取文本的工具
点击“阅读原文”查察更多出色内容
CopyrightYourWebSite.SomeRightsReserved.
京ICP备2023016396号-1PoweredByESCLINK.
我要评论