最近在學(xué)習(xí)win8 metro app的開發(fā)，今天剛剛學(xué)了一個(gè)小的例子，分享一下
開始之前你需要準(zhǔn)備。。。
1、開發(fā)win8應(yīng)用需要具備Windows 8 和 Microsoft Visual Studio Express 2012 for Windows 8
下載 Windows 8
2、安裝window8之后，轉(zhuǎn)至 開發(fā)者的下載內(nèi)容 ，查找下載工具和 SDK 標(biāo)題，然后單擊“立即下載”按鈕
3、你需要開發(fā)者許可證才能開始創(chuàng)建 Windows 應(yīng)用商店應(yīng)用。 獲取開發(fā)者許可證。
在 Visual Studio 中創(chuàng)建新項(xiàng)目，我們來創(chuàng)建名為 HelloWorld 的新應(yīng)用。以下是操作方法：
啟動(dòng) Visual Studio Express 2012 for Windows 8。
在“文件”菜單上，選擇“新建項(xiàng)目”。會(huì)出現(xiàn)“新建項(xiàng)目”對(duì)話框?？梢栽趯?duì)話框的左側(cè)窗格中選擇要顯示模板的類型。
在左側(cè)窗格中，依次展開“已安裝”、“模板”和 JavaScript，然后選擇“Windows 應(yīng)用商店”模板類型。對(duì)話框的中心窗格會(huì)顯示一列適用于 JavaScript 的項(xiàng)目模板。
在中心窗格中，選擇 Blank App 模板。
在 Name 文本框中，輸入 "HelloWorld"。
單擊“確定”可創(chuàng)建項(xiàng)目。Visual Studio 創(chuàng)建項(xiàng)目并在“解決方案資源管理器”中顯示該項(xiàng)目。
盡管 Blank App 為最基本的模板，但該模板仍包含少量文件：
清單文件 (package.appxmanifest)介紹了應(yīng)用(它的名稱、介紹、磁貼、開始頁面、初始屏幕等等)并列出了應(yīng)用包含的文件。
要在開始屏幕中顯示的一組大的和小的徽標(biāo)圖像(logo.png 和 smalllogo.png)。
表示應(yīng)用位于 Windows 應(yīng)用商店的圖像 (storelogo.png)。
顯示應(yīng)用啟動(dòng)時(shí)間的初始屏幕 (splashscreen.png)。
Windows JavaScript 庫的 CSS 和代碼文件(位于 References 文件夾中)。
開始頁面 (default.html) 和附帶的 JavaScript 文件 (default.js)，這些文件在應(yīng)用啟動(dòng)時(shí)運(yùn)行。
這些文件是使用 JavaScript 的所有 Windows 應(yīng)用商店應(yīng)用必不可少的文件。在 Visual Studio 中創(chuàng)建的所有項(xiàng)目都包含這些文件。
現(xiàn)在我們就創(chuàng)建了一個(gè)簡單的應(yīng)用，如果你想看它的外觀，按 F5 可構(gòu)建、部署并啟動(dòng)應(yīng)用。首先會(huì)出現(xiàn)默認(rèn)的初始屏幕。
這就是初始屏幕
若要關(guān)閉應(yīng)用，請(qǐng)從屏幕的頂部邊緣向底部邊緣滑動(dòng)或按 Alt-F4。(有的筆記本要按alt+fn+f4)關(guān)閉應(yīng)用
接下來我們修改default.htm頁面，這是默認(rèn)生成的
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>HelloWorld</title> 6 7 <!-- WinJS references --> 8 <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> 9 <script src="//Microsoft.WinJS.1.0/js/base.js"></script>10 <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>11 12 <!-- HelloWorld 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.html 文件中添加一些新的內(nèi)容。正如你向任何其他 HTML 文件中添加內(nèi)容一樣
1、使用以下內(nèi)容替代 body 元素中的現(xiàn)有內(nèi)容：顯示 "Hello, world!" 的首級(jí)標(biāo)題、詢問用戶名的一些文本、用于接受用戶名的 input 元素、button 以及 div 元素。 向 input、button 和 div 分配 ID。
1 <body>2 <div style="width:100%; height:100%; background-color:green;">3 <h1>Hello World!</h1>4 <p>What's your name?</p>5 <input id="inputName" type="text" /><button id="btnHello">Say hello</button>6 <div id="OutputMsg">7 </div>8 </div>9 </body>
我們啟動(dòng)應(yīng)用程序看看效果吧
現(xiàn)在點(diǎn)擊按鈕是沒有任何反應(yīng)的，因?yàn)槲覀儧]有給它注冊(cè)事件，接下來要做的就是給按鈕添加事件，我們向 default.js 文件添加事件處理程序代碼。
我們打開default.js文件看看是些什么東東
在我們開始添加自己的代碼之前，我們來看一下該文件中代碼的頭幾行和最后幾行：
1 (function () {2 "use strict";3 4 // Omitted code 5 6 })();
這是自我執(zhí)行匿名函數(shù)
代碼的下一行為 JavaScript 代碼打開了嚴(yán)格模式。嚴(yán)格模式為代碼提供了額外的錯(cuò)誤檢查。例如，它防止你使用隱式聲明的變量或?yàn)橹蛔x屬性分配值。
查看 default.js 中代碼的剩余部分。它處理了應(yīng)用的 activated 和 checkpoint 事件。我們以后會(huì)深入了解這些事件的詳細(xì)信息?，F(xiàn)在，只要了解啟動(dòng)應(yīng)用時(shí)會(huì)觸發(fā) activated 事件。
我們來為 button 定義事件處理程序
function buttonClickHandler(){
}
在事件處理程序內(nèi)，從“inputName控件內(nèi)檢索用戶名，并使用該用戶名創(chuàng)建問候語”，首先判斷用戶名是否輸入，沒有彈出提示框，有則輸出問候語
1 function buttonClickHandler() 2 { 3 var username = document.getElementById("inputName").value; 4 if (username == "") { 5 new Windows.UI.Popups.MessageDialog("Please input your name ！", "Tip").showAsync(); 6 return false; 7 } 8 else { 9 var greeting = "Hello, " + username + "! Nice to meet you";10 document.getElementById("OutputMsg").innerText = greeting;11 }12 }
現(xiàn)在，你只需向該按鈕注冊(cè)該事件處理程序。注冊(cè)事件處理程序的較好時(shí)機(jī)是在激活應(yīng)用之時(shí)。幸運(yùn)的是，Visual Studio 為我們?cè)?default.js 文件中生成了一些代碼，可處理應(yīng)用的激活：app.onactivated 事件處理程序
1 app.onactivated = function (args) { 2 if (args.detail.kind === activation.ActivationKind.launch) { 3 if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { 4 // TODO: 此應(yīng)用程序剛剛啟動(dòng)。在此處初始化 5 //您的應(yīng)用程序。 6 } else { 7 // TODO: 此應(yīng)用程序已從掛起狀態(tài)重新激活。 8 // 在此處恢復(fù)應(yīng)用程序狀態(tài)。 9 }10 args.setPromise(WinJS.UI.processAll());11 12 var helloButton = document.getElementById("btnHello");13 14 helloButton.addEventListener("click", buttonClickHandler, false);15 }16 };
以下是更新的 default.js 文件的完整代碼：
1 (function () { 2 "use strict"; 3 4 WinJS.Binding.optimizeBindingReferences = true; 5 6 var app = WinJS.Application; 7 var activation = Windows.ApplicationModel.Activation; 8 9 app.onactivated = function (args) {10 if (args.detail.kind === activation.ActivationKind.launch) {11 if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {12 // TODO: 此應(yīng)用程序剛剛啟動(dòng)。在此處初始化13 //您的應(yīng)用程序。14 } else {15 // TODO: 此應(yīng)用程序已從掛起狀態(tài)重新激活。16 // 在此處恢復(fù)應(yīng)用程序狀態(tài)。17 }18 args.setPromise(WinJS.UI.processAll());19 20 var helloButton = document.getElementById("btnHello");21 22 helloButton.addEventListener("click", buttonClickHandler, false);23 }24 };25 26 app.oncheckpoint = function (args) {27 // TODO: 即將掛起此應(yīng)用程序。在此處保存28 //需要在掛起中保留的任何狀態(tài)。您可以使用29 // WinJS.Application.sessionState 對(duì)象，該對(duì)象將在30 //掛起中自動(dòng)保存和恢復(fù)。如果您需要在31 //掛起應(yīng)用程序之前完成異步操作，請(qǐng)調(diào)用32 // args.setPromise()。33 };34 35 function buttonClickHandler()36 {37 var username = document.getElementById("inputName").value;38 if (username == "") {39 new Windows.UI.Popups.MessageDialog("Please input your name ！", "Tip").showAsync();40 return false;41 }42 else {43 var greeting = "Hello, " + username + "! Nice to meet you";44 document.getElementById("OutputMsg").innerText = greeting;45 }46 }47 48 app.start();49 })();
運(yùn)行一下我們的程序吧
執(zhí)行成功了，我們?cè)俳o按鈕添加一些樣式吧
打開default.css文件，添加如下樣式
1 body { 2 } 3 4 .buttonstyle { 5 margin-left:6px; 6 background-color:chocolate; 7 } 8 9 10 @media screen and (-ms-view-state: fullscreen-landscape) {11 }12 13 @media screen and (-ms-view-state: filled) {14 }15 16 @media screen and (-ms-view-state: snapped) {17 }18 19 @media screen and (-ms-view-state: fullscreen-portrait) {20 }
只有.buttonStyle是我們自己添加的哦，其他是默認(rèn)的
那么怎么給按鈕添加上呢，我們來到default.js文件
1 app.onactivated = function (args) { 2 if (args.detail.kind === activation.ActivationKind.launch) { 3 if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { 4 // TODO: 此應(yīng)用程序剛剛啟動(dòng)。在此處初始化 5 //您的應(yīng)用程序。 6 } else { 7 // TODO: 此應(yīng)用程序已從掛起狀態(tài)重新激活。 8 // 在此處恢復(fù)應(yīng)用程序狀態(tài)。 9 }10 args.setPromise(WinJS.UI.processAll());11 12 var helloButton = document.getElementById("btnHello");13 helloButton.className = "buttonstyle";14 helloButton.addEventListener("click", buttonClickHandler, false);15 }16 };
helloButton.className="buttonstyle"; 添加上這一句就可以了，自己運(yùn)行一下看看吧
本文來自小慧only的博客，原文地址：http://www.cnblogs.com/zhaohuionly/archive/2012/11/24/2785980.html
聯(lián)系客服
