Windows8 Metro 設計與開發-Windows市集(1)

在這個實驗中，您將使用Windows Store API對ContosoCookbook收費。首先將修改“About”對話方塊，檢測測試版本，如果應用未付費，則顯示一個購買按鈕。然後使用CurrentAppSimulator，在點擊購買按鈕時類比購買。最後類比應用內嵌購買，將以前免費的意大利菜譜作為收費的附加項提供。 

在這個練習中，要使用Windows運行時的市集API自訂ContosoCookbook的關於頁面的內容。如果應用已經付費，則顯示許可資訊。如果還未付費，即還是試用版，則顯示購買資訊。而且，購買按鈕上顯示的價格不應該寫入程式碼在應用中，而應該來自從Windows應用擷取的清單資訊。

任務1 – 添加WindowsStoreProxy.xml

我們將使用CurrentAppSimulator類類比購買、擷取許可資訊，以及其他功能。為了將類比做得儘可能真實，我們將為WindowsStoreProxy.xml的檔案向CurrentAppSimulator提供價格、到期日等資訊。

1.      在Visual Studio 中開啟在實驗7中完成的ContosoCookbook項目。如果您沒有完成實驗 7 或者希望從參考副本開始操作，可以在原始材料中找到該實驗的完整版本。

2.       如果項目還沒有資料檔案夾，則建立一個。

3.      按右鍵 data 檔案夾，用“Add - Existing Item”命令從原始材料的資料檔案夾匯入license.xml。我們要用這個檔案建立WindowsStoreProxy.xml4.      開啟default.js，在app.onactivated的WinJS.UI.ProcessAll調用之後添加以下語句：

JavaScript

// Initialize WindowsStoreProxy.xml

appdata.current.localFolder.createFolderAsync("Microsoft\\WindowsStore\\ApiData", Windows.Storage.CreationCollisionOption.openIfExists).then(function(folder) {

   Windows.ApplicationModel.Package.current.installedLocation.getFileAsync("data\\license.xml").then(function(file) {

folder.createFileAsync("WindowsStoreProxy.xml",Windows.Storage.CreationCollisionOption.replaceExisting).then(function(newFile) {

file.copyAndReplaceAsync(newFile);

       });

   });

});

注意：剛剛添加的代碼使用Windows運行時的儲存API在指定位置建立WindowsStoreProxy.xml檔案，CurrentAppSimulator將在這個位置尋找該檔案，並在應用每次啟動的時候將license.xml的內容匯入該檔案。不用代理檔案也可以類比應用付費和產品付費，但如果希望實現更豐富的類比，即擷取價格資訊以及其他資訊，則必須包含WindowsStoreProxy.xml。

5.      開啟license.xml，花些時間研究它的內容。<ListingInformation>元素包含應用本身的資訊，以及我們要在練習3中花錢購買的意大利菜譜產品的資訊。<LicenseInformation>包含應用和產品的許可資訊。在真實環境中，所有資訊都來自Windows市集。但在類比情況下，資訊來自WindowsStoreProxy.xml。

 

任務2 – 修改“About”頁面

現在修改在實驗6中建立的“About”頁面。現在，在“About”頁面的應用標題下面會出現“Trial Version（試用版）”字樣。我們要用儲存API判斷這個應用是否確實為試用版，並根據結果定製頁面的內容。

1.      開啟about.html。

2.      找到包含文本“Trial Version”的H4元素，給它添加一個id=”info”屬性：

HTML

<h4 id="info">Trial Version</h4>

3.      在H4元素後面添加以下BUTTON聲明：

HTML

<button id="purchase"class="purchase-button"></button>

4.      開啟about.css，添加以下CSS類，設定按鈕的樣式：

CSS

.purchase-button {

   width: 225px;

   height: 120px;

   margin-top: 24px;

}

5.      開啟about.js，在ready函數中添加以下語句：

JavaScript

var app = Windows.ApplicationModel.Store.CurrentAppSimulator;

 

if (app.licenseInformation.isTrial) {

   // Show the purchase price on the purchase button

var button =document.querySelector("#purchase");

 

app.loadListingInformationAsync().then(function(listing) {

button.textContent = "Upgrade to theFull Version for " + listing.formattedPrice;

   });

}

else {

   // Show the expiration date and hide the purchase button

document.querySelector("#info").textContent= "Valid until " + app.licenseInformation.expirationDate.toLocaleDateString();

document.querySelector("#purchase").style.visibility= "hidden";

}

6.      花些時間研究剛剛添加的代碼。它使用CurrentAppSimulator.licenseInformation.isTrial判斷應用是否在試用版下運行，它調用CurrentAppSimulator.loadListingInformationAsync擷取價格資訊，以便在購買按鈕上顯示。返回的ListingInformation對象還包含應用的其他資訊。詳細情況請參閱SDK文檔中的Windows.ApplicationModel.Store.ListingInformation。

 

任務3 – 測試結果

現在測試這些修改，看看CurrentAppSimulator和WindowsStoreProxy.xml的效果。

1.      按F5啟動應用程式。

2.      顯示常用鍵欄，點擊“Settings”按鈕。

3.      在“settings”菜單中，點擊“About”，顯示“About”頁面。

4.      確認在“About”頁面上出現了購買按鈕，購買價格是$12.99，1所示。

圖1

應用試用版本中的“About”頁面

5.      返回Visual Studio並停止調試。

6.      開啟license.xml，將<App>區中<Price>元素中的購買價格從$12.99改為$8.99。

7.      再次啟動應用，開啟“About”頁面。看看現在購買按鈕上顯示的購買價格是什嗎？

8.      返回Visual Studio並停止調試。

9.      開啟license.xml，將價格改回$12.99。並將<IsTrial>從true修改為false。

10.  啟動應用程式，開啟“About”頁面。購買按鈕已經消失，現在看到的是“Validuntil Saturday, December 31, 2022”訊息，2所示。

圖2

應用付費版本的“About”頁面

11.  返回Visual Studio並停止調試。

12.  在準備下一個練習時，在 license.xml中將<IsTrial>從false修改為true。

注意:本文章為msdn上windows8線上實驗的指令碼，僅供學習參考。如果想體驗完整實驗可以點擊以下msdn的線上實驗室

http://msdn.microsoft.com/zh-cn/hh968278