使用 Dojo 和 node-webkit 开发跨平台桌面应用（1）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-10-22 17:07 | 只看该作者

使用 Dojo 和 node-webkit 开发跨平台桌面应用（1）

前言作为一名 Web 前端工程师，我们的工作在大多数情况下，就是与各种浏览器打交道，开发以页面为主的 Web 应用程序。为此，非常的熟悉 HTML、CSS、JavaScript 以及各类主流的 JavaScript 工具库，比如 Dojo、jQuery、YUI 等。但是，浏览器的安全沙盒把我们限制在了一个小小的圈子里，我们不能用 JavaScript 访问操作系统的本地文件系统，不能发起一个 Socket 请求, 不能获取 CPU 和内存的使用情况, 也不能访问关系型数据库或者 NoSQL 数据库。
您是否一直在憧憬着，某一天，您使用着您最拿手的前端技能，来开发那些本来由 Java,、C++等语言所开发的桌面应用程序呢? 很幸运，答案是肯定的！Node-webkit 这个开源项目的出现，为 Web 前端开发人员提供了一个新的舞台；它更给我们带来了一个实际的价值，让我们现有的 Web 应用，可以更方便的移植到我们的桌面上来，加以本地功能的扩展，获取更大的用户体验度。
Node-webkit 架构概述Node-webkit 是项目托管网站 Github 上一个非常热门的开源项目，它基于著名的浏览器开源项目 Chromium 和服务器端 JavaScript 实现 Node.js 的一个应用程序运行时环境。假如您对它还没有任何头绪，不妨可以这样来想象一下这个运行时环境：它是一个支持 HTML5 特性的全功能 Web 浏览器, 并且它没有安全沙盒的限制, 我们可以用 JavaScript 来操作 HTML DOM 对象，也可以来调用操作系统的本地资源。
图 1. Node-webkit 概览

我们来通过一段最简单的代码，窥探一下 Node-webkit 的样子:
清单 1. 简单示例代码<!DOCTYPE html>

1
2
3
4
5
6
7
8
9

<html>
  <head>
<title>Sample App</title>
  </head>
  <body>
<h1>Hello World!</h1>
We are using node.js <script>document.write(process.version)</script>.
  </body>
</html>

图 2. 清单 1 代码运行结果

安装
有两种方式可以实现 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 在您的计算机上已完全安装成功：
图 3. 成功运行 Node-Webkit 的界面

创建第一个 Node-webkit 应用
复杂的应用从 Hello World 开始！让我们一步一步来建立我们第一个最简单易懂的 Node-webkit 应用程序。
首先，在您计算机上任意目录下，建立一个命名为 sample-app 的文件夹，它将被用来存放我们的示例应用程序代码和其他所有需要的资源文件；
然后在 sample-app 文件夹下，预建立一些空的子文件夹，用来合理的存放不同类型的文件；
最后，建立两个文件：index.html 和 package.json。至此，sample-app 文件夹中看起来应该是这样的一个结构：
图 4. sample-app 包含的文件和目录

对这样一个目录结构，是不是觉得非常熟悉？没错，它就是一个标准的 Web 工程的目录结构，因为 Node-webkit 的开发继承了 Web 前端开发的一切，所以您所掌握的 Web 开发经验将使您更快速的掌握它。
下一步，我们来看一下 index.html 和 package.json 这两个重要文件中的内容：
清单 2. index.html<!DOCTYPE html>

1
2
3
4
5
6
7
8

<html>
  <head>
<title>Sample App</title>
  </head>
  <body>
<h1>Hello World!</h1>
  </body>
</html>

它将是我们这个应用程序的入口，现在它包含的仅仅是一段最简单的 HTML 文本，显示了一个"Hello World!"的问候，我们将在后文中一步步的充实它的内容。
清单 3. package.json

1
2
3
4
5
6
7
8
9
10
11
12

{
"main": "index.html",
"name": "sample-app",
"description": "demo app of node-webkit",
"version": "0.1.0",
"window": {
      "toolbar": false,
      "resizable": false,
      "width": 800,
      "height": 500
}
}

该文件是 node-webkit 的应用描述文件，一个完整的 node-webkit 应用程序必须包含这样一个文件。它用于定义应用程序的基本信息以及运行相关的参数，比如名称、介绍、入口文件名称以及应用程序窗口的各项配置，如窗口的显示尺寸、显示位置、是否显示工具栏等等。您可以阅读来获取更多相关信息。
运行
以上这些文件构成了一个最简单基本的 node-webkit 程序。我们非常清楚如何让一个 HTML 文件在浏览器中运行起来，但是，在 node-webkit 环境下，如何让它运行起来呢？
打开您的命令行工具，进入 sample-app 所在的目录，然后执行命令：nw sample-app
成功运行中的窗口界面如下所示：
图 5. sample-app 运行结果

基于 Dojo 来设计桌面应用
好了，我们接下来要在前文的基础上，使用 Node-webkit 开发个稍微像样一点的东西。
开发一个专业的应用程序，界面的开发永远是一个重头，将耗费相当多的时间和精力。我们现代 Web 页面应用的开发中，通常会采用一些设计良好、功能强大、界面组件丰富的工具库，它们可以极大的加速我们的开发，减少我们的工作量，并且提高代码质量。例如 Dojo、jQuery 等就是一些我们经常采用的开源工具库，它们成熟、功能强、兼容性好，并且有强大的开发维护社区的支持。而 Dojo 是我个人比较喜欢的一个，它包含了丰富的基础 API 和界面组件（布局，表单，表格，图表等等），面向对象，高度模块化，可扩展性和可定制性非常强，所以非常适合开发各种不同规模的应用程序。在本教程中，我们将使用 Dojo 作为我们的开发辅助工具。
如今，基于 Web 技术的软件应用朝着单页化的方向发展，前端开发的复杂度已经远远超出我们的预期，如何让我们的软件设计层次清晰，又做到代码实现简单明了，即用最少的代码实现更多的功能，是我们的迫切需求。Dojo 为我们提供了非常有用的工具包 dojox.mvc，它是 Dojo 的一个对目前非常流行的前端 MVC 的思想的实现，主要关注前端的 View 和 Model 之间的数据绑定，能实时同步表单控件和 Model 数据，无论哪一方发生变化，另一方都会进行实时更新。其能够简化本来在 JavaScript 中处理表单的繁杂重复的代码。
我们下面要使用 Dojo 来构建我们整个应用程序的框架。这个应用程序将向您展示 2 个小示例，以此来阐明如何在 Node-webkit 环境下调用本地功能，以及如何访问外部数据资源。
我们的 index.html 现在看起来已经充实了很多，使用了 Dojo 组件来创建和布局整个应用的界面。下面是一部分关键代码：
清单 4. index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

下面是实际的运行效果图：
图 6. 本地功能调用示例运行界面

收藏分享评分

回复引用

订阅 TOP

返回列表