Windows811Windows应用商店.docx

1、Windows8 11Windows应用商店动手实验Windows应用商店实验版本： 1.0.0最后更新日期： 9/25/2018概述编写Metro应用最有吸引力的理由之一，就是很容易将它们发布到Windows应用商店（Windows Store）。当今世界，有超过5亿台PC运行Windows 7，每台PC都代表着一个升级到Windows 8的潜在可能，整个市场，以及收入的潜力，巨大而分散。根据目前的收入分享计划，最高80% 的销售收入属于应用作者，所以开发人员有足够的动力开发出优秀的应用并贡献给全世界。您可以通过Windows应用商店免费发布应用，也可以通过应用收费而获利。也可以选择提供试用

2、版本，使用Windows.ApplicationModel.Store中的Windows Store API检测试用版本，如果选择，可以在试用版本中向用户提供有限的功能，直到用户购买了应用为止。利用其他API，可以方便地从试用版本升级到付费版本，支持通过应用内嵌购买的方式选购其他产品，支持获取许可信息，以及其他。Windows运行时的CurrentAppSimulator为在受控环境下依赖Windows Store API模拟购买和测试代码提供了一个方便机制。在这个实验中，您将使用Windows Store API对Movie Dang收费。首先将修改“关于”对话框，检测测试版本，如果应用未付

3、费，则显示一个购买按钮。然后使用CurrentAppSimulator，在点击购买按钮时模拟购买，最后模拟应用内嵌购买。目标本实验将向您展示： 检测应用运行的是否是试用版 在应用中模拟购买应用 模拟通过应用内嵌购买方式选购其他产品 获取关于应用和产品的许可信息 系统要求要完成本实验，您的计算机必须安装以下软件： Microsoft Windows 8 正式版 适用于Windows 8的Microsoft Visual Studio 2012 RTM 安装要完成本实验，您需要在计算机上执行以下步骤完成准备工作：1. 安装Microsoft Windows 8 正式版2. 安装适用于Windows

4、 8的Microsoft Visual Studio 2012 RTM 练习本实验包括以下练习：1. 检测试用版2. 模拟应用购买3. 模拟产品购买 本实验预计用时：30 40 分钟练习 1：检测试用版在这个练习中，要使用Windows运行时的应用商店API自定义Movie Dang的关于页面的内容。如果应用已经付费，则显示许可信息。如果还未付费，即还是试用版，则显示购买信息。而且，购买按钮上显示的价格不应该硬编码在应用中，而应该来自从Windows应用获取的清单信息。任务1 添加WindowsStoreProxy.xml我们将使用CurrentAppSimulator类模拟购买、获取许可信息

5、，以及其他功能。为了将模拟做得尽可能真实，我们将为WindowsStoreProxy.xml的文件向CurrentAppSimulator提供价格、到期日期等信息。1. 在Visual Studio 中打开在实验7中完成的Movie Dang项目。如果您没有完成实验 7 或者希望从参考副本开始操作，可以在原始材料中找到该实验的完整版本。2. 如果项目中没有data文件夹，就创建一个。3. 在项目的data文件夹上点击右键，用“Add - Existing Item”命令从原始材料assets文件夹中的data文件夹导入license.xml。我们要用这个文件创建WindowsStoreProx

6、y.xml。4. 打开default.js，在文件顶部其他全局变量声明的下面添加以下语句：JavaScriptvar appmodel = Windows.ApplicationModel;var storage = Windows.Storage;5. 找到“app.addEventListener(activated, function (args)”将以下语句添加到”if(app.sessionState.history)”的前面JavaScript/ Initialize WindowsStoreProxy.xmlappdata.current.localFolder.createFo

7、lderAsync(MicrosoftWindows StoreApiData, Windows.Storage.CreationCollisionOption.openIfExists).then(function (folder) Windows.ApplicationModel.Package.current.installedLocation.getFileAsync(datalicense.xml).then(function (file) folder.createFileAsync(WindowsStoreProxy.xml, Windows.Storage.CreationCo

8、llisionOption.replaceExisting).then(function (newFile) file.copyAndReplaceAsync(newFile); ); ););注意：刚刚添加的代码使用Windows运行时的存储API在指定位置创建WindowsStoreProxy.xml文件，CurrentAppSimulator将在这个位置寻找该文件，并在应用每次启动的时候将license.xml的内容导入该文件。不用代理文件也可以模拟应用付费和产品付费，但如果希望实现更丰富的模拟，即获取价格信息以及其他信息，则必须包含WindowsStoreProxy.xml。6. 打开

9、license.xml，花些时间研究它的内容。元素包含应用本身的信息，以及我们要在练习3中花钱购买的电影IceAge4的信息。包含应用和产品的许可信息。在真实环境中，所有信息都来自Windows应用商店。但在模拟情况下，信息来自WindowsStoreProxy.xml。任务2 修改“关于”页面现在修改在实验6中创建的“关于”页面。现在，在“关于”页面的应用标题下面会出现“试用版”字样。我们要用存储API判断这个应用是否确实为试用版，并根据结果定制页面的内容。7. 打开about.html。8. 找到包含文本“试用版”的H4元素，给它添加一个id=”info”属性：HTML试用版9. 在H4元

10、素后面添加以下BUTTON声明：HTML10. 打开about.css，添加以下CSS类，设置按钮的样式：CSS#purchaseApp width: 225px; height: 120px; margin-top: 24px;11. 打开about.js，在“use strict”语句后添加以下代码：JavaScriptvar app = Windows.ApplicationModel.Store.CurrentAppSimulator;12. 在ready函数中添加以下语句：JavaScriptif (app.licenseInformation.isTrial) / Show the

11、 purchase price on the purchase buttonvar button = document.querySelector(#purchaseApp);app.loadListingInformationAsync().then(function (listing) button.textContent = 升级到专业版本 + listing.formattedPrice; );else / Show the expiration date and hide the purchase buttondocument.querySelector(#info).textCon

12、tent = 有效期至 + app.licenseInformation.expirationDate.toLocaleDateString();document.querySelector(#purchaseApp).style.visibility = hidden;13. 花些时间研究刚刚添加的代码。它使用CurrentAppSimulator.licenseInformation.isTrial判断应用是否在试用版下运行，它调用CurrentAppSimulator.loadListingInformationAsync获取价格信息，以便在购买按钮上显示。返回的ListingInfor

13、mation对象还包含应用的其他信息。详细情况请参阅SDK文档中的Windows.ApplicationModel.Store.ListingInformation。任务3 测试结果现在测试这些修改，看看CurrentAppSimulator和WindowsStoreProxy.xml 的效果。14. 按F5启动应用程序。15. 显示超级按钮栏，点击“设置”按钮。16. 在“设置”菜单中，点击“关于”，显示“关于”页面。17. 确认在“关于”页面上出现了购买按钮，购买价格是$12.99，如图1所示。图1应用试用版本中的“about”页面18. 返回Visual Studio并停止调试。19.

14、打开license.xml，将区中元素中的购买价格从$12.99改为$8.99。20. 再次启动应用，打开“关于”页面。看看现在购买按钮上显示的购买价格是什么？21. 返回Visual Studio并停止调试。22. 打开license.xml，将价格改回$12.99。并将从true修改为false。23. 启动应用程序，打开“关于”页面。确认购买按钮已经消失，现在看到的是“有效期至2022年12月 12日”消息，如图2所示。图2应用付费版本的“about”页面24. 返回Visual Studio并停止调试。25. 在准备下一个练习时，在 license.xml中将从false修改为true

15、。练习 2：模拟应用购买您可以使用WindowsStoreProxy.xml测试对用户界面的修改，根据应用是否为试用版来改变用户界面，但这代替不了模拟实际的购买行为。在这个练习中，要为购买按钮写一个事件处理程序，这样就可以在Windows应用商店中购买这个应用了。任务 1 在about.js中添加购买代码要模拟应用的购买行为，我们要在用户在关于页面上点击购买按钮时调用CurrentAppSimulator.requestAppPurchaseAsync。为了检测购买行为的成功安排，我们要处理licensechanged事件。注意：requestPurchaseAppAsync方法提交一个从Wi

16、ndows应用商店购买应用的异步请求。要确定用户何时（是否）成功购买了应用，需要侦听licensechanged事件。在这个事件触发的时候，就可以检查CurrentAppSimulator.licenseInformation.isTrial的状态，确认购买是否成功。26. 打开about.js。27. 在“if (app.licenseInformation.isTrial)”子句末尾，在else语句之前，添加以下语句：JavaScript / Handle clicks of the purchase buttonbutton.onclick = function () app.reque

17、stAppPurchaseAsync(false).done(function () new Windows.UI.Popups.MessageDialog(谢谢，你已经成功购买Movie Dang应用！).showAsync(); );任务 2 购买应用很简单，对吗？现在模拟应用的购买行为。请注意，CurrentAppSimulator在内存中存储购买和许可状态修改有关的信息，不将这些信息存储在WindowsStoreProxy.xml中。所以在购买应用之后，只要应用还在运行，就会保持“purchased（已付费）”状态，而一旦重新启动，就又恢复到试用版状态。28. 按F5启用应用。29.

18、打开“About”页面，点击购买按钮，模拟应用购买行为。30. 在Windows应用商店对话框中，点击“Continue”按钮，完成模拟的购买行为。31. 确认出现了如图3所示的消息，确定购买成功。图3确认购买成功的消息32. 再次显示“About”页面，确认购买按钮已经消失。注意：在购买Movie Dang之后，它并没有为用户提供额外的功能；它只是用许可信息代替了购买按钮。在现实应用中，可以选择在在试用版中限制用户的功能，只有在购买之后才提供完整功能。33. 返回Visual Studio并停止调试。练习 3：模拟产品购买除了购买应用之外，Windows应用商店还支持应用内嵌的产品购买。例如

19、，在一个游戏程序中，可以在用户完成前面的关卡之后，购买更多关卡。用Windows应用商店的说法，这样购买的功能称为产品，Windows运行时提供了购买产品的API，还提供了判断产品是否已经购买、判断产品状态等等的API。在这个练习中，您将修改Movie Dang。这里要根据CurrentAppSimulator增加一个购买电影的简单用户界面，添加业务逻辑。任务1 修改项目详细信息页面第一步是在项目详细信息页面中添加一个购买按钮。在页面加载电影详细信息的时候，如果该电影尚未付费，则显示“观看预告片”和“在线购买”按钮，如果已经付费，则显示“在线观看”按钮。在这里，我们要在购买按钮中添加一些代码，

20、以实现应用内嵌产品购买。34. 打开itemDetail.html，在class属性为“buttoncontent”的Div中添加高亮部分的代码： 观看预告片 在线购买35. 打开itemDetail.css，添加以下语句，给刚添加的按钮添加样式（添加到“media screen and (-ms-view-state: snapped)”语句的上面）：CSS .buttoncontent .purchase-button margin-left: 30px; 36. 打开itemDetail.js， 将以下代码添加到“use strict”语句下面JavaScriptvar currentA

21、pp = Windows.ApplicationModel.Store.CurrentAppSimulator;var popup = Windows.UI.Popups;37. 找到语句“ui.Pages.define”，在该语句上面添加以下函数JavaScriptfunction buyMovie(item) var licenseInformation = currentApp.licenseInformation; if (!isMovieActive(item) currentApp.requestProductPurchaseAsync(item.id, true).done( f

22、unction () new Windows.UI.Popups.MessageDialog(你已经成功购买电影: + item.title,Movie Dang).showAsync(); document.querySelector(#watch).textContent = 在线观看; document.querySelector(#purchase).style.display = none; , function () ); function isMovieActive(item) var licenseInformation = currentApp.licenseInformat

23、ion; return licenseInformation.productLicenses.hasKey(item.id) & licenseInformation.productLicenses.lookup(item.id).isActive; function confirmBuy(item) var dialog = null; currentApp.loadListingInformationAsync().done(function (listing) var product = null; if (listing.productListings.hasKey(item.id)

24、product = listing.productListings.lookup(item.id); var price = product ? product.formattedPrice : 9.99$; dialog = new popup.MessageDialog(你是否想要购买该电影：n名称： + item.title + n价格： + price, 应用商店); mands.append(new popup.UICommand(是, function () buyMovie(item); ); mands.append(new popup.UICommand(否); dialog

25、.defaultCommandIndex = 0; dialog.cancelCommandIndex = 1; dialog.showAsync(); ); 38. 然后再ready函数的最后加上下面的代码JavaScriptif (isMovieActive(item) element.querySelector(#watch).textContent = 在线观看; element.querySelector(#purchase).style.display = none; element.querySelector(#purchase).addEventListener(click,

26、function () confirmBuy(item); );任务2 购买产品现在要做的，就是测试修改，查看产品购买的效果。39. 按F5启动应用程序。40. 点击任意电影详情页面。41. 确认在在线购买按钮，如图4所示。图4产品购买用户界面42. 点击购买按钮启动产品购买，将弹出确认对话框。图5产品购买用户界面43. 点击“是”，则激活购买引导对话框图6产品购买用户界面44. 点击继续后即可完成购买操作图7产品购买用户界面45. 完成购买后的页面如下，你就在线观看了图8产品购买用户界面46. 返回Visual Studio并停止调试。小结这个试验中所做的练习演示了Windows应用商店API一些最重要的方面：如何检测试用版本，如何模拟应用购买，如何模拟应用内嵌产品购买，以及如何获取产品的信息。当然，在实际的应用中，需要用CurrentApp 调用代替CurrentAppSimulator的调用。至此，你已经拥有了利用应用赚钱所需要的全部工具了。赶快去淘金吧！