您的位置：首页 > 移动开发

windows8 Metro APP JavaScript开发从零开始 - 基础篇（一）

2012-12-19 10:21 295 查看

MS发布的vs2012开发平台. 加入了对JavaScript语言的支持. 从此之后,我们可以在不使用中间件(如phoneGap等)的情况下使用纯js来进行app开发了. 这无疑是个振奋人心的消息.

且不说win8的推广是否能够成功. 就算win8挂了（不管你信不信，我信。 windows隔代死。。。）.相信还有win9 win10会火起来. Metro App的开发始终会成为一部分人谋生的手段.

小弟不才, 比较早的接触到了win8 metro app的开发. 下面让我带领大家来认识一下Metro App. 通过一系列的文章一起来开发一个看起来像点样子的Metro App应用.

首先,让我们了解一下. vs2012对语言整合的基础架构. (如下图)

1. Desktop Apps: 即传统的x86 架构应用程序开发 [图中靠右的部分]。这一部分与以往没有任何改变。我们还是可以使用vs2012开发 .exe应用程序或基于浏览器的web站点。

2. Metro style Apps: 这部分是我们要重点了解的。[图中靠左的部分]。在图中的最上层（除了黑色的一行是标题）即是我们可以用于开发Metro app的语言。

其中包括C` C++ ` C# `VB，这些语言开发的应用使用xaml来作前端呈现。另一部分则是我们的文章中要学习的JavaScript语言，搭配HTML5/CSS3。

从图中我们可以直观的看见，这些语言都‘坐落’于下面的Windows Runtime APIs层上。 Windows Runtime APIs层为所有支持的语言提供了用于调用设备的接口。包括基础命令，数据存储，图形处理，多媒体，硬件驱动等等。

以下内容是个人理解，为免误人子弟。仅供参考！！！

我不是传说中的高手，也不知道很多专业术语。以我的理解，直白的说我认为。 windows Runtime 类似一个中间件，把我们编写的代码（不论是js,C#或vb）解析为统一的机器语言交由更底层的服务来执行。windows Runtime除了提供接口外，还有一项重要的工作就是代码映射！所以理论上来讲，C#能实现的功能JavaScript都能！这在传统的项目开发中是不敢想像的。在js中，可以直接调用C#编写的类库中的方法。因为在底层它们都被解析为统一的语言。也正因如此，在使用C#开发时，你无法引用第三方的dll库（如：log4net等），因为第三方库很可能引用了winRT不支持的方法。
总之：vs2012在metro app开发时，给我们定的框框还是很死的。除了winRT apis之外，不能用别的。。。。。。

费话不多说，我开始进入metro app的开发。

1. 打开vs2012。 FILE-->New-->Project

如图：我们选择JavaScript项目中的Grid App模版。选用模版的好处是我们可以不用编写很多核心代码，就能实现一些必要的功能。如Navigation的实现。预定义模版中的代码我会在下章开始作详细说明。

建立好项目之后，直接运行（按F5 或点击运行按钮）即可看到一个完整的metro app应用。

大家先体验一下Metro App应用，随后我们先来了解一下Metro App的基础运行机制。

1分钟，

2分钟，

3分钟，

4分钟，

差不多了。。。。我挺二的是吧！大家都这么说！

当app跳过截入界面（就是只有一个方块里面有一个十字叉的界面）进入到default.html页之后，整个metro app之后都运行在一个页面之上。也就是别看我们项目中建立了很多.html页面，基实app一直只在一个页面上运行。页面的切换只是一个高度和宽度都为100%的div在覆盖再覆盖。用js作过遮罩层的同学都知道。。。覆盖的过程中Navigation的方法只是使用异步的方法把我们写的html页面读到新的div上。所以页面之间的切换过场才会这么漂亮和流畅。

说到这里有些同学可能会问了，这样会不会乱了啊。页面没有变过，那么样式和window对象都没有被清空。命名以及方法的偶合率会不会很高！！当然会，不过ms给我们的写好了代码，告诉我们怎么解决！

a) 样式，要以命名空间为基础。每个页面对应的样式表都写在针对本页面的命空间下。这样即使同名的样式，在不同的页面下也不会冲突。代码如下：

.addKnowledge header[role=banner] {
-ms-grid-column-span:2;
-ms-grid-rows: 20px 1fr 0;
background: none;
}
.addKnowledge header[role=banner] .titlearea {
background: url(/images/logo.png) no-repeat 0 -34px;
}
.addKnowledge header[role=banner] .pagetitle {
color: #fff;
}

整个样式表以 .addKnowledge开始，之后所有的样式都在这个命名空间下。然后在html页面中的主容器上引用这个样式。代码如下：

<body>
<div class="fragment addKnowledge"><!--主要容器 fragment是全局样式-->

<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea">
<span class="pagetitle"></span>
</h1>
</header>

<!--其它内容在这里-->

</div>

</body>

b) JavaScript，针对每个页面的js代码都要写在闭包中。这个不用详细讲了。。。解偶的神级方法！代码如下：

(function () {
"use strict";

WinJS.UI.Pages.define('/konwledge/pages/addKonwledge.html', {
ready: function (doc, options) {
//this.pageInit(options);
//this.eventBind(options);
}

);

})();

这样，冲突就解决了。如果再仔细想，其实这样挺好的。因为我们定义的全局（针对整个应用）样式和变量或面向对象的方法在所有页面中都有效！不用像web开发那样。每个页面都要引用一次 <script src='jquery.js' type='text/javascript'></script>了。对吧！！规划好你的项目结构，把所有公用的样式和js文件在defautl.html页面中引用一次，以后再也不用管它了。想用就调用即可！性能上也没得说，一次加载终生受用。

快到时间了，结束前再说点别的。

Metro app的运行环境：大概你看过Metro app的都发现了，没有关闭按钮的。理所当然的应用只能被挂起。 windows8要监听资源开销，资源不足时。会把挂起队列中消耗资源最大的进程杀死。以下是ms人员告诉我们的：%开发过程中要注意应用的资源开销，要良好的处理挂起状态下应用的休眠% 也就是说，争取让我们的应用在挂起

状态中占用尽量小的资源，争取在最后才被干掉。。。

怎么样会增加资源开销呢？如：保持与本地文件的长连接` 代码造成内存泄露，对象与元素的循环引用。。等等（其实我也不知道还有什么！！！）

调试：在vs2012下开发，您大可不必为调试环境烦恼。 vs2012有内置的模拟器。使用方法如下图：

默认使用本地计算机布署和调试，还可以使用 Simulator（模拟器）。分隔线上方的是正在使用的模式。

模拟器打开后，还有很多功能。翻转，改变分辨率，触控模拟等。

哦对了，我没写吧。要在windows8系统下哦。

从下章开始，我为大家详细讲解 Grid App模版中代码的含义。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航