本文章是由機器翻譯。

新型應用程式

使用 HTML5 和 JavaScript 建立 Windows 市集應用程式

Rachel Appel

下載代碼示例

Rachel Appel
不僅比爾·蓋茨「讓每張辦公桌和每個家庭都擁有一台電腦」的夢想已變為現實,而且像 Surface 平板電腦這樣的設備也變得日益普及。除 Surface 平板電腦外,造型各異的新型消費設備也經歷了爆炸式的增長。換言之,電腦已無所不在。

在遍佈全球的這些電腦上,已安裝有超過 10 億個 Windows 作業系統;在過去兩年裡,每年都會售出 3 億份 Windows 7 許可證。現有龐大的可升級 Windows 安裝群與迅速增長的 Windows 8 設備(如 Surface)市場相結合,為您獲得經營成功提供了一種途徑。這是對 Windows 的重新構想 ― 您可以在 Windows 應用商店中發佈應用,從而獲得前所未有的盈利機會。

用於創建 Windows 應用商店應用的平臺、語言和工具集

為了創建 Windows 應用商店的應用,您需要有 Windows 8、Visual Studio2012 以及任何可滿足您的應用要求的 SDK,如 Windows Live SDK 或 Bing Maps SDK。由於這種系統安裝和配置的要求極低,使得 Windows 8 上的應用開發(從安裝到部署)變得十分容易。

安裝必備軟體之後,下一步是選擇語言。如果您是有 Microsoft 堆疊開發背景的 Microsoft .NET Framework 開發人員,使用 C# 或Visual Basic編寫過 Windows 表單、Windows Presentation Foundation(WPF) 或 Silverlight 應用,那麼使用 XAML 和 C# 或Visual Basic創建 Windows 應用商店應用就變得輕而易舉。C++ 開發人員還可以將 C++ 作為編譯語言,同時以 XAML 作為伴隨的 GUI。

如果您是 Web 開發人員(包括ASP.NET),那麼您可以將開放標準 HTML5、JavaScript 和 CSS3 方面的現有知識直接付諸 Windows 應用商店應用的開發。Web 開發人員可以繼續使用許多常用的協力廠商 JavaScript 庫,如 jQuery 或 Knockout。在本文中,我選擇使用 JavaScript 語言。

無論您有怎樣的開發背景,開發本機 Windows 8 應用的進入門檻都不高。這是因為,Windows 運行時 (WinRT) 作為一個平臺包含了 Windows 核心服務上部的 API,如圖 1 所示。

Architecture of Windows Store Apps
圖 1 Windows 應用商店應用的體系結構

通過 WinRT API,您可以訪問 Windows 8 提供的所有功能,包括硬體 API,如內置網路攝像頭、地理位置、光線感應器和加速感應器等硬體。當然,您還可以輕而易舉地獲得基本平臺功能(如記憶體管理、身份驗證、全球化和非同步處理)以及 Windows 應用商店的應用功能(如搜索、共用和通信)。甚至還有用於操作音訊和視頻的 API;不過,如果您要編寫 JavaScript 應用,則 HTML5 <audio> 和 <video> 元素效果甚佳。您可在 bit.ly/ZCwcJE 的「Windows 應用商店應用 API 參考」頁上流覽完整 API。

Windows 應用商店應用的原則

Windows 應用商店應用在運行中應提供完全沉浸式全屏體驗,為使用者交付流暢的內容,而應用本身及其命令不會對使用者產生阻礙。Windows 應用商店的應用以清晰簡明的形式顯示資料,將使用者的注意力集中在內容上。

Windows 應用商店的應用可完成傳統 Windows 或 Web 應用以前無法實現的工作,例如,利用 Windows 運行時中稱為「合約」的元素作為各應用間的聯絡途徑,以方便而統一的方式共用、搜索和相互通信。

出色的使用者體驗是 Windows 應用商店應用開發的關鍵要素,這包括從呈現和佈局,直至導航和應用性能等諸多方面體驗。使用者期望各應用之間以及應用與作業系統之間表現出一致性。Windows 應用商店的應用全部以使用者體驗為中心,通過遵循一定的設計原則(如採用一致的字體、Windows UI 輪廓以及可伸縮的網格系統)增強使用者使用應用時的舒適程度。這種一致性貫穿于各個應用以及 Windows 8 本身。

確保觸控功能以及滑鼠輸入操作的可靠性和一致性十分重要,因為使用者現在可通過更多方式與計算裝置進行交互,比如滑鼠、觸控筆、觸控式螢幕、攝像頭和感應器等。

由於含處理器(如 ARM)的電池供電設備正逐漸成為計算裝置的主流,Windows 8 必須對總記憶體和每個應用的記憶體進行嚴格管理,以便在資源不足的情況下也能提供快速流暢的體驗。Windows 8 應用具有簡單直接的過程生命週期,以確保提供最佳體驗。

雖然許多應用都可作為 Windows 應用商店應用運行,但並非每個應用都是好的備選應用。例如,Visual Studio本身蘊含著許多現代 UI 設計原則,但它的用途是讓使用者執行命令(換言之,進行程式設計)。因此,它不十分適合作為 Windows 應用商店應用。

Visual Studio2012 Windows 應用商店應用專案範本

Visual Studio2012 推出了一套新範本,説明採用 C#、Visual Basic、C++ 和 JavaScript 開發 Windows 應用商店應用。無論使用何種語言,都可採用以下範本樣式:

  • Blank:一個骨架範本,其中含有構建 Windows 應用商店應用所需的最少檔。
  • 網格:顯示有一個網格的範本,該網格使用 Windows 8 UI 輪廓以及用於實現多種功能的範本代碼,包括導航和貼靠視圖支援(後文有詳細說明)。
  • Split:在一個雙列視圖中顯示專案和專案詳細資訊清單的範本,便於使用者在各專案之間快速切換。
  • Fixed:在 default.html 頁中使用 ViewBox 物件的一個空白範本。ViewBox 就是在遊戲中使用的 WinRT 物件。
  • 導航:帶有「空白」專案結構的範本,另外在「/home」目錄下包含導航以及一組基本應用資源(即 home.html、home.js 和 home.css)。

由於「網格」範本包含展示許多出色 Windows 8 功能(如貼靠視圖、螢幕縮放和導航支援)的代碼,因此該範本是編寫 Windows 應用商店應用的理想入門方法。

在新建 JavaScript「網格」專案範本後,通過檢查結構,可發現該專案包含全面的標準 Web 檔案類型(如 .html、.css 和 .js 檔),這些檔都組織在該專案根目錄下的資料夾中。隨後,通過按 F5 或從「調試」功能表中選擇「啟動調試」,可調試並運行 Windows 應用商店應用。

在 Windows 應用商店應用範本中,default.html 是 Windows 應用商店應用的起始頁,它附帶一個指令檔 /js/default.js,其中含有基本過程生命週期管理代碼。與其他所有 HTML 檔案一樣,default.html 包含您可能需要的代碼,包括腳本引用以及用於定義頁面結構的新 HTML5 語義標記。以下代碼片段位於 default.html <body> 標記內,它使用 WinJS 控制項實現導航並載入 groupedItems.html 頁:

<div id="contenthost"
  data-win-control="Application.PageControlNavigator"
  data-win-options=
  "{home: '/pages/groupedItems/groupedItems.html'}"></div>

data-* 屬性是 HTML5 中用於向 HTML 元素應用自訂代碼或行為的方式。在 Windows 應用商店應用開發中,data-win-* 屬性通常引用 Windows JavaScript 控制項。 Windows JavaScript 控制項是內置的 WinRT 元件,可應用於 HTML 元素以增強或修改其行為或樣式。 Data-win-* 屬性在 Windows 應用商店的 JavaScript 應用中普遍採用,尤其在進行資料繫結時。

Windows 應用商店應用中的資料訪問

「網格」範本在「/js」資料夾中有一個名為「data.js」的檔,其中包含用於生成陣列資料集的代碼,還有用於對資料進行分組和操作的函數。 data.js 檔還包含一些示例資料,您可將之替換為自己的資料。 在本文中,我將使用一個倒計時應用的資料,該應用顯示某個事件(如公休日)之前剩餘的天數。

在 data.js 檔中,可在檔開頭附近找到唯一的「// TODO」注釋。 請用您自己的代碼替換該注釋下面的代碼,使該代碼如同以下程式碼片段所示,此程式碼片段通過 XMLHttpRequest 調用檢索 JSON 資料,然後創建資料集,包括動態屬性(如 daysToGo)和消息欄位:

var list = new WinJS.Binding.List();
...
WinJS.xhr({ url: "data.json" }).then(function (xhr) {
  var items = JSON.parse(xhr.responseText);          
  items.forEach(function (item) {
    item.daysToGo = Math.floor(
      (Date.parse(item.eventDate) - new Date()) / 86400000);
    item.message = item.daysToGo + " days until " + item.title;
    if (item.daysToGo >= 0) {
      list.push(item);
    };
  })
})

data.js 的第一行代碼具現化一個簡單命名為「list」的 WinJS.Binding.List 物件,此首行代碼將各個項推送到此 List 之中。

該 List 物件實現 JSON 資料或 JavaScript 陣列與 HTML 元素之間的綁定。 此清單變數填充資料後,請在 HTML 標籤中使用綁定運算式將 List 成員綁定至 HTML 元素。

在通過調用 JSON.parse 讀取 JSON 資料時,名稱/值對中的名稱在運行時與 JavaScript 物件的屬性進行匹配。 以下 JSON 資料顯示 JSON 結構如何映射到前面程式碼片段中專案變數的成員。 key、title、eventDate、image、color 和 group 欄位都映射到該專案物件的屬性:

[{"key":"1","group":{"key":"group1","title":"Important Dates"},
"title":"Rachel's Birthday","eventDate":"01/13/2013",
"image":"/images/birthday.png","color":"#6666FF"},
{"key":"2","group":{"key":"group1","title":"Important Dates"},
"title":"Ada Lovelace Day","eventDate":"10/16/2013",
"image":"/images/ada.jpg","color":"#fff"},
{"key":"3","group":{"key":"group2","title":"Holidays"},"title":"Christmas",
"eventDate":"12/25/2013","image":"/­images/­tree.png","color":"#ef0d0d"},
{"key":"4","group":{"key":"group3","title":"School"},"title":"School Ends","eventDate":"6/10/2013","image":"/images/schoolbus.png","color":"#fff"},
{"key":"5","group":{"key":"group2","title":"Holidays"},"title":"Thanksgiving",
"eventDate":"11/29/2012","image":"/­images/­thanksgiving.png","color":"#FFCC00"},
{"key":"6","group":{"key":"group2","title":"Holidays"},"title":"New Year's Day", "eventDate":"1/1/2013","image":"/images/celebrate.png","color":"#f8baba"}]

至此已載入資料,接著您需要確保 List 物件綁定至正確的 HTML 元素。 圖 2 中對「/pages/groupedItems/groupedItems.html」頁的修改顯示了進行中的資料繫結。

圖 2 使用 WinJS 控制項將 List 物件資料繫結至 HTML 元素

<!-- These templates are used to display each
  item in the ListView declared below.
-->
<div class="headertemplate" data-win-control="WinJS.Binding.Template">
  <button class="group-header win-type-x-large win-type-interactive"
    data-win-bind="groupKey: key"
    onclick="Application.
navigator.pageControl.
navigateToGroup(
      event.srcElement.groupKey)"
      role="link" tabindex="-1" type="button">
    <span class="group-title win-type-ellipsis"
      data-win-bind="textContent: title"></span>
    <span class="group-chevron"></span>
  </button>
</div>
<div class="itemtemplate" data-win-control="WinJS.Binding.Template" >
  <div id="myitem" class="item"
    data-win-bind="style.background: color">
    <img class="item-image" src="#"
      data-win-bind="src: image; alt: title" />
    <div class="item-overlay">
    <h2 class="item-title" data-win-bind="innerText: message"></h2>
      <h6 class="item-subtitle"
        data-win-bind="textContent: eventDate"></h6>
    </div>
  </div>
</div>
<!-- The content that will be loaded and displayed.
-->
<div class="fragment groupeditemspage">
  <header aria-label="Header content" role="banner">
    <button class="win-backbutton" aria-label="Back"
       disabled type="button"></button>
    <h1 class="titlearea win-type-ellipsis">
      <span class="pagetitle">How long until...</span>
    </h1>
  </header>
    <section aria-label="Main content" role="main">
      <div id="listView" class="groupeditemslist"
        aria-label="List of groups"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{  selectionMode: 'multi',
        tapBehavior:'toggleSelect' }"></div>
    </section>
</div>

圖 2 中每個含有 data-win-bind 屬性的 HTML 元素都有一個綁定運算式,該運算式與前面程式碼片段中專案變數的屬性名稱相匹配,因此,您只需確保綁定運算式與欄位名稱匹配。 還務必記得修改 groupedDetail.html 和 itemDetails.html 頁中的綁定運算式,以便在使用者流覽到這些頁面時顯示正確的資料。

在 Windows 模擬器中運行該專案會產生類似圖 3 所示的結果。 (您可到 bit.ly/M1nWOY 瞭解有關使用該模擬器的更多內容。)

Replace the Sample Data to Make a Basic App
圖 3 替換示例資料以創建基本應用

可以看到,您只需簡單地替換Visual Studio範本中的代碼便可實現快速的資料訪問。 但是,專案通常會很大或很複雜,從而使維護變得困難。 如果是這樣,請使用 Model-View-ViewModel (MVVM) 模式簡化維護工作。 網上對這種模式有極為詳細的記載。

您的應用此時已經可以運行,但您應利用 Windows 8 的眾多出色功能讓您的應用從眾多應用中脫穎而出。

打造您的 Windows 應用商店應用品牌

考慮到 Windows 8 的焦點在於起始頁,因此可順理成章從起始頁開始打造品牌。 起始頁中有很多動態磁貼,這些磁貼不僅僅是一堆方形圖示。 它們是向使用者展示您的應用和吸引使用者的最佳方式。 動態磁貼之所以稱為「動態」,是因為可以在這些磁貼中動態顯示資訊和圖像,為您的應用增添吸引力。

Windows 應用商店應用需要三個單獨的磁貼圖像,分別具有以下圖元大小:

  • 徽標:150 x 150(標準磁貼)
  • 寬徽標:150 x 310(寬磁貼)
  • 小徽標:30 x 30(僅顯示在應用商店的應用清單中)

這些圖像可以採用任何常用圖像格式,具有透明背景的圖像效果最佳。 從專案根目錄打開 package.appxmanifest 檔會顯示配置調色板,可在其中選擇磁貼圖像並設置背景顏色。 圖 4 演示了標準磁貼和寬磁貼。

Countdown App Standard and Wide Tiles
圖 4 倒計時應用標準磁貼和寬磁貼

設置磁貼時是配置初始螢幕的好時機,只需選擇一個圖像和背景顏色即可完成配置,而不必編寫代碼。 雖然磁貼和初始螢幕是打造您的應用品牌的重要因素,但您還可以通過更多方法打造您的應用品牌並裝飾您的應用,您可在 bit.ly/M4HYmL 瞭解這方面的資訊。

您的應用的 Windows 8「必備」功能

您的應用此時或許已能正常運行,但您可以發掘 Windows 8 應用生態系統中的許多新功能和 API,讓您的應用真正超凡脫俗。 我將逐一做簡短介紹。

應用欄應用欄 (AppBar) 是每個應用的必備功能,它是 default.html 中的一個 WinJS 控制項。 應用欄通常是不可見的,但在使用者按右鍵或將滑鼠游標從螢幕的頂部或底部掃過時,應用欄就會橫跨螢幕底部顯示出來。 圖 5 顯示了含有三個按鈕及其相應事件攔截器的應用欄的標記。

圖 5 帶有用於添加、刪除和匯出資料的按鈕的應用欄

// AppBar markup in default.html
<div id="appbar" data-win-control="WinJS.UI.AppBar">
  <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'addItem', label:'Add',
    icon:'add', section:'global'}" type="button"></button>
  <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'exportData', label:'Save',
    icon:'save', section:'global'}" type="button"></button>
  <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'deleteItem', label:'Delete',
    icon:'delete', section:'selection'}" type="button"></button>
</div>
// Script in groupedItems.js
document.getElementById("exportData").addEventListener("click", Data.exportData);
document.getElementById("addItem").addEventListener("click", this.addItem);
document.getElementById("deleteItem").addEventListener("click", this.deleteItem);

全域應用欄命令應放于應用欄的右側,上下文命令則放于左側。 可使用 CSS 設置應用欄樣式,因為這裡只有一個 <div>。

貼靠視圖 Windows 應用商店的應用可以全屏運行,也可在一種稱為「貼靠視圖」的模式下運行,當使用者將應用「粘在」螢幕的左側或右側時即會進入這種模式。 由於該應用現有螢幕資源較少,因此只顯示必要的資料較好。

「網格」範本中內置貼靠視圖支援,因此,您需要確認貼靠後資料顯示良好,可以呈現相關且可讀的資訊。 應用欄在應用貼靠時也會正常工作,因此可能還需要進行樣式調整。

語義縮放 Windows 8 中這個有利於觸控的新功能可用於在一個易於理解的視圖中聚合大量資料。 使用者可通過以下方式調用語義縮放功能:

  • 觸控:縮小手勢
  • 滑鼠:Ctrl+滾輪
  • 鍵盤: Ctrl - and Ctrl +

語義縮放不是簡單地顯示資料的縮放視圖,更多地是以一種利於導航的有意義方式來顯示資料。 如果有大量資料,使用者最好進行總覽顯示,而不是在大量資訊中滾動顯示。 請考慮如何以最有意義的方式呈現資料。

搜索和共用在應用之間搜索和共用資料是新型應用的核心要素。 使用者現在可以一次跨多個應用進行搜索,然後共用找到的資料。 或者,您的應用可將自身註冊為共用目標,並接受使用者從其他 Windows 應用商店應用共用的資料。 應用間的通信從未像現在這樣簡單而一致。

選取器控制項這些控制項是已針對現代使用者介面進行過更新的傳統 Windows 控制項(如「檔打開選取器」或「檔保存選取器」),或是一直作為許多版本 Windows 應用的主流介面的列印設置對話方塊。

媒體由於使用 JavaScript 生成的 Windows 應用商店應用全面支援 HTML5,因此,<audio> 和 <video> 元素的工作方式與它們在普通網頁中的工作方式相同。

Toast 通知 Toast 通知是向使用者提供暫態消息的一種方法,而無論該應用是否正在使用中。 Toast 通知的最常見形式是電子郵件提醒快顯視窗和手機短信。 Toast 消息可以包含文本和圖像,可作為吸引使用者使用您的應用的另一種方法。 您可以將相同的通知發佈到 Windows 8 鎖屏以快速流覽任何待讀消息。

新一代應用

總之,Windows 8 是重新構想的 Windows 作業系統,在一個史無前例的市場上引入了該作業系統自Windows 95以來一些最重大的改變。 通過內置的Visual Studio專案範本,您可以在這個最大的應用創作市場上,比以往更加方便和快速地發佈能夠盈利的應用。

因篇幅所限,本文無法討論您在 Windows 應用商店應用中可以而且應該使用的所有了不起的功能,因此,我強烈建議您查看「新一代應用」計畫 (bit.ly/W8GenAppDev)。 該計畫可指導您完成在 30 天內構建 Windows 應用商店(或 Windows Phone)應用的過程,提供了免費的技術和設計諮詢及説明以及獨有的提示與資源。

Rachel Appel 是 Microsoft 在紐約市的開發推廣人員。您可以通過 rachelappel.com 網站與她聯繫,或者通過電子郵件 (rachel.appel@microsoft.com) 與她聯繫。您還可以在 Twitter 上(網址為 twitter.com/rachelappel)留意她的最新更新。

衷心感謝以下技術專家對本文的審閱: Ian LeGrow