最好用的磁力引擎_最好的磁力引擎 磁力猫（2020年好用的磁力引擎）

摘要： 　　OSC 协作翻译　　编译自：Building a Cross-platform Desktop App with NW.js　　链接：https://www.sitepoint...

　　OSC 协作翻译

　　编译自：Building a Cross-platform Desktop App with NW.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.js hybrid 应用利用 Chromium 来表现 — 这是一种开源欣赏 器，也是 Google Chrome（谷歌欣赏 器）的核心 。因此，能在 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，而且通过 Chrome Web Store 发布。● （Chrominum 会在2018年8月取消对它的支持（参阅他们的博客）。不外 由于 这篇文章所说的缘故起因 ，NW.js 仍旧 会支持 Chrome 应用。）

　　● 支持 NaCl (Native Client，本地 客户端) 和 PNaCl (可移植的本地 客户端) 应用。它们致力于性能，因此利用 C 和 C++ 编写。（参阅这篇教程相识 如安在 NW.js 中利用 它们。）

　　拥有 V8 的映像源码掩护 ，掩护 你的应用程序源码。利用 nwjc 工具可以将你的代码编译为本地 代码。（更多信息参考这篇文章。）

　　拥有一个内建的 PDF 阅读器。

　　● 答应 打印预览。

　　● 支持 Node.js 整合 Web Workers。这用于编写多线程应用。

　　不外 ，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.json NW.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 的路径是以清单文件（manifest file）为参考的相对路径。

　　创建主视图

　　在这个时间 我们可以编写一个待服务 项程序。但是我们要专注于 NW.js 和它本身 的功能。因此，我更倾向让你本身 来决定我们的应用程序的功能。 我在 GitHub 上创建了一个示例项目 NW.js-示例来演示几个 NW.js功 能，比方 ，Node.js 集成和剪贴板访问。 您随时可以在应用程序中用它来测试和研究。固然 你也可以利用 其他的功能。

　　不管你作何决定，你都必须要创建 thesrc/views/main.html 文件。由于 它是我们应用程序的入口点。文件内容如下：

　　!doctype html

　　html

　　head

　　meta charset="utf-8"

　　titleNW.js-example | main/title

　　link rel="stylesheet" href="../styles/common.css"

　　/head

　　body

　　h1Hello World :-)/h1

　　 src="../app/main.js"/

　　/body

　　/html

　　在真正的应用程序中，你大概 有个多个其他的视图文件并用 Ajax 加载它们。

　　为了简单 起见，您还可以创建本地 超链接并引用其他 HTML 文件。比方 ：

　　a href="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：

　　$ npm install

　　搞定！可以构建了。

　　打包和发布

　　我们在 package.json 中参加 npm 脚原来 让打包变得简单 。npm 脚本在右边界说 要运行的 CLI 下令 ，在左边界说 它的快捷方式，然后答应 我们通过 npm run 来运行指定的快捷方式。如今 添加两个脚本，一个用于开辟 ，一个用于生产：

　　{

　　"name":"nw.js-example",

　　"version":"1.0.0",

　　"devDependencies":{

　　"nw":"^0.18.2",

　　"nw-builder":"^3.1.2" },

　　"s":{

　　"dev":"nw src/",

　　"prod":"nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/" }

　　}

　　直接运行 NW.js

　　直接运行 NW.js 应用，只必要 这个下令 ：

　　$ npm run dev

　　这个快捷方式会调用我们界说 在 下 dev 对应的下令 以利用 nw 包。开辟 呆板 上直接打开一个新窗口，表现 着 src/views/main.html。

　　生产构建

　　要举行 生产构建必要 利用 nw-builder，它支持针对 Windows、Linux 和 macOS 举行 输出。在我们的例子中，我们会针对全部 这些平台打包，而且 包罗 32位和64位版本。对于 macOS 来说，如今 只能在从前 的模式下构建 32位的版本。（参阅 GitHub 上的这个 issue。）以是 ，我们只构建64位版本。

　　运行如下下令 举行 生产构建：

　　$ npm run prod

　　和直接运行 NW.js 一样，它也利用 我们界说 在 s 中的 CLI 下令 。

　　然后得等一会儿 …

　　完成之后，看看你的 dist/ 目次 ，就像如许 ：

　　dist/

　　└── nw.js-example/

　　├── linux32/

　　├── linux64/

　　├── osx64/

　　├── win32/

　　└── win64/

　　非常好，我们差不多完成了！

　　测试和调试

　　手工测试

　　既然 NW.js 是基于 Chrominum 的，那么它的手工测试和 Chrome 一样简单 。假如 你碰到 一个BUG——可视结果 大概 功能性的——你都可以通过快捷键F12大概 下面的程序打开开辟 者工具：

　　nw.Window.get().showDevTools();

　　留意 这必要 SDK build flavor[译者注：flavor 可以明白 为插件大概 功能扩展]。假如 你想在生产构建的时间 去掉开辟 者工具，你可以利用 另一个flavor大概 直接制止 F12变乱 。

　　主动 化测试

　　主动 化的单位 测试（幸好有你）广泛用于确保差别 的实现能精确 工作，这克制 了总是举行 手工测试。

　　假如 你的应用不利用 NW.js API 提供的特有方法，理论上来说你可以停顿 在一样平常 的Web应用工作流上——比方 ，把Karma作为一个运行器与作为框架的Jasmine连合 利用 。

　　但是假如 你利用 NW.js API 特有的方法，你必要 在 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 年你应该学习的编程语言、框架和工具

　　Google Go 语言从入门到应用必备开源项目

　　27 款 iOS 开源库，让你的开辟 溜到飞起

　　Java 的开源功能插件和框架小集锦

　　7 款从 HTML 文档提取文本的工具

　　点击“阅读原文”查察 更多出色 内容