標籤：style blog class code c java
原文:Windows 8.1 應用再出發 (WinJS) - 建立一個簡單項目前面幾篇我們介紹了如何利用 C# + XAML 完成Windows Store App 功能的實現，接下來的幾篇我們來看看如何利用 Html + WinJS 來完成這些功能。
本篇我們使用WinJS 來建立一個簡單的項目，來看看項目的構成是怎樣的，與C#,XAML 的項目有哪些異同。
首先我們在Visual Studio 2013中選擇模板 -> JavaScript -> Windows 市集來建立一個空白應用程式，來看看項目的構成（為方便對照，我在右邊放了使用XAML的商店應用）
package.appxmanifest檔案絕大部分與XAML項目相同，可以參照 Windows 8.1 應用再出發 - 建立我的第一個應用 。
有一個地方需要注意，那就是應用程式選項卡中 進入點 變成了 起始頁 ，熟悉BS開發的同學們肯定不會對起始頁陌生。
下面來看看起始頁 default.html：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta charset="utf-8" /> <title>WinJSAppDemo</title> <!-- WinJS 引用 --> <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.2.0/js/base.js"></script> <script src="//Microsoft.WinJS.2.0/js/ui.js"></script> <!-- WinJSAppDemo 引用 --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script></head><body> <p>此處顯示內容</p></body></html>
這是一個很簡單的html構成，我們看到檔案中添加了對WinJS 和 針對起始頁的 default.js 和 default.css 的引用。
來看看default.js：
(function () { "use strict"; 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: 此應用程式剛剛啟動。在此處初始化 //您的應用程式。 } else { // TODO: 此應用程式已從掛起狀態重新啟用。 // 在此處恢複應用程式狀態。 } args.setPromise(WinJS.UI.processAll()); } }; app.oncheckpoint = function (args) { // TODO: 即將掛起此應用程式。在此處儲存 //需要在掛起中保留的任何狀態。您可以使用 // WinJS.Application.sessionState 對象，該對象將在 //掛起中自動儲存和恢複。如果您需要在 //掛起應用程式之前完成非同步作業，請調用 // args.setPromise()。 }; app.start();})();
我們看到，該檔案中有兩個很重要的方法，app.onactivated 和 app.oncheckpoint，分別進行應用啟用和掛起時的處理。類似XAML中的 OnLaunched 和 OnSuspending。
大家注意 args.setPromise(WinJS.UI.processAll()); 的意思是在onactivated完成之前，完成 WinJS.UI.processAll() 的操作。而這個操作的意思是把聲明的控制項綁定到所有元素上，並且在指定的根項目啟動。
如果我們想在default.html頁載入時跳轉到我們指定的頁面，比如main.html，需要做哪些動作呢？
首先我們建立 main.html 相關檔案，main.html、main.js 和 main.css，路徑為pages/main，接下來完成跳轉我們有兩種方式：
（1）. 在default.html 裡指定跳轉頁面
先對default.js做如下修改
var nav = WinJS.Navigation;var ui = WinJS.UI;
上面定義了兩個變數，在下面的onactivated方法中加入以下代碼來替換 args.setPromise(WinJS.UI.processAll());
var p = ui.processAll().then(function () {return nav.navigate(nav.location || Application.navigator.home, nav.state);});args.setPromise(p);
然後在default.html 頁面的body中加入
<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: ‘/pages/main/main.html‘}" />
這樣就可以在啟動時，指定顯示main.html 了。
（2）. 在default.js 裡指定跳轉
對default.js做如下修改
var nav = WinJS.Navigation;
定義nav變數，下面onactivated方法中加入如下代碼替換 args.setPromise(WinJS.UI.processAll());
var p = WinJS.UI.processAll(). then (function () { return nav.navigate("/pages/main/main.html")});args.setPromise(p);
然後加入下面方法
nav.onnavigated = function (evt) { var contentHost = document.body.querySelector("#contenthost"), url = evt.detail.location; WinJS.Utilities.empty(contentHost); WinJS.UI.Pages.render(url, contentHost); }
最後在default.html 檔案中加入
<div id="contenthost"/>
這樣也完成了啟動時的頁面跳轉到main.html 的要求。
好了，到這裡我們就利用WinJS 和 Html 完成了簡單項目的建立，接下來我們利用WinJS示範XAML中介紹過的其他功能，謝謝。
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
