Windows811Windows应用商店.docx

Windows811Windows应用商店.docx

《Windows811Windows应用商店.docx》由会员分享，可在线阅读，更多相关《Windows811Windows应用商店.docx（13页珍藏版）》请在冰豆网上搜索。

Windows811Windows应用商店

动手实验

Windows应用商店

实验版本：

1.0.0

最后更新日期：

9/25/2018

概述

编写Metro应用最有吸引力的理由之一，就是很容易将它们发布到Windows应用商店（WindowsStore）。

当今世界，有超过5亿台PC运行Windows7，每台PC都代表着一个升级到Windows8的潜在可能，整个市场，以及收入的潜力，巨大而分散。

根据目前的收入分享计划，最高80%的销售收入属于应用作者，所以开发人员有足够的动力开发出优秀的应用并贡献给全世界。

您可以通过Windows应用商店免费发布应用，也可以通过应用收费而获利。

也可以选择提供试用版本，使用Windows.ApplicationModel.Store中的WindowsStoreAPI检测试用版本，如果选择，可以在试用版本中向用户提供有限的功能，直到用户购买了应用为止。

利用其他API，可以方便地从试用版本升级到付费版本，支持通过应用内嵌购买的方式选购其他产品，支持获取许可信息，以及其他。

Windows运行时的CurrentAppSimulator为在受控环境下依赖WindowsStoreAPI模拟购买和测试代码提供了一个方便机制。

在这个实验中，您将使用WindowsStoreAPI对MovieDang收费。

首先将修改“关于”对话框，检测测试版本，如果应用未付费，则显示一个购买按钮。

然后使用CurrentAppSimulator，在点击购买按钮时模拟购买，最后模拟应用内嵌购买。

目标

本实验将向您展示：

检测应用运行的是否是试用版

在应用中模拟购买应用

模拟通过应用内嵌购买方式选购其他产品

获取关于应用和产品的许可信息

系统要求

要完成本实验，您的计算机必须安装以下软件：

∙MicrosoftWindows8正式版

∙适用于Windows8的MicrosoftVisualStudio2012RTM

安装

要完成本实验，您需要在计算机上执行以下步骤完成准备工作：

1.安装MicrosoftWindows8正式版

2.安装适用于Windows8的MicrosoftVisualStudio2012RTM

练习

本实验包括以下练习：

1.检测试用版

2.模拟应用购买

3.模拟产品购买

本实验预计用时：

30–40分钟

练习1：

检测试用版

在这个练习中，要使用Windows运行时的应用商店API自定义MovieDang的关于页面的内容。

如果应用已经付费，则显示许可信息。

如果还未付费，即还是试用版，则显示购买信息。

而且，购买按钮上显示的价格不应该硬编码在应用中，而应该来自从Windows应用获取的清单信息。

任务1–添加WindowsStoreProxy.xml

我们将使用CurrentAppSimulator类模拟购买、获取许可信息，以及其他功能。

为了将模拟做得尽可能真实，我们将为WindowsStoreProxy.xml的文件向CurrentAppSimulator提供价格、到期日期等信息。

1.在VisualStudio中打开在实验7中完成的MovieDang项目。

如果您没有完成实验7或者希望从参考副本开始操作，可以在原始材料中找到该实验的完整版本。

2.如果项目中没有data文件夹，就创建一个。

3.在项目的data文件夹上点击右键，用“Add-ExistingItem”命令从原始材料assets文件夹中的data文件夹导入license.xml。

我们要用这个文件创建WindowsStoreProxy.xml。

4.打开default.js，在文件顶部其他全局变量声明的下面添加以下语句：

JavaScript

varappmodel=Windows.ApplicationModel;

varstorage=Windows.Storage;

5.找到“app.addEventListener（"activated",function（args）”将以下语句添加到”if（app.sessionState.history）”的前面

JavaScript

//InitializeWindowsStoreProxy.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。

6.打开license.xml，花些时间研究它的内容。

元素包含应用本身的信息，以及我们要在练习3中花钱购买的电影IceAge4的信息。

包含应用和产品的许可信息。

在真实环境中，所有信息都来自Windows应用商店。

但在模拟情况下，信息来自WindowsStoreProxy.xml。

任务2–修改“关于”页面

现在修改在实验6中创建的“关于”页面。

现在，在“关于”页面的应用标题下面会出现“试用版”字样。

我们要用存储API判断这个应用是否确实为试用版，并根据结果定制页面的内容。

7.打开about.html。

8.找到包含文本“试用版”的H4元素，给它添加一个id=”info”属性：

HTML

试用版

9.在H4元素后面添加以下BUTTON声明：

HTML

10.打开about.css，添加以下CSS类，设置按钮的样式：

CSS

#purchaseApp{

width:

225px;

height:

120px;

margin-top:

24px;

}

11.打开about.js，在“usestrict”语句后添加以下代码：

JavaScript

varapp=Windows.ApplicationModel.Store.CurrentAppSimulator;

12.在ready函数中添加以下语句：

JavaScript

if（app.licenseInformation.isTrial）{

//Showthepurchasepriceonthepurchasebutton

varbutton=document.querySelector（"#purchaseApp"）;

app.loadListingInformationAsync（）.then（function（listing）{

button.textContent="升级到专业版本"+listing.formattedPrice;

}）;

}

else{

//Showtheexpirationdateandhidethepurchasebutton

document.querySelector（"#info"）.textContent="有效期至"+app.licenseInformation.expirationDate.toLocaleDateString（）;

document.querySelector（"#purchaseApp"）.style.visibility="hidden";

}

13.花些时间研究刚刚添加的代码。

它使用CurrentAppSimulator.licenseInformation.isTrial判断应用是否在试用版下运行，它调用CurrentAppSimulator.loadListingInformationAsync获取价格信息，以便在购买按钮上显示。

返回的ListingInformation对象还包含应用的其他信息。

详细情况请参阅SDK文档中的Windows.ApplicationModel.Store.ListingInformation。

任务3–测试结果

现在测试这些修改，看看CurrentAppSimulator和WindowsStoreProxy.xml的效果。

14.按F5启动应用程序。

15.显示超级按钮栏，点击“设置”按钮。

16.在“设置”菜单中，点击“关于”，显示“关于”页面。

17.

确认在“关于”页面上出现了购买按钮，购买价格是$12.99，如图1所示。

图1

应用试用版本中的“about”页面

18.返回VisualStudio并停止调试。

19.打开license.xml，将区中元素中的购买价格从$12.99改为$8.99。

20.再次启动应用，打开“关于”页面。

看看现在购买按钮上显示的购买价格是什么？

21.返回VisualStudio并停止调试。

22.打开license.xml，将价格改回$12.99。

并将从true修改为false。

23.启动应用程序，打开“关于”页面。

确认购买按钮已经消失，现在看到的是“有效期至

2022年12月12日”消息，如图2所示。

图2

应用付费版本的“about”页面

24.返回VisualStudio并停止调试。

25.在准备下一个练习时，在license.xml中将从false修改为true。

练习2：

模拟应用购买

您可以使用WindowsStoreProxy.xml测试对用户界面的修改，根据应用是否为试用版来改变用户界面，但这代替不了模拟实际的购买行为。

在这个练习中，要为购买按钮写一个事件处理程序，这样就可以在Windows应用商店中购买这个应用了。

任务1–在about.js中添加购买代码

要模拟应用的购买行为，我们要在用户在关于页面上点击购买按钮时调用CurrentAppSimulator.requestAppPurchaseAsync。

为了检测购买行为的成功安排，我们要处理licensechanged事件。

注意：

requestPurchaseAppAsync方法提交一个从Windows应用商店购买应用的异步请求。

要确定用户何时（是否）成功购买了应用，需要侦听licensechanged事件。

在这个事件触发的时候，就可以检查CurrentAppSimulator.licenseInformation.isTrial的状态，确认购买是否成功。

26.打开about.js。

27.在“if（app.licenseInformation.isTrial）”子句末尾，在else语句之前，添加以下语句：

JavaScript

//Handleclicksofthepurchasebutton

button.onclick=function（）

{

app.requestAppPurchaseAsync（false）.done（function（）

{

newWindows.UI.Popups.MessageDialog（"谢谢，你已经成功购买MovieDang应用！

"）.showAsync（）;

}）;

}

任务2–购买应用

很简单，对吗？

现在模拟应用的购买行为。

请注意，CurrentAppSimulator在内存中存储购买和许可状态修改有关的信息，不将这些信息存储在WindowsStoreProxy.xml中。

所以在购买应用之后，只要应用还在运行，就会保持“purchased（已付费）”状态，而一旦重新启动，就又恢复到试用版状态。

28.按F5启用应用。

29.打开“About”页面，点击购买按钮，模拟应用购买行为。

30.在Windows应用商店对话框中，点击“Continue”按钮，完成模拟的购买行为。

31.确认出现了如图3所示的消息，确定购买成功。

图3

确认购买成功的消息

32.再次显示“About”页面，确认购买按钮已经消失。

注意：

在购买MovieDang之后，它并没有为用户提供额外的功能；它只是用许可信息代替了购买按钮。

在现实应用中，可以选择在在试用版中限制用户的功能，只有在购买之后才提供完整功能。

33.返回VisualStudio并停止调试。

练习3：

模拟产品购买

除了购买应用之外，Windows应用商店还支持应用内嵌的产品购买。

例如，在一个游戏程序中，可以在用户完成前面的关卡之后，购买更多关卡。

用Windows应用商店的说法，这样购买的功能称为产品，Windows运行时提供了购买产品的API，还提供了判断产品是否已经购买、判断产品状态等等的API。

在这个练习中，您将修改MovieDang。

这里要根据CurrentAppSimulator增加一个购买电影的简单用户界面，添加业务逻辑。

任务1–修改项目详细信息页面

第一步是在项目详细信息页面中添加一个购买按钮。

在页面加载电影详细信息的时候，如果该电影尚未付费，则显示“观看预告片”和“在线购买”按钮，如果已经付费，则显示“在线观看”按钮。

在这里，我们要在购买按钮中添加一些代码，以实现应用内嵌产品购买。

34.打开itemDetail.html，在class属性为“buttoncontent”的Div中添加高亮部分的代码：

观看预告片

在线购买