Windows 八开发31历程-第一天: 一个的空白应用程序
译者注: 最近对Html5相关的内容及Windows 8开发产生了浓厚的兴趣,故尝试翻译的《31 Days of Windows 8 for Html5》，因本人英文水平有限，翻译未能达意之处，请大家尽量点处。
在本系列的第一篇文章中，我认为全面的介绍 Visual Studio 2012中 Windows Store Blank App template非常的重要。我将介绍里面的每个文件，为什么它们很重要呢，因为许多设置都被隐藏每一个文件中。我们通过学习使用每一文件，这将为你本系列课程的后续学习打下一个坚实的基础。
在Visual Studio 2012 中还有其他几个项目模板，正如你下图中所看到的Gid、Split 、 Fixed Layout 和Navigation 等等App。但这些模版都是针对特定类型的应用程序,它们可能会限制你的思维。记住这些模板只是起点,而不是最终的解决方案。对于本系列,几乎我们都从Blank App 模板开始。
下图中是Solution Explorer视图，基于Blank App模板建立的HTML5 的解决方案。
图片
让我们从简单开始，简单的images文件夹中的图像。每个新的项目，都有四个图像，每一张图片都为特定的用途。我们已重新创建了这几个图片 （另外还增加了一个） ，这样当我们执行该应用程序时,就容易哪个图片是做什么用的。我强烈建议下载这些图像和替换原有的图片，尤其是你正在学习时。您可以在这里下载到这五个图片。一旦您替换缺省的图片，但你运行工程, 你就可以看到这些图片用在不同的地方，如下所述。
Logo.png
这可能是您的应用程序最常见使用的一个图片。在Windows 8的用户开始屏幕上,这是您的应用程序标题默认的背景图像。它尺寸是 150 × 150 像素。
SmallLogo.png
此图片用于所有应用程序列表显示时。例如，当您在 Windows 8中搜索应用程序，或在Share菜单。SmallLogo.png 为 30 x 30 像素。在这种小的尺寸，您想要确保此图标能向您的用户准确表达某一个信息。我强烈推荐只是一个Logo或其他一些明确的图像。
SplashScreen.png
当应用程序启动时，会加载这张初始化的图,。对于该图片你可以使用一些巧妙的技巧,我们将在后面的文章中会进行讨论。现在,你只要记住这个图片总是是620 x 300像素,并且无论你的用户的屏幕多大，总是水平居中和垂直的显示的。
StoreLogo.png
在store里为了节省空间,我们需要一个稍微小点的图片。这张图片是50 x 50像素,但是在你的整个应用程序，这2500像素可能是最重要的。当用户决定哪些新的应用程序添加到他们的设备时，这是图标将会被看到。一个差的图标会给大多数用户感觉这是一个差的应用程序。所以在这个图标多花些时间是值得的。
WideLogo.png
这是一个额外的图标包括在我的初始项目中。您若需要将它添加到您的项目中，只需在Solution Explorer视图中右键单击images文件夹，选择“Add Existing Item…”这张图片大小是310 x 150像素,用来使你的应用程序有一个更宽Title比标准的Logo.png。
package.appxmanifest
这个文件包含应用程序所有的配置、设置和声明。它几乎包括所有与你的运行在Windows 8机器的应用程序相关的每一个事情。例如,这里可以设置search contract为启用的,或者设置不同状态下使用不同的图标。例如,我们刚才已经看到了在AppXManifest的应用程序的UI选项卡中定义了images文件夹中的每一个图像。
它还定义了默认的背景颜色,方向,和应用程序需要的特定功能,如位置的访问。
你尽可能熟悉此文件。以后你会经常用到它。
default.html
这是我们的主要入口点，您的应用程序启动页面。 default.html实际上可以被命名为任何名字,因为它在我们的package.appxmanifest 文件中被设置为应用程序的启动页面。作为 web 开发人员default.html就像任何其他已经创建的网站的起始页一样，尤其如果你做HTML5 的。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Day1</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> <!-- Day1 references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> </head> <body> <p>Content goes here</p> </body> </html>
像任何 你看到的html 页，你会发现我们的引用样式表和脚本文件。但仔细查看一个link和script标签中的href和src。注意是以 / / 作为路径的开始。这表示我们引用内置的脚本和样式表。
css/default.css
自从我们开始与空白模板，您应该能够猜到我们默认样式也是不存在。尽管如此，那里是微软想要我们做的最小值、 定位在几个线索，对齐。明天我们将涵盖定位和对齐详细信息中，但它不是足够的说它由一些简单的媒体查询处理。
body { } @media screen and (-ms-view-state: fullscreen-landscape) { } @media screen and (-ms-view-state: filled) { } @media screen and (-ms-view-state: snapped) { } @media screen and (-ms-view-state: fullscreen-portrait) { }
default.css 不是我们的模板引用的唯一的样式表。我们还引用：
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
这个内置的样式表，使我们的应用程序上的内置控件有一个统一的风格。默认的模板引用的是"dark"的样式，但也有"light"样式，如图所示：
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
js/default.js
不像我们的默认CSS,我们default.js文件过程生命周期管理(process lifecycle management:PLM)做了特别的定制。我们的模版设置一些行为接口来处理一些不同的PLM周期，如启动和终止。这些都是我们想去实现的
(function () { "use strict"; WinJS.Binding.optimizeBindingReferences = true; var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; app.onactivated = function (args) { if (args.detail.kind === activation.ActivationKind.launch) { if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { // TODO: This application has been newly launched. Initialize your application here. } else { // TODO: This application has been reactivated from suspension.Restore application state here. } args.setPromise(WinJS.UI.processAll()); } }; app.oncheckpoint = function (args) { }; app.start(); })();
跟我们的CSS文件一样,我们还引用一些内置的库,特别是WinJS库。我们需要WinJS实现PLM之类的东西。后面会讨论更多关于WinJS的内容。
<script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
Day1_TemporaryKey.pfx
每一个Windows商店的应用程序都必须有一个签名证书。当您首次在 Visual Studio 中创建一个新的项目时，它会自动创建一个新的测试证书。在我们的例子中测试证书名叫Day1_TemporaryKey.pfx，这是我们第一天的项目名称 。再次，您可以在包装选项卡下的package.appxmanifest文件中找到此集。如果需要，您甚至可以创建新的证书。
一旦您已准备好提交到应用程序商店，您需要将您的应用程序与微软的在线商店及您的开发人员帐户相关联。您可以进入Projects->Store->Associate App with the Store......这样做之后,你会注意到一个新的证书将被添加到您的项目,它将会用于签署最后生成的包。
点击这里您可以找到更多有关app包签名的详细信息.
摘要
就说到这里吧 ！我们现在才刚刚开始此系列课程，但你现在已经开始对基于default Blank App template for HTML5程序中文件有了一个全面了解.
明天，我们将共同关注Orientation 和 Snap功能，这两个重要方面在您的应用程序常常被忽视。如果您还没有准备好，可以从下面的连接中下载免费的工具来创建windows 8应用程序。同时也提供了今天所讲内容的整个工程的下载链接。