使用Dojo及nodewebkit开发跨平台桌面应用.docVIP

前言 作为一名 Web 前端工程师，我们的工作在大多数情况下，就是与各种浏览器打交道，开发以页面为主的 Web 应用程序。为此，非常的熟悉 HTML、CSS、JavaScript 以及各类主流的 JavaScript 工具库，比如 Dojo、jQuery、YUI 等。但是，浏览器的安全沙盒把我们限制在了一个小小的圈子里，我们不能用 JavaScript 访问操作系统的本地文件系统，不能发起一个 Socket 请求, 不能获取 CPU 和内存的使用情况, 也不能访问关系型数据库或者 NoSQL 数据库。 您是否一直在憧憬着，某一天，您使用着您最拿手的前端技能，来开发那些本来由 Java,、C++等语言所开发的桌面应用程序呢? 很幸运，答案是肯定的！Node-webkit 这个开源项目的出现，为 Web 前端开发人员提供了一个新的舞台；它更给我们带来了一个实际的价值，让我们现有的 Web 应用，可以更方便的移植到我们的桌面上来，加以本地功能的扩展，获取更大的用户体验度。 回页首 Node-webkit 是项目托管网站 Github 上一个非常热门的开源项目，它基于著名的浏览器开源项目 Chromium 和服务器端 JavaScript 实现 Node.js 的一个应用程序运行时环境。假如您对它还没有任何头绪，不妨可以这样来想象一下这个运行时环境：它是一个支持 HTML5 特性的全功能 Web 浏览器, 并且它没有安全沙盒的限制, 我们可以用 JavaScript 来操作 HTML DOM 对象，也可以来调用操作系统的本地资源。 我们来通过一段最简单的代码，窥探一下 Node-webkit 的样子: 安装 有两种方式可以实现 Node-webkit 的安装：第一种是从其项目主页面, 下载源代码，然后自行编译安装；或者, 我们为了方便起见, 可以直接下载它提供的编译好的二进制可执行文件, 目前支持三个操作系统平台：Windows、Linux 以及 Mac。 我们的教程在后文中都将主要以 Windows 为例，其他平台请具体参考 Node-webkit 的项目文档。以下是安装的具体步骤： 将下载的二进制文件放到一个文件夹下，例如 C:\Program Files\node-webki 在 Windows 的环境变量 PATH 中，添加路径 C:\Program Files\node-webki 至此, Node-webkit 安装就算完成了。我们可以在命令行中运行 nw，如果您看到如下窗口出现, 则表示 Node-webkit 在您的计算机上已完全安装成功： 创建第一个 Node-webkit 应用 复杂的应用从 Hello World 开始！让我们一步一步来建立我们第一个最简单易懂的 Node-webkit 应用程序。 首先，在您计算机上任意目录下，建立一个命名为 sample-app 的文件夹，它将被用来存放我们的示例应用程序代码和其他所有需要的资源文件； 然后在 sample-app 文件夹下，预建立一些空的子文件夹，用来合理的存放不同类型的文件； 最后，建立两个文件：index.html 和 package.json。至此，sample-app 文件夹中看起来应该是这样的一个结构： 对这样一个目录结构，是不是觉得非常熟悉？没错，它就是一个标准的 Web 工程的目录结构，因为 Node-webkit 的开发继承了 Web 前端开发的一切，所以您所掌握的 Web 开发经验将使您更快速的掌握它。 下一步，我们来看一下 index.html 和 package.json 这两个重要文件中的内容： 它将是我们这个应用程序的入口，现在它包含的仅仅是一段最简单的 HTML 文本，显示了一个Hello World!的问候，我们将在后文中一步步的充实它的内容。 该文件是 node-webkit 的应用描述文件，一个完整的 node-webkit 应用程序必须包含这样一个文件。它用于定义应用程序的基本信息以及运行相关的参数，比如名称、介绍、入口文件名称以及应用程序窗口的各项配置，如窗口的显示尺寸、显示位置、是否显示工具栏等等。您可以阅读Node-webkit 描述文件格式来获取更多相关信息。 运行 以上这些文件构成了一个最简单基本的 node-webkit 程序。我们非常清楚如何让一个 HTML 文件在浏览器中运行起来，但是，在 node-webkit 环境下，如何让它运行起来呢？ 打开您的命令行工具，进入 sample-app 所在的目录，然后执行命令：nw sample-app 成功运行中的窗口界面如下所示： 基于 Dojo 来设计桌面应用 好了，我们接下来要在前文的基础上，使用 Node-webkit 开发个稍微像样一点的