用javascript创建第一个windows8 metro应用

 
javascript开发第一个windows8 metro应用
 
一、开发环境——visual studio2012

 

我们无论开发任何应用都需要一个程序开发环境，而windows8的程序开发环境就是visual studio. 安装这个环境也很简单，唯一就是对硬件要求比较高。目前最新版的事visual studio2012,相对于上一版，新增了新的模板、设计工具以及测试和调试工具，基本是是怎对windows8开发的，目的就是让开发者在尽可能短的时间内构建出具有强大吸引力的应用程序。在visual studio里也专门设立应用商店的菜单项，方便开发者上传管理自己的应用程序。

 



下载地址：http://go.microsoft.com/?linkid=9810167

 

附：mac上安装visual studio

1、使用 Boot Camp 安装和运行 Windows 8，需要将已下载的 ISO 映像刻录到双层 DVD 上进行安装。

2、在虚拟机中安装和运行windows8

推荐用VMWare Fusion 5 或 Parallels

3、系统要求

如果是虚拟机需要分配到至少1.5G内存

 

二、创建windows8项目

创建一个windows8的应用也非常简单，打开visual studio2012 for windows8后：文件——新建项目——选择javascript下的空白应用程序——确定。

下图就是创建的空白javascript程序。

 


这里面的package.appxmanifest文件是项目的清单文件，里面包含诸如显示名称，支持的旋转，各种徽标等。

还有就是引入文件下的css和js文件夹，这里面放的是微软为我们提供的库：css库里的ui-dark.css表示windows8外观的深色样式表。

ui-light.css表示windows8外观的浅色样式表。

想要更改某个样式可以直接在根目录下css文件下的default.css文件里更改，当根库里的样式表有冲突样式时会覆盖库的样式。

开始页面就是default.html了，可以对它进行修改，点击

按钮以本地计算机运行项目。

到这里，第一个windows8 metro应用算是创建完成了。

 

三、跟传统web开发中的html,css,javascript的区别

1.html5支持：

使用javascript的windows应用商店支持大多数html5功能，如canvas、audio、video、SVG元素，和css3的功能，如2D转换、3D转换、过渡和动画。

2.可使用windows运行时

Windows 运行时是一组为 Windows 8 开发的 API，这些 API 提供网络功能、可更好地进行 XML 分析、可访问系统和设备以及更多功能。有关 Windows 运行时所提供的功能的完整列表，请参阅 Windows 运行时参考。

3.新的控件

新的控件，如 DatePicker、TimePicker 和 ListView（可高度自定义并绑定到不同类型数据（包括 XML 和 Web 服务）的数据控件）。这些控件都属于 Windows JavaScript 库 (WinJS)。

有关完整列表，请参阅控件列表。

4.可访问 Windows JavaScript 库

Windows JavaScript 库是一组 JavaScript 和 CSS 文件，利用这些文件可以更轻松地创建使用 JavaScript 的 Windows 应用商店应用。你可以将其与 HTML、CSS 和 Windows 运行时结合使用来创建应用。

5.创建和操作窗口

alert、prompt、open、moveBy、moveTo、resizeBy 和 resizeTo 等窗口方法在使用 JavaScript 的 Windows 应用商店应用中不受支持。

6.基本导航

在javascript的windows应用商店应用中最简单最常用的导航形式就是超链接，应用中的跳转就用相对链接，如果是绝对路径，当你点击打开时会以在web浏览器而不是应用程序中打开。

7. 本地和 Web 上下文页面

若要了解标记和代码在浏览器中与在使用 JavaScript 的 Windows 应用商店应用中行为方式的一些区别，你需要首先了解本地上下文与 Web 上下文的区别。

使用 JavaScript 的 Windows 应用商店应用至少包含一个 HTML 页面。该页面以及应用本身中包含的任何其他页面通常都在应用的本地上下文中运行。使用 iframe 导航到远程页面时，该页面在 Web 上下文中运行并且对系统具有有限的访问权限。

有关本地上下文与 Web 上下文之间区别的详细信息，请参阅不同上下文中的功能与限制。

8. 导航模型

几乎所有的网站都提供某种形式的导航（通常采用超链接形式），你可以通过单击超链接来转至其他页面。每页都有拥有其自身的一组 JavaScript 函数和数据、要显示的一组新的 HTML，以及样式信息等等。这种导航模型被称为多页导航。

另一种导航模型是单页导航，在这种模型中，你可以针对你的应用使用单一页面并根据需要在该页中加载额外的数据。你仍然可以将你的应用拆分为多个文件，应用会将其他文档（使用 Page 或 HtmlControl 对象）加载到主页中，而不会从一页转至另一页。由于应用主页从不卸载，因此你的脚本也从不卸载，从而让你可以更轻松地管理激活、状态和动画。当用户在运行你的应用时，他们将体验到类似应用程序的顺畅体验，而无需暂停来加载新页面，也从不显示空白屏幕。我们建议让使用 JavaScript 为 Windows 构建的 Windows 应用商店应用使用单页导航模型。

9. 异步函数

为了能提供响应迅速的用户体验，很多 Windows JavaScript 库和 Windows 运行时函数都可以异步执行。这样，你的应用便可以在后台执行任务的同时，继续响应用户的交互。

10. 动态添加 HTML

与其他页面相比，应用的本地上下文中的页面对系统具有更多访问权限。它可以访问 Windows 运行时，而且根据应用的具体权限，也许还可以访问文件系统和你的设备。因此，重要的是要防止执行恶意代码。

若要防止脚本注入并保护系统免受潜在恶意代码的危害，你向本地上下文页面中注入的 HTML 会按照 toStaticHTML 方法对其的处理方式进行筛选。注入包含未知元素、事件处理程序、脚本或脚本引用，或未知 CSS 伪元素和伪类的 HTML 之后，当你向页面的 DOM 中添加该 HTML 时，会引发异常。

11. DOM 事件

基本上，DOM 事件对于使用 JavaScript 的 Windows 应用商店应用与它们在 Web 浏览器中的作用方式类似，但也存在一些不同之处。有关工作方式存在区别的事件列表，请参阅 HTML 和 DOM API 更改列表。

12. ActiveX 控件

多数使用 JavaScript 的 Windows 应用商店应用不支持自定义 ActiveX 控件。如果你需要 UI 控件，可以使用 HTML 控件、Windows JavaScript 库控件或创建自定义的 Windows JavaScript 库控件。如需执行自定义逻辑，则可以创建一个自定义的 Windows 运行时对象。

13. 编码

使用 JavaScript 的 Windows 应用商店应用访问的所有 HTML、JavaScript 和 CSS 都必须采用 8 位 Unicode 转换格式 (UTF-8) 进行编码。

14. 字节代码缓存

当在 Microsoft Visual Studio Express 2012 for Windows 8 调试环境之外执行使用 JavaScript 的 Windows 应用商店应用时，会进行一些性能优化。一个重要的优化就是应用程序包中包含的所有 JavaScript 文件（扩展名为 .js 的文件）都会转换为 JavaScript 引擎可以直接使用的字节代码。相比于加载和执行未处理的文件（如 Web 上的 JavaScript 文件），你的应用可以更快地加载和执行上述文件中的代码。 此字节代码和源代码本身的副本与程序包文件一起存储在一个字节代码缓存文件中。在完成字节代码转换之后，重新部署应用之前，修改原始的源文件不会对应用的行为产生任何影响。

15. 使用 jQuery

你可以在使用 JavaScript 的 Windows 应用商店应用中使用 jQuery，但仅限版本 1.7 和更高版本。我们建议始终使用最新版本。

 

此段内容参考：http://msdn.microsoft.com/zh-cn/library/windows/apps/hh465380