win8 Metro开发系统教程（一）

要开发你首先得有开发环境。

1. 系统要求：Windows vista sp2(入门版以上)， Windows 7（家庭基础版以上），Windows 8。我直接装的是Windows8。  
2. 开发工具：VS2012（当然VS2011也是可以的）

重装系统的话会丢掉原来的工作环境，所以我选择VMware Workstation 虚拟一个开发环境。

VMware Workstation的安装过程不再多说，网上一查大把。这里主要提一下window8的版本问题。开发的话一定要装ReleasePreview版本。开始时我没注意下载了是ConsumerPreview版本。

导致VS2012环境一直装不上。环境装好后就可以进行开发了。

1.启动VS2012RC开发环境,新建项目选择开发语言为JavaScript.

2.新建程序后VS为我们新建了一些文件。

有css文件夹、images文件夹、js文件夹和default.html和一个manifest文件。其实，和一般的web程序是一样的，default.html是“起始页”，css和images和js文件夹是对应的一些引用的文件了。然后package.appxmanifest这个是个配置文件作用和AndroidManifest.xml差不多，打包用的一个列表文件，包含描述应用的元数据，包括显示名称、说明、徽标和功能等。

3.简单把应用程序名改成91PandaReader后运行。直接会在Metro桌面生面一个应用程序入口：

点击直接运行，因为没写代码，运行起来就是一个空的界面，就不上图了。

基本上你可以按你原来写html和js的经验来写程序。

 

其实js+html5 metro开发我们也可以看成是hybrid开发模式，有js部分，也有native部分。hybrid开发模式首先要解决的一个问题就是js和native的互相调用。比如html5+css+js开发android应用程序，要解决js和android程序的互相调用，而metro应用则要解决js和c++或c#的调用，另一个要解决js对本地设备的调用，比如摄像头，文件选择器，网络，文件操作等等，而winjs几乎可以做所有的与本地设备的交互和操作，除了像磁贴操作，后台程序等等。调用c++或c#也很简单，直接按照c#或c++的路径直接访问就可以，不像js开发android应用，还需要多一步注入，而且不同的设备性能相差很大。metro应用就不存在这个问题了。

 

为了方便开发，微软提供了一套js库Winjs，封装了相应模板的操作，ajax请求以及对本地设备的调用。这套模板完全按照metro风格定义，包括停靠效果，交互体验等，效果不错，就是winjs需要花一定时间学习，并且要用它封装函数就一定要引用它的js库和css模板。

Microsoft.WinJS.1.0/css/ui-dark.css

Microsoft.WinJS.1.0/js/base.js

Microsoft.WinJS.1.0/js/ui.js

引用这些基本样式和js后，在应用我们自已的UI样式的时候就要注意了，这点各种官方文档都没有提到，但实际开发中是最容易碰到的问题。

1. Css的写法要避免和底层的冲突，这需要对css样式的命名的按照它提供的模板中的例子来做，否则按常规方式，会出现很多意想不到的结果。
2. 所有操作都在一个页面内完成,这里MS封装了一个单页导航方法（WinJS.Navigation）以供调用,它会将所有的页面加载到default.html中来完成操作。
3. 页面不直接支onclick等我们原来所熟悉的js操作,这点比较郁闷，你得重新学习MS封装的那一套方法来实现。

实现Metro各种效果最好的方法是，直接用MS封装的各种控件，这个MSDN官网上提供了一些简单的调用例子，是学习如何使用它们的最好学习资料。但上面的例子相对简单了点，要实现一些效果，还得在它的其础上结合自已原有的开发经验做些实验。

使用metro的控件：

要先声明这个控件，直接定义一个div，指定它为 data-win-control控件就可以了。

例如我们经常用到ListView控件。可直接这样定义:

   <div id="myListView"  data-win-control="WinJS.UI.ListView"/>

然后是后台的数据绑定,在后台Js文件中先声明一下，ListView的数据源。

var dataList = new WinJS.Binding.List;

初始化变量值:

dataList.push({

       panddaReaderTitle:’标题 ’, panddaReaderbookid: ‘编号’,

       panddaReaderAuthor: ‘作者’，type:’类型’

    });

将的数据源指定为定义的变量；

listView.itemDataSource = dataList.dataSource;

 

这里的dataList数据源，我们经常需要取网络上的数据,使用WinJS.Xhr可方便的取到网络上的数据。

WinJS.xhr 是 XMLHttpRequest 的包装，并且提供一种在使用 JavaScript 的 Metro 风格应用中下载 Web 内容的简单方法。可以使用 WinJS.xhr 进行 HTTP 或 HTTPS 请求，以下载或上载任何格式的文件。 与可以指定请求是否应该异步进行的 XMLHttpRequest 不同，WinJS.xhr 始终是异步的。WinJS.xhr 返回一个 WinJS.Promise，以便可以通过使用 then 或 done 方法处理已完成的请求、错误以及正在进行的请求。

可以访问http://technet.microsoft.com/zh-cn/library/hh868282 查看WinJS.xhr详细的使用方法。

取到网络上的数据后，绑定给WinJS.Binding.List数据源后，需指定下每一列所应用的模板 listView.itemTemplate = element.querySelector(".itemtemplate");

这样就完成了一个ListView的绑定工作。运行效果如图: