第一个 Metro程序（空白应用程序）
生活随笔
收集整理的這篇文章主要介紹了
第一个 Metro程序（空白应用程序）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.新建一個空白應(yīng)用程序
?
里面文件結(jié)構(gòu)：
package.appmanifest 文件的作用是：應(yīng)用程序清單。該文件列出了您的應(yīng)用程序的內(nèi)容，并描述其功能，如應(yīng)用程序是否可以訪問用戶的攝像頭。它還指定的頁面使用的應(yīng)用程序的起始頁。當(dāng)您使用的Visual Studio 11 Express的測試版的Windows 8更多文件添加到您的應(yīng)用程序，它會自動更新您的應(yīng)用程序清單
default.html內(nèi)容 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <meta charset="utf-8"> 5: <title>Application2</title> 6: ? 7: <!-- WinJS references --> 8: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet"> 9: <script src="//Microsoft.WinJS.0.6/js/base.js"></script> 10: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script> 11: ? 12: <!-- Application2 references --> 13: <link href="/css/default.css" rel="stylesheet"> 14: <script src="/js/default.js"></script> 15: </head> 16: <body> 17: <p>Content goes here</p> 18: </body> 19: </html>
default.js內(nèi)容：
1: // For an introduction to the Blank template, see the following documentation: 2: // http://go.microsoft.com/fwlink/?LinkId=232509 3: (function () { 4: "use strict"; 5: ? 6: var app = WinJS.Application; 7: ? 8: app.onactivated = function (eventObject) { 9: if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { 10: if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) { 11: // TODO: This application has been newly launched. Initialize 12: // your application here. 13: } else { 14: // TODO: This application has been reactivated from suspension. 15: // Restore application state here. 16: } 17: WinJS.UI.processAll(); 18: } 19: }; 20: ? 21: app.oncheckpoint = function (eventObject) { 22: // TODO: This application is about to be suspended. Save any state 23: // that needs to persist across suspensions here. You might use the 24: // WinJS.Application.sessionState object, which is automatically 25: // saved and restored across suspension. If you need to complete an 26: // asynchronous operation before your application is suspended, call 27: // eventObject.setPromise(). 28: }; 29: ? 30: app.start(); 31: })(); ?應(yīng)用程序生命周期（http://msdn.microsoft.com/en-us/library/windows/apps/hh464925）
在Default.js文件的大部分代碼處理應(yīng)用程序的生命周期。應(yīng)用程序生命周期的開始，應(yīng)用程序啟動時，應(yīng)用程序被關(guān)閉時結(jié)束。該項目模板包括一個通用的應(yīng)用程序生命周期管理模式。
由模板提供的代碼檢查應(yīng)用程序是否開始從開始屏幕上，并調(diào)用WinJS.UI.processAll。該WinJS.UI.processAll 會載入windows庫為你在html文件中定義的所有JavaScript控件。如果你有一些代碼，需要運行的應(yīng)用程序時設(shè)置其初始狀態(tài)，包括在處理程序的onactivated 事件。
(function () {...})();// Makes the function self-invoking. ? 1: (function () { 2: "use strict"; // 定義為嚴(yán)格模式 3: ? 4: ... 5: ? 6: })(); ? 嚴(yán)格的模式提供了更好的JavaScript代碼的錯誤檢查。當(dāng)您使用嚴(yán)格模式下，你的代碼是受到JavaScript語法的嚴(yán)格限制。例如，您不能使用未聲明的變量，寫入一個只讀屬性，或者使用與聲明。這些限制可以幫助你寫出更好的代碼，減少引入您的應(yīng)用程序錯誤的可能性。添加事件處理程序
下面實現(xiàn)：定義一個P標(biāo)簽 ，實現(xiàn)點擊p，在p內(nèi)顯示 鼠標(biāo)坐標(biāo)
1: <!DOCTYPE html> 2: <html> 3: <head> 4: <meta charset="utf-8"> 5: <title>BasicAppExample</title> 6: ? 7: <!-- WinJS references --> 8: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet"> 9: <script src="//Microsoft.WinJS.0.6/js/base.js"></script> 10: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script> 11: ? 12: <!-- BasicAppExample references --> 13: <link href="/css/default.css" rel="stylesheet"> 14: <script src="/js/default.js"></script> 15: </head> 16: <body> 17: ? 18: <!-- The basic template uses a grid layout, so you need to 19: specify the row and column for your elements. --> 20: <div style="-ms-grid-row: 1; -ms-grid-column: 1"> 21: <button id="button1">An HTML button</button> 22: <p id="button1Output"></p> 23: </div> 24: </body> 25: </html> 下面再 default.js內(nèi) 定義 p標(biāo)簽的 點擊事件。大部分的事件處理函數(shù) 都有一個參數(shù)， 一個包含事件信息的Event對象。 單擊事件 提供一個 MouseEvent對象包含了事件的相關(guān)信息，比如 按了鼠標(biāo)那個鍵，那個對象觸發(fā)了此事件等等。 這個例子 是 使用 MouseEvent對象來獲取 鼠標(biāo)點擊時的 坐標(biāo)。 （ click事件響應(yīng)觸摸和鍵盤交互。本主題中的示例假定用戶用鼠標(biāo)點擊。欲了解更多有關(guān)觸摸和不同的設(shè)備進(jìn)行交互的信息,地址: http://msdn.microsoft.com/en-us/library/windows/apps/hh700412） ? 1: (function () { 2: "use strict"; 3: ? 4: // 為p標(biāo)簽定義點擊事件處理函數(shù) 5: function button1Click(mouseEvent) { 6: var button1Output = document.getElementById("button1Output"); 7: button1Output.innerText = 8: mouseEvent.type 9: + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")"; 10: ? 11: } 12: ? 13: var app = WinJS.Application; 14: ? 15: // This function responds to all application activations. 16: app.onactivated = function (eventObject) { 17: if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { 18: // TODO: 初始化你的應(yīng)用程序 19: WinJS.UI.processAll(); 20: } 21: }; 22: ? 23: app.start(); 24: })(); ? 現(xiàn)在要做的就是 為這個p標(biāo)簽注冊 click事件，如果實在普通網(wǎng)頁中可以如下定義事件： <button id="button1" onclick="button1Click(event)">An HTML button</button> ? 但是現(xiàn)在這樣做是不行的，當(dāng)這樣做，運行程序時，就會拋出異常，如下圖。 ? 那么為什么會出現(xiàn)這種情況嗯？ ? 第一：把button1Click函數(shù) 設(shè)置為公有的 第二：使用代碼 來 觸發(fā)這個button1Click函數(shù)。 ? 使用JavaScript的每一個Metro style應(yīng)用程序包括Windows庫支持的JavaScript，一個很有用的東西就是windows庫支持的JavaScript 能夠定義命名空間和類。WinJS.Namespace.define(http://msdn.microsoft.com/en-us/library/windows/apps/br212667)函數(shù) 可以定義 公有的命名空間。 他有兩個參數(shù)：第一個 name參數(shù)，是命名空間的名字，第二個member參數(shù) 包含了 一對或者多對 屬性/值 的 集合。 每個 member的屬性都是公有的， 每個 值 的類型可以是 變量，屬性，或者是 函數(shù)。 下面定義 一個 命名空間，名字是 startPage， 只包含一個 member，名字是：clickEventHandler， 這個屬性的值是 我們之前定義的button1Click 函數(shù)。 ? var namespacePublicMembers = { clickEventHandler: button1Click }; WinJS.Namespace.define("startPage", namespacePublicMembers); ? 下面看一個完整的 default.js ? 1: (function () { 2: "use strict"; 3: ? 4: // The click event handler for button1 5: function button1Click(mouseEvent) { 6: var button1Output = document.getElementById("button1Output"); 7: button1Output.innerText = 8: mouseEvent.type 9: + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")"; 10: ? 11: } 12: ? 13: var app = WinJS.Application; 14: ? 15: // This function responds to all application activations. 16: app.onactivated = function (eventObject) { 17: if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { 18: // TODO: Initialize your application here. 19: WinJS.UI.processAll(); 20: } 21: }; 22: ? 23: var namespacePublicMembers = { clickEventHandler: button1Click }; 24: WinJS.Namespace.define("startPage", namespacePublicMembers); 25: ? 26: app.start(); 27: })(); ? ? 現(xiàn)在 button1Click 函數(shù) 是公有的了，可以在 default.html界面內(nèi)，直接用了，如下 <button id="button1" onclick="startPage.clickEventHandler(event)">An HTML button</button> 下面說一下第二種方法就是 寫代碼來觸發(fā)clickEventHandler函數(shù)。 這個方法就是 用JavaScript檢索空間，使用addEventListener方法 注冊單擊事件。還有問題就是什么時候去檢索這個控件， 那么肯定是當(dāng)頁面加載完畢才會調(diào)用這個方法。如果把addEventListener隨便放在一個地方，那么有可能會出現(xiàn)錯誤，因為有可能 這個控件還沒被頁面加載進(jìn)來，那么這個時候就會報錯。 大多數(shù)html文件 都為Promise(http://msdn.microsoft.com/en-us/library/windows/apps/br211867)提供 then(http://msdn.microsoft.com/en-us/library/windows/apps/br229728)或者 done(http://msdn.microsoft.com/en-us/library/windows/apps/hh701079)函數(shù) 那么什么是promise呢，為了更好的用戶體驗，許多windows library for javascript和windows運行時函數(shù)使用異步調(diào)用。 這樣，您的應(yīng)用程序可以繼續(xù)響應(yīng)用戶的交互，同時在后臺執(zhí)行工作。現(xiàn)在并不是直接返回一個值，異步函數(shù)返回一個Promise. 下面是完整的代碼： html: 1: ? 2: <!DOCTYPE html> 3: <html> 4: <head> 5: <meta charset="utf-8"> 6: <title>BasicAppExample</title> 7: ? 8: <!-- WinJS references --> 9: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet"> 10: <script src="//Microsoft.WinJS.0.6/js/base.js"></script> 11: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script> 12: ? 13: <!-- BasicAppExample references --> 14: <link href="/css/default.css" rel="stylesheet"> 15: <script src="/js/default.js"></script> 16: </head> 17: <body> 18: ? 19: <!-- The basic template uses a grid layout, so you need to 20: specify the row and column for your elements. --> 21: <div style="-ms-grid-row: 1; -ms-grid-column: 1"> 22: <button id="button1">An HTML button</button> 23: <p id="button1Output"></p> 24: </div> 25: </body> 26: </html> javascript: 1: // For an introduction to the Blank template, see the following documentation: 2: // http://go.microsoft.com/fwlink/?LinkId=232509 3: (function () { 4: "use strict"; 5: ? 6: // The click event handler for button1 7: function button1Click(mouseEvent) { 8: var button1Output = document.getElementById("button1Output"); 9: button1Output.innerText = 10: mouseEvent.type 11: + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")"; 12: ? 13: 14: } 15: ? 16: ? 17: ? 18: var app = WinJS.Application; 19: ? 20: // This function responds to all application activations. 21: app.onactivated = function (eventObject) { 22: if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { 23: // TODO: Initialize your application here. 24: WinJS.UI.processAll().done(function () { 25: var button1 = document.getElementById("button1"); 26: button1.addEventListener("click", button1Click, false); 27: ? 28: }); 29: } 30: }; 31: ? 32: ? 33: app.start(); 34: })(); 原文地址：http://msdn.microsoft.com/en-us/library/windows/apps/hh780660#attach_in_code （本人英語水平相當(dāng)有限）哪里不對，多指教。轉(zhuǎn)載于:https://www.cnblogs.com/Mr-Joe/archive/2012/03/29/2423194.html
總結(jié)
以上是生活随笔為你收集整理的第一个 Metro程序（空白应用程序）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： session实现验证码功能
- 下一篇： setjmp