运用JavaScript构建你的第一个Metro式应用程序（on Windows 8）
包括 HTML、CSS 和 JavsScript 的 Web 技术正被 Metro 风格的程序采纳为视窗程序中首类（first-class）的开发技术。比较起来，JavaScript 不像传统 Web 服务器那样部署在一张又一张的页面上，Metro App 是本地安装在客户机器上的。这点很像传统的 Win 程序，直接使用 JavaScript 便可以访问所在的底层，还能和其他程序相沟通。
注意，如果您倾向于 C#, C++, or VB withXAML,开发，请参阅 Buildingyour first Windows Metro style app with C#, C++, or VB。
目标
在本教程中我们将会为您介绍如何透过 JavaScrip 来构建 Metro 风格的程序。通过 HTML5、层叠样式表（CSS3）和 JavaScript 这些技术，与您一起打造一个轻型的 RSS 客户端，并且尽量使得这个程序更好地彰显个性化（that conveys the right personality）。我们将引入包括控件、功能、布局、模板、数据绑定以及 JS 库这些核心的内容，而且，所述的这些技术已经在 Metro App 开发中都得到优化，可放心使用。根据此教程，阁下学习完毕后，应已具备初步开发 JS 版 Metro App 的能力。教程划分为三小节，估计20分钟阅读完一小节，当然，如果做好每个习题的话，时间可能会稍长一点。
Hello Win Metro
跟 web 页面那样，得先有一份 HTML 文件去写 Metro App。
view plaincopy to clipboardprint?<!DOCTYPE html>
<html>
<head><title>你好Windows Metro styleapps!</title></head>
<body><h1>欢迎来到 Windows Metro styleapps</h1></body>
</html>
<!DOCTYPE html>
<html>
<head><title>你好Windows Metro styleapps!</title></head>
<body><h1>欢迎来到 Windows Metro styleapps</h1></body>
</html>
如果把这 HTML 放在浏览器中运行，肯定没啥意思。不用多说，如果在 Metro App 中执行，则又是另外一番天地，当然您的客户，一般不会在乎那究竟是浏览器还是 Metro App。只不过，有明显不同，就是 Metro App 会安装在 Window Store 中，跟其他 Win 程序一样。再者，若说单张 Web 页面，根本算不上叫做完整的程序，哪怕涉及样式、代码、图片资源的那些。现在，Metro App 不但包括这些，而且还提格为标准的应用程序，于是将有元数据和程序资源文件的出现：
用于描述程序本身的清单文件（manifest），包括程序名称、简介、启动页等等。
用于外观的图片文件或者图标文件。
用于Windows Store显示的图标 logo。
用于你程序启动时欢迎屏幕（a splash screen）。
程序清单（manifest）是一份名为 appxmanifest.xml 的 XML 文件。该文件包括了诸如程序名称、程序描述、图片引用等的详细情况，其中一项当属最重要的是指定程序的启动页。Microsoft Visual Studio 11 Express for Windows Developer Preview 可以自动导出程序清单，而还可以帮助你透过 JavaScript 来完成一系列任务，这些任务就是创建、编辑、打包、启动与调试您的 Metro 风格应用程序。
在 VS 中开发Windows Metro Apps
Microsoft Visual Studio 为开发视窗程序的工具，也是开发 Metro式程序的第一个工具。它不但提供了 HTML、CSS、JavaScript、图片编辑，以及用 JavaScript 来编辑程序清单等等此类一般开发任务，还包括整个开发周期的项目管理，涉及到源码管理、整合构建（build）以及部署等的许多过程。有几种 VS 版本的制定，我们这里拿来使用的是免费的 Visual Studio 11 Express for Windows Developer Preview 预览版本，在 Windows Software Development Kit (SDK) for MetroApp 就有。安装一遍后就等于安装好了编译、打包、部署的那些工具。VisualStudio 11 Express for Windows Developer Preview 本身提供若干模板，如下图所示：
最简单的项目模板就是 Blank Application。运行之后生成 Visual Studio 11 Express for WindowsDeveloper Preview Metro style app using JavaScript 项目专属文件（.wwaproj ）。
现在打开预设的 default.html 的话，你会发现这几乎全是空的内容，打开 js 目录下的 default.js 也同样如是。明显这里提供的是主干文件，等着你创造些内容添加进去。
欲进行调试，你点击“Debug > StartDebugging”就可以，它提供了开发者所熟悉的几项调试工具：
调试器，打断点、步进和监视 JS 数据和行为。
JS 控制台窗口（JavaScript ConsoleWindow），与JS对象命令行交互的地方。
DOM浏览器窗口，观察 HTML Document Object Model 或者元素样式的地方。
模拟器（Simulator），在开发环境中模拟相关设备的事件。
采用 JavaScript 编写的 MetroApp，除却语法，在访问 Windows 底层平台的时候与其他语言无异。但根据 JavaScript 程序员的某些特性又应该有一些尽量预设的包，可以反复使用的设计，也就是说，Windows 类库针对 JavaScript 特定提供了一组可复用的 JS 和 CSS 文件，以便在此基础上更好地体现 Windows 新特性。VS 模板中已经包含了一系列的CSS 样式规则表，以便提供划一的WinApp的风格感官（look& feel）。最简捷的方式就是通过项目模板文件引入，它会自动包含 WinJS 所需的文件。
Blank Application 项目文件虽说空无一物的，却已包含有一定的样式在内。Metro 风格之所以称“风格”，应该说对样式有一点要求的。样式本身固然不是说要统一一致，因为许多情况下有你需要特定的布局、动作个性化的设计。我们这里就会举一个例子。实际上，尽管所谓 Metro 风格的程序是新鲜事物，但过往的经验仍值得学习研究。这里为大家介绍 Window 项目组里的一位精于此道的开发人员，Raymond Chen。陈先生还是一本优秀图书《The Old New Thing》的作者，同时他还有 Weblog 的。
陈先生的主要成果在于看到了一般人不容易看到Win平台上的缺失之处，或曰美中不足，并且将文字连同示例Sample资源积极地发表在他博客上。这样，都是 Win的 程序，我们可以通过这些素材展示新的构造方式。
由此，我们需要在他博文下载数据，才可以清楚哪些地方放置代码。
调用WinJS.Application对象
项目模板生成的 default.html 文件默认加载 WinJS 所需最低要求的 JS 和 CSS 文件：
view plaincopy to clipboardprint?<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>RssReader</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/wwaapp.js"></script>
<!-- RssReader references -->
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>RssReader</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/wwaapp.js"></script>
<!-- RssReader references -->
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>
<body>
</body>
</html>加入我们自己的内容：
view plaincopy to clipboardprint?<body>
<h1>The Old New Thing</h1>
<div id="downloadStatus"></div>
<div id="posts"></div>
</body>
<body>
<h1>The Old New Thing</h1>
<div id="downloadStatus"></div>
<div id="posts"></div>
</bod
补充：web前端 , JavaScript ,
