使用 NW.js 构建跨平台桌面应用程序
c19354837
8年前
<p>NW.js 是一个使用 Web 技术创建本地应用的框架，如 HTML、JavaScript 和 CSS。简单地说，当你在使用普通的流程开发一个 Web 应用时，开发完成后，运行一个生成器，将所有东西编译成一个本地应用，它会像一个浏览器一样运行你的 Web 应用。这种应用就被称为“Hybrid 应用（一种混合本地编程和 Web 编程技术的应用）”。</p> <p>Hybrid 应用的伟大之处，不仅在于它可以使用你熟悉的语言（HTML、JavaScript 和 CSS）来开发，还因为它比普通的 Web 应用更有优越性：</p> <ul> <li> <p>控制浏览器和浏览器版本（你知道你的应用是调用的什么浏览器）。NW.js hybrid 应用使用 Chromium 来显示— 这是一种开源浏览器，也是 Google Chrome（谷歌浏览器）的核心。因此，能在 Chrome 中运行的应用也能在 NW.js 中运行。</p> </li> <li> <p>控制视窗。例如，你可以定义一个固定大小，或者最小化/最大化的视窗。</p> </li> <li> <p>对本地文件的访问不会受 同源策略 的约束。如果你想在浏览器通过 XMLHttpRequest 打开一个不在相同目录的本地文件，请求会阻止。而 NW.js 应用中关闭了这样的行为。</p> </li> </ul> <p>它们也提供了 API，带来如下优点：</p> <ul> <li> <p>整合 Node.js</p> </li> <li> <p>访问剪贴板</p> </li> <li> <p>访问文件系统</p> </li> <li> <p>访问硬件（比如获取打印机列表）</p> </li> <li> <p>托盘图标</p> </li> <li> <p>自定义文件选择对话框</p> </li> <li> <p>整合 shell（在默认的资源管理器或浏览器中打开文件或 URL）</p> </li> <li> <p>自定义主窗口的选项（关闭按钮、菜单栏）和上下文菜单</p> </li> <li> <p>设置和获取绽放等级。</p> </li> </ul> <p>看起来不错？那让我们开始吧。在这篇文章中，我们会通过练习熟悉 NW.js，并学习如何创建一个 Hybrid 应用。</p> <h2>NW.js 与 Electron 相比之下的优势</h2> <p>首先要说的是，NW.js 并不是唯一的 Bybrid 应用框架。另一个这样的框架叫 Electron 。它诞生于 2013年，比 NW.js 晚两年，不过因为它来自于 GitHub，很快就被大家所认识。现在你可能对它们之间的区别感兴趣。这里列举了与 Electron 相比，NW.js 的优势：</p> <ul> <li> <p>支持 chrome.* API。这些 API 可用于与浏览器交互。</p> </li> <li> <p>支持 Chrome 应用 。Chrome应用是使用 Web 语句编写并打包的应用。这些应用与 NW.js 不同，因为它们没有整合 Node.js，而且通过 Chrome Web Store 发布。（Chrominum 会在2018年8月取消对它的支持。不过因为 这篇文章 所说的原因，NW.js 仍然会支持 Chrome 应用。）</p> </li> <li> <p>支持 NaCl (Native Client，本地客户端) 和 PNaCl (可移植的本地客户端) 应用。它们致力于性能，因此使用 C 和 C++ 编写。</p> </li> <li> <p>拥有 V8 的映像源码保护，保护你的应用程序源码。使用 nwjc 工具可以将你的代码编译为本地代码。</p> </li> <li> <p>拥有一个内建的 PDF 阅读器。</p> </li> <li> <p>允许打印预览。</p> </li> <li> <p>支持 Node.js 整合 Web Workers 。这用于编写多线程应用。</p> </li> </ul> <p>不过，Electron 也有值得一提的优点：</p> <ul> <li> <p>内建自动更新</p> </li> <li> <p>自动向远程服务器报告程序崩溃。NW.js 只会把错误信息写入一个本地文件，需要手工提交。</p> </li> </ul> <p>还有一个重要的区别。NW.js 应用的入口是一个 HTML 文件中的 Form。这个 HTML 文件会直接在 GUI 中打开。</p> <p>另一方面，Electron 应用使用一个 JavaScript 文件作为入口。这个 JavaScript 文件由另一个主进程打开，然后由它在 GUI 中打开 HTML。这样的话，理论上你可以不通过 GUI 运行 Electron 应用。同样的道理，关闭 GUI 不会关闭主进程；你需要调用一个 API 来终止主进程。</p> <p>虽然 Electron 不使用 GUI 来启动 JavaScript 写的桌面应用，但 NW.js 应用却更容易建立示基于显示 HTML 的应用。</p> <h2>创建一个演示应用</h2> <p>来，开始创建我们的应用，稍后我们会把它编译成本地应用。因为创建 Web 应用的方式多种多样——使用不同的 JS 语言（TypeScript、CoffeScript 等），模块加载器（RequireJS、webpack、SystemJS 等），框架（AngularJS、React、Vuew.js 等）和（样式表）预处理器（SCSS、LESS、Haml 等）——每个人都有自己的偏好，我们只使用基本的技术，HTML、CSS 和 JS（ES6 标准）。</p> <p>NW.js 没有样板 (初始项目) 来完成初始的设置。它们都通过特定的框架、模块加载器或预处理器来创建。然而，我们从头开始实现一个简单的 NW.js 应用程序。它会比较易懂，之后你可以很容易按自己的需求定制，或者把它变成样板。</p> <h3>项目结构</h3> <p>首先，我们需要创建项的目录结构和文件：</p> <pre> <code class="language-javascript">nw.js-example/ ├── src/ │ ├── app/ │ │ └── main.js │ ├── assets/ │ │ └── icon.png │ ├── styles/ │ │ └── common.css │ ├── views/ │ │ └── main.html │ └── package.json └── package.json</code></pre> <p>说明：</p> <ul> <li> <p>src/ 应用程序源文件。</p> </li> <li> <p>src/app/ JavaScript 文件。</p> </li> <li> <p>src/assets/ 图片，在我们的例子中只有 icon.png 文件，它将作为一个窗口图标来显示。</p> </li> <li> <p>src/styles/ 通常包含 SCSS 或 LESS 文件，在我们的例子中，仅仅是一个简单的 CSS 文件。</p> </li> <li> <p>src/views/ 包含 HTML 视图文件。</p> </li> <li> <p>src/package.json NW.js 应用程序清单文件，我们也可以在这个文件中为应用程序指定特殊的依赖项。</p> </li> <li> <p>package.json 是一个 npm 包文件 ，我们用它来构建工作流，也可以指定特殊的依赖，这在实际的 NW.js 应用程序中不是必须的，例如根据依赖构建。</p> </li> </ul> <h3>创建清单文件</h3> <p>现在，我们已经创建了项目结构和文件，可以从 NW.js 的清单文件 src/package.json 开始了。根据 文档 ，这个文件基本上仅需要两个属性：name，一个应用程序名称，和 main，一个作为入口的 HTML 文件的路径。但是我们需要添加更多信息，如窗口的图标的路径，以及最小宽度和高度，以确保用户不会看到任何奇怪的事情：</p> <pre> <code class="language-javascript">{ "name":"nw.js-example", "main":"views/main.html", "window":{ "min_width":400, "min_height":400, "icon":"assets/icon.png" } }</code></pre> <p>就是这样！应用程序在开始运行后，将打开 src/views/main.html，main 的路径是以清单文件（ manifest file ）为参考的相对路径。</p> <h3>创建主视图</h3> <p>在这个时候我们可以编写一个待办事项程序。但是我们要专注于 NW.js 和它本身的功能。因此，我更倾向让你自己来决定我们的应用程序的功能。 我在 GitHub 上创建了一个示例项目 NW.js-示例 来演示几个 NW.js功 能，例如，Node.js 集成和剪贴板访问。 您随时可以在应用程序中用它来测试和研究。当然你也可以使用其他的功能。</p> <p>不管你作何决定，你都必须要创建 thesrc/views/main.html 文件。因为它是我们应用程序的入口点。文件内容如下：</p> <pre> <code class="language-javascript"><!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> <script src="../app/main.js"></script> </body> </html></code></pre> <p>在真正的应用程序中，你可能有个多个其他的视图文件并用 Ajax 加载它们。</p> <p>为了简单起见，您还可以创建本地超链接并引用其他 HTML 文件。 例如：</p> <pre> <code class="language-javascript"><a href="something.html">Something</a></code></pre> <p>然后，在 src / views / 中创建 something.html 文件。</p> <h2>安装 NW.js</h2> <p>现在我们创建了 NW.js 项目，包括清单和主视图。最终我们需要一个方法直接在开发中运行 NW.js，并通过构建过程生成可运行于多个系统的本地应用。</p> <p>为达此目的，我们需要两个包：</p> <ul> <li> <p>nw (开发)</p> </li> <li> <p>nw-builder (生产)</p> </li> </ul> <p>既然它们与我们的应用功能无关（使用它们只是为了开发和生产目的），我们在第二个，即放在根目录下的 package.json 中创建 devDependencies 配置 ，加入它们。这个配置与 必须的 name 和 version 字段并列：</p> <pre> <code class="language-javascript">{ "name":"nw.js-example", "version":"1.0.0", "devDependencies":{ "nw":"^0.18.2", "nw-builder":"^3.1.2" } }</code></pre> <p>现在只需要在项目的根目录下运行下面的命令来安装 devDependencies：</p> <pre> <code class="language-javascript">$ npm install</code></pre> <p>搞定！可以构建了。</p> <h2>打包和发布</h2> <p>我们在 package.json 中加入 npm 脚本来让打包变得简单。npm 脚本在右边定义要运行的 CLI 命令，在左边定义它的快捷方式，然后允许我们通过 npm run 来运行指定的快捷方式。现在添加两个脚本，一个用于开发，一个用于生产：</p> <pre> <code class="language-javascript">{ "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/" } }</code></pre> <h3>直接运行 NW.js</h3> <p>直接运行 NW.js 应用，只需要这个命令：</p> <pre> <code class="language-javascript">$ npm run dev</code></pre> <p>这个快捷方式会调用我们定义在 script 下 dev 对应的命令以 使用 nw 包 。开发机器上直接打开一个新窗口，显示着 src/views/main.html。</p> <h3>生产构建</h3> <p>要进行生产构建需要使用 nw-builder ，它支持针对 Windows、Linux 和 macOS 进行输出。在我们的例子中，我们会针对所有这些平台打包，并且包含32位和64位版本。对于 macOS 来说，目前只能在以前的模式下构建 32位的版本。所以，我们只构建64位版本。</p> <p>运行如下命令进行生产构建：</p> <pre> <code class="language-javascript">$ npm run prod</code></pre> <p>和直接运行 NW.js 一样，它也使用我们定义在 scripts 中的 CLI 命令。</p> <p>然后得等一会儿 …</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/bb8d0c23ea459445c9fe17e7398b4610.png"></p> <p>完成之后，看看你的 dist/ 目录，就像这样：</p> <pre> <code class="language-javascript">dist/ └── nw.js-example/ ├── linux32/ ├── linux64/ ├── osx64/ ├── win32/ └── win64/</code></pre> <p>非常好，我们差不多完成了！</p> <h2>测试和调试</h2> <h3>手工测试</h3> <p>既然 NW.js 是基于 Chrominum 的，那么它的手工测试和 Chrome 一样简单。如果你遇到一个BUG——可视效果或者功能性的——你都可以通过 快捷键F12 或者下面的程序打开开发者工具：</p> <pre> <code class="language-javascript">nw.Window.get().showDevTools();</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/d532bf7562e88f9faf75a444dd380853.png"></p> <p>注意这需要 SDK build flavor [译者注：flavor 可以理解为插件或者功能扩展]。如果你想在生产构建的时候去掉开发者工具，你可以使用另一个 flavor 或者直接阻止F12事件。</p> <h3>自动化测试</h3> <p>自动化的单元测试（幸好有你）广泛用于确保不同的实现能正确工作，这避免了总是进行手工测试。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/125839cd5b6012305a97771a4bae8669.png"></p> <p>如果你的应用不使用 NW.js API 提供的特有方法，理论上来说你可以停留在一般的Web应用工作流上——例如，把 Karma 作为一个运行器与作为框架的 Jasmine 联合使用。</p> <p>但是如果你使用 NW.js API 特有的方法，你需要在 NW.js 应用中运行测试，这才能确保使用到的 API 方法存在。一种方法是使用 NW.js 的 Karma 启动器插件，比如 karma-nodewebkit-launcher 。它和其它浏览器的 Karma 启动器插件一样：在 NW.js 容器中打开应用并进行检查，完成之后再自动关闭应用。</p> <p>不过既然 NW.js 不是 headless （就像 PhantomJS 那样的) [译者注：Headless 浏览器就是没有 GUI 的浏览器] , 它总是需要显示出来。换句话说，它不能在纯 CLI 服务器上运行测试。幸运的是，这种情况下可以使用 Xvfb 来模拟显示。</p> <p>希望本文介绍已让你熟悉 NW.js 的优点及使用环境。使用混合应用程序，要比分发包含 HTML 文件的压缩文件夹然后运行好得多，有很多因素可以证明这一点。NW.js 可以用来代替本地的应用程序，因为你不再需要专注于复杂的 GUI，并且，它有很多内置的功能，如视频播放器。 由于可以检测运行环境，你可以用 NW.js 开发既能在常规 Web 服务器上使用，又能在客户端计算机上使用的应用程序。配合使用一些小技巧，再加上有强大的 Chromium 引擎，用户体验几乎与本机应用程序无异。</p> <p>当创建一个新的 NW.js 项目时，你首先要明确想使用的框架、模块加载器和预处理器——这取决于你对这些工具的熟悉度——否则只能是从头开始。做好决定之后，您可以寻找一个适合您需求的 NW.js 样板文件。</p> <p>来自：https://www.oschina.net/translate/cross-platform-desktop-app-nw-js</p> <p> </p>