1.2　Visual Studio 2012入门

Visual Studio是微软开发者构建Web和Windows应用程序的首选工具。这个工具已经发布很长时间了，它提供的项目管理功能可以把应用程序的源文件组织在一起；还集成了生成、部署和启动支持等功能；可以进行HTML、CSS、JavaScript、图形和Windows应用商店应用程序清单的编辑与调试；另外还包括许许多多其他的功能。Visual Studio有好几种版本，但我们在本书中使用的版本是Microsoft Visual Studio 2012 Express for Windows 8（在书中又称为VS）。这个版本可以免费获得^[15]，并且包括了生成、打包和部署Windows应用商店应用程序所需的全部功能。

为了展示Visual Studio 2012的实际作用，我们找点更有趣的东西，构建一个新的应用程序，不只是显示静态的消息（不管刚刚那个应用程序是多么鼓舞人心）。对于刚刚进入任何一个平台的开发者，似乎都要从开发一些典型的应用程序来入手：比如计算机科学系的学生开发文本编辑器，而编译器的作者开发Pascal编译器，Web程序员开发的则是博客，等等。出于某种原因，移动平台的开发者通常会开发新闻阅读器。所以，我们自己来开发一个小型的简易信息聚合（RSS）阅读器，从我最喜欢的模板开始：导航布局应用程序（Navigation App），如图1.3所示。

图1.3　在Visual Studio 2012中创建一个Windows应用商店导航布局应用程序

Visual Studio 2012提供的Windows应用商店应用程序项目模板包含了以下几类。

●　空白应用程序（Blank App）：这几乎是用清单和图形文件能够构建的最小的Windows应用商店应用程序了，其中包含了Windows Library for JavaScript（又称为WinJS）。如果想要从头开始打造一个应用程序，这是个不错的模板。

●　网格应用程序（Grid App）：这是一个很简单但十分完整的Windows应用商店应用程序，它带有三个页面、导航支持以及Windows 8的观感。如果想以一个完整的应用程序为起点，再进行一些修改，这是一个很好的模板。

●　拆分布局应用程序（Split App）：这个模板和网格应用程序差不多，但它只有两个不同的页面。

●　固定布局应用程序（Fixed Layout App）：和空白应用程序模板差不多，只是这种模板能够以固定大小的区域来构建一个应用程序，比如说一个固定大小为1024×768的休闲游戏，并且能够让Windows基于可用的布局空间，对它进行缩放调整。

●　导航布局应用程序（Navigation App）：这个模板是网格应用程序模板和拆分布局应用程序模板二者的核心，它使用一个单独的空白页面替代了一组全功能的页面。这个模板提供了经常需要在应用程序中使用到的导航支持，同样，也可以使用这个模板从头开始搭建一个更大的应用程序。

运行导航布局应用程序模板，就会生成一个Visual Studio 2012 Windows应用商店应用程序的JavaScript项目文件（.jsproj），其中还有一些和我们创建第一个示例几乎一样的文件，如图1.4所示。

图1.4　Visual Studio 2012 Windows应用商店导航布局应用程序项目模板生成的文件

package.appxmanifest文件的格式和内容就像我们已经看到的.appxmanifest.xml文件一样，但是扩展名为.appxmanifest的文件在Visual Studio 2012中有一个定制的编辑器，如图1.5所示。

图1.5　Visual Studio 2012清单设计器（manifest designer）

比起直接使用未经加工的XML文件，以使文件中的所有尖括号都不出错误，使用清单编辑器可以更容易地对应用程序相关的元数据进行编辑。

项目中添加的另一个有趣的东西（artifact）是对Windows Library for JavaScript SDK的引用。它在项目中添加了对WinJS的引用和一组微软制作的同时带给Web平台的JS库；也就是说，HTML5、JavaScript和CSS，连同WinRT一起形成了一个高效率的应用程序框架，为开发者提供了使用JavaScript构建Windows应用商店应用程序的能力。在本书中，WinJS和WinRT这两个词经常会出现，但为了入门，我们暂时不管那么多，先来看看导航布局应用程序模板生成的default.html文件是什么样的。

在这个HTML文件的head部分，可以注意其中的link和script元素，它们引用了样式文件和JS文件，这些文件提供了WinJS的功能。其中有部分功能用于解析这个HTML文件底部的contenthost div中的data-win-control和data-win-options属性。

data-win-control和data-win-options^[16]属性能够在Windows应用商店应用程序中使用声明式的控件，实际上是把HTML中的div元素转化为一个PageControlNavigator控件的实例，该控件定义在项目中的RssReader命名空间下。其中的data-win-options属性是一个简单的JSON（JavaScript Object Notation）对象，在运行时作为构造函数参数传递给该控件。这种声明性的语法可以让程序员使用Visual Studio 2012中的文本编辑器轻松对控件进行布局，当然也可以使用我们接下来会看到的可视化工具。

至于PageControlNavigator控件，实质上default.html文件中只不过就是一个或多个逻辑页面的承载，当用户在页面之间进行导航时，这些逻辑页面就会加载。可以看到，在这个控件的选项中，加载的第一个页面是homePage.html^[17]，这个页面也是由导航布局应用程序模板所生成的：

homePage.html中的HTML代码比起default.html稍微有点复杂，因为其中提供了一个“返回”按钮、一个标题和一个节（section），微软建议开发者把内容放在这个节里面，可以让页面变得非常整洁。此外，生成的这段HTML代码还引入了homePage.js^[18]文件，该文件就是放置处理逻辑的地方，对应用程序主页的运行进行控制。生成的主要代码如下：

homePage.js中的代码被封装在一个自执行的匿名函数中，这是一种JavaScript的技巧，可以阻止函数中的所有东西泄露到全局范围中，相当于提供了JavaScript的私有模块。"use strict"字符串可以让JavaScript在运行时对错误进行额外的检查，这是另一种好的实践方法^[19]。

在这个模块中，主干代码根据ready函数以及页面所关联的HTML文件的路径，实现了页面控制的定义。一个WinJS控件是UI和行为的一个可复用集；而一个页面控制是围绕HTML的逻辑页面所创建的控件。Windows应用商店应用程序模板中提供的导航支持，其实就是当用户在页面间进行导航时，处理页面控制的加载与卸载。

ready事件会在页面控制被添加到HTML文档对象模型（DOM）时触发，对于我们的RSS阅读器来说，恰好可以在此处放置一些代码，用于显示订阅源的列表：

ready函数通过element参数，得到了在HTML DOM中代表页面的div，所以可以在此处查询section元素，以便在其中保存我们的订阅源列表。ready函数中的代码是标准的HTML DOM操纵代码（manipulation code），使用了在ready函数之前定义的全局订阅源数据。

运行应用程序，就会出现一个全屏的Windows应用商店应用程序，如图1.6所示。

图1.6　导航布局应用程序模板项目中的订阅源标题列表

开发这个功能比较简单的应用程序时，如果发现自己遇到了一些问题，可以使用Visual Studio 2012进行调试，只要选择“调试”（Debug）|“启动调试”（Start Debugging）就可以，这个功能将提供以下这些调试工具。

●　调试器（Debugger）：可以用来设置断点，使用各种单步调试器命令，监视JavaScript数据和行为。

●　JavaScript控制台（JavaScript Console）：在命令行中和JavaScript对象进行交互。

●　DOM资源管理器（DOM Explorer）：对HTML DOM进行挖掘并可按照元素查看样式。

●　调用栈（Call Stack）：进入当前的JavaScript调用栈中进行查看。

●　异常对话框（Exception dialog）：可以在其中选择当JavaScript运行时抛出异常需要中断的情况。

除了在本地计算机调试应用程序之外（这是默认的情况），还有两种其他的选择：远程计算机和模拟器。你可以通过选择“项目”（Project）|“属性”（Properties），然后选择要启动的调试器（debugger to launch）来改变这些选项，如图1.7所示。

图1.7　不在本地计算机上进行调试，而是选择在模拟器或远程计算机上调试

在远程计算机上调试是出于这样的目的：可以在一台高性能的开发用机上进行开发，但选择一台更加合适的消费级的计算机进行调试，例如一台平板电脑。这样做可以很容易保证应用程序在目标型号的计算机上也能正常运转。

对于“模拟器”选项，实际上从另外一个角度看，它创建一个远程桌面会话，连接回到已经运行的计算机上，并且提供一个框架，可以模拟各种分辨率、横向/纵向旋转、触摸（即便使用的是一台不具备触摸功能的设备）。图1.8展示了我们的示例应用程序运行在模拟器中的样子。

图1.8　在模拟器中运行Windows应用商店应用程序

而且这样似乎也还不够，如果安装了Visual Studio 2012 Express for Windows 8，Visual Studio 2012并不是唯一可以使用的工具。对于应用程序的可视化部分，如果想要得到所见即所得的设计体验，还可以使用Microsoft Blend for Visual Studio 2012（又称为Blend）。

[15]可以从以下网站下载Visual Studio2012for Windows8，阅读相关文档，浏览示例代码并就一些问题进行咨询：http://dev.windows.com。

[16]HTML5规范留下了data-*属性，建议作为特定的库和应用的扩展点，而WinJS可以利用一些JavaScript库进行处理，比如Kendo UI、jQuery和KnockoutJS等。

[17]Visual Studio2012正式版是home.html，下同。——译者注

[18]应当是home.js，下同。——译者注

[19]要特别说明的是，"use strict"是ECMAScript5的特性，而ECMAScript5是最新的JavaScript的标准版本（参见http://ecmascript.org/。如果有.NET开发的背景，但对JavaScript的基本情况不是太熟悉的话，建议先阅读附录A。