如果你是一位有經驗豐富的Web開發人員，你會愛上Visual Studio 2012提供的HTML5/JavaScript/CSS3的選項。
我們知道，10月26日Windows 8將正式發布，這表示開發人員得做出決定是使用HTML5/JavaScript/CSS還是XAML/C#或者Visual Basic或者C++來構建Metro樣式的應用程式。
很多Web開發人員會選擇HTML5/JavaScript/CSS，因為對它已經很有經驗了。作出使用什麼來開發的決定，下一步就是理解Windows Runtime（WinRT）和它的新API是如何與Windows 8互動的。
這篇文章將帶著你使用HTML5/JavaScript/CSS3構建一個Metro應用程式。
開發環境
1.Windows8。
2.Visual Studio 2012
3.建議下載Metro app samples，：http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples。
1.環境搭建好後，啟動Visual Studio 2012,選擇其他語言->JavaScript->Windows Metro style，選擇“空白應用程式”，名稱設定為“VSMagJS”，單擊“確定”。如所示：
從可以看到，JavaScript下的Windows Metro style提供了5個模板，選中模板，在右側會有相應的介紹。
組件
2.建立項目成功後，開啟“方案總管”，會看到項目的結構如所示：
引用：包含此應用程式功能所需要的WinRT API。預設只添加了一個：Windows Library for JavaScript 1.0 RC，包括ui-dark.css和ui-light.css兩個檔案，同樣是WinRT需要的基本API檔案。在這個例子中，還包括英語語言的全域字串檔案。
CSS：default.css檔案很簡單，它只包含CSS3媒體查詢，以決定裝置方向。
Images：這個檔案夾包括4張圖片用於表示應用程式的表徵圖。它還包含啟動畫面（splashscreen），在應用程式開始時顯示。
JS：包括一個檔案——default.js——當應用程式啟動時運行。它包含樣板代碼以協助你快速入門。
Default.html：標準的HTML頁。
Package.appxmanifest:描述應用程式的部署套件，允許更改容量、聲明等等。
VSMagJS_TemporaryKey.pfx：個人資訊分頁檔，換句話就是應用程式的數位憑證。
修改開始頁
開啟default.html，會看到如所示的內容：
中，<!DOCTYPE html>是使用了HTML5文件類型，往下是使用了其他標準的HTML標籤，如meta,title等。往下可以看到WinJS引用，再往下就是針對具體應用程式的引用，default.css確定裝置的方向。
下面來修改default.html頁，代碼如下：
1: <body>
2: <h1>Hello VSM Reader</h1>
3: <p>What's your favorite magazine? </p>
4: <input id="magazineInput" type="text" />
5: <button id="questionButton">OK </button>
6: <div id="questionOutput"></div>
7: </body>
單擊調試工具攔中的“本機電腦”按鈕會出現如所示：
到目前為止，當在文字框中輸入內容或單擊按鈕什麼都不會發生。
給開始頁添加邏輯
開啟default.js,會看到如所示代碼：
注意“strict”關鍵字對代碼提供額外的錯誤檢查。
現在添加一些代碼使default.html具有互動的功能。找到下面的代碼：
args.setPromise(WinJS.UI.processAll());
在它的下面，添加下面三行代碼：
// Get the Element ID of our OK Button and attach an event handler to it.
var OKButton = document.getElementById("questionButton");
OKButton.addEventListener("click", OKbuttonClickHandler, false);
下面添加一個名為OKbuttonClickHandler的函數，當OK按鈕點擊後執行。
在app.oncheckpoint下面添加這個函數：
1: function OKbuttonClickHandler(eventInfo) {
2: var answer = document.getElementById("magazineInput").value;
3: if (answer == 'Visual Studio Magazine') {
4: var finalanswer = "Good Answer!";
5: }
6: else {
7: var finalanswer = "Try Again! - Hint type Visual Studio Magazine";
8: }
9: document.getElementById("questionOutput").innerText = finalanswer;
10: }
再次運行程式，運行結果如所示：
快速輕鬆的設定應用程式樣式
預設情況下，default.html引用下面的代碼，使用dark樣式：
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
Metro UI也提供了一個light主題，在default.html中引用如下代碼，應用程式就會應用light樣式：
<link href="//Microsoft.WinJS.1.0.RC/css/ui-light.css" rel="stylesheet" />
再次運行程式，如所示：
瞭解更多
是時候進一步探討package.appxmanifest了。如前面所述，package.appxmanifest描述了應用程式的部署套件。可以通過雙擊該檔案開啟它，如所示：
每個頁面都提供了訪問應用程式可能需要或可能不需要的特定功能。當點擊Tab時，下面會出現相應Tab頁的介紹。例如，應用程式UI，它的下面對它的解釋是：使用此頁可以設定用於標識和描述應用程式的屬性。
打包應用程式
打包應用程式，執行下面的步驟：
點擊“項目”——>市集——>建立應用程式套件組合，如所示：
彈出對話方塊：
是否上傳到Windows商店，選擇“否”，點擊“下一步”：
單擊“建立”：
開啟上面的目錄，找到Add-AppDevPackage.ps1，右擊選擇“使用PowerShell運行”：
結束語
以上內容大部分翻譯自Windows 8 Apps With HTML 5這篇文章！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
