Windows10 开发秘籍(四)
十六、附加工具
Windows SDK 和 Microsoft Visual Studio 2015 提供了额外的工具和功能,让开发人员可以轻松调试和测试他们的 Windows 应用。本章涵盖了其中的一些工具,如 JavaScript 控制台窗口、DOM Explorer、诊断工具、Windows 10 移动仿真器附加工具。当在各种场景中测试应用时,这些工具使开发人员的工作变得更加容易。
16.1 JavaScript 控制台窗口
问题
在调试通用 Windows 平台应用时,您希望查看 JavaScript 错误或编写调试消息。
解决办法
在调试通用 Windows 平台应用时,使用 Visual Studio 2015 中的 JavaScript 控制台窗口查看 JavaScript 错误或编写调试消息。
它是如何工作的
Microsoft Visual Studio 2015 提供了一个名为 JavaScript 控制台窗口的工具,允许开发人员执行以下操作:
- 显示和修改变量值。
- 运行可以在当前上下文中执行的 JavaScript 代码。
- 查看 JavaScript 错误、异常和消息。
- 将应用中的消息显示到控制台窗口。
当应用运行时,会显示 JavaScript 控制台窗口。或者,您可以从 Visual Studio 菜单调试➤ Windows ➤ JavaScript 控制台打开 JavaScript 控制台窗口,如图 16-1 所示。
图 16-1。
Access JavaScript Console from Visual Studio 2015
要测试此功能,请使用 JavaScript 模板从 Visual Studio 2015 创建一个新的通用 Windows 平台应用。
使用本地计算机选项生成解决方案并运行它。您应该会看到应用在桌面上运行。在应用仍在运行的情况下切换到 Visual Studio。注意 JavaScript 控制台列出了页面中所有可能的 JavaScript 错误,如图 16-2 所示。
图 16-2。
JavaScript Console window displaying list of warnings and errors
JavaScript 控制台提供了以下选项:
- 查看错误消息
- 查看警告消息
- 查看消息
- 清除控制台的选项
开发人员还可以编写调试消息,当应用在 Visual Studio 2015 的调试模式下运行时,可以显示这些消息。这是通过使用console.log方法实现的。
让我们从项目的js文件夹中打开 default.js 文件,并将下面的代码添加到文件的第一行,就在 use strict 选项的下面。
console.log("This is a custom log message");
当您运行应用并查看 JavaScript 控制台窗口时,您会看到其中的消息,如图 16-3 所示。
图 16-3。
JavaScript Console window displaying the log message
表 16-1 列出了一些在控制台窗口中操作消息的常用命令。
表 16-1。
JavaScript Console Window Commands
| 命令名称 | 描述 | | --- | --- | | `assert(expression, message)` | 如果表达式计算结果为 false,则发送消息。 | | `clear()` | 清除控制台窗口中的消息。 | | `debug(message)` | 向控制台窗口发送消息;它与 console.log 相同 | | `error(message)` | 向控制台窗口发送错误消息。消息文本为红色,包含一个错误符号。 | | `info(message)` | 向控制台窗口发送消息;该消息以信息符号开头。 | | `log(message)` | 向控制台窗口发送消息。 |16.2 DOM Explorer
问题
您需要检查应用的 HTML 元素的属性,以及调试和修改 HTML 和 CSS 样式的元素属性。
解决办法
使用 Visual Studio 2015 中的 DOM Explorer 检查和修改 HTML 和 CSS 元素的值,以便进行调试。
它是如何工作的
Web 开发人员和 Internet Explorer 用户应该知道 DOM Explorer,它是一种流行的调试工具。Microsoft Edge 和 Internet Explorer 中的 F12 开发人员工具提供了此选项。
由于 UWP 应用支持使用 web 技术进行开发,所以 UWP 应用和使用 Visual Studio tools for Apache Cordova 创建的应用也支持 DOM Explorer。
开发者可以在 Windows 中使用 Visual Studio 菜单 Debug ➤ Windows ➤ DOM Explorer 访问 DOM Explorer,如图 16-4 所示。
图 16-4。
Access DOM Explorer from Visual Studio 2015
您可以在 Visual Studio 中使用 DOM Explorer 执行下列操作:
- 检查现场直播
- 选择元素
- 调试 CSS 样式
- 调试布局
- 查看 DOM 事件侦听器
- 调试 WebView 控件
打开用 JavaScript 开发的现有 UWP 应用,并在本地机器选项中运行它。
切换到 Visual Studio 并选择 DOM Explorer 选项卡。您可以在应用运行时使用 F12 快捷键,在 F12 开发者工具中显示 DOM Explorer,如图 16-5 所示。
图 16-5。
DOM Explorer
在 DOM Explorer 窗口中,选择 body 标签下的段落元素。双击文本以修改消息。你应该也能在你的 UWP 应用上看到文本更新。
DOM Explorer 中的 Styles 选项卡允许开发人员修改样式元素的值,并查看它在应用页面上的呈现方式。
计算选项卡显示所选 DOM 元素的每个属性的最终值(见图 16-6 )。
图 16-6。
Computed tab in DOM Explorer
布局选项卡显示元素的盒子模型,并显示应用的布局,考虑偏移和边距(见图 16-7 )。
图 16-7。
Layout tab in DOM Explorer
你也可以在调试的时候刷新你的应用。为此,请按照下列步骤操作。
图 16-8。
Refresh Windows app button in Visual Studio When the app is running in an emulator, open the default.html file in Visual Studio and modify the source code. Click the Refresh Windows app button in the Debug toolbar or hit the F4 shortcut key (see Figure 16-8).
应用页面会重新加载模拟器上看到的新更改。
16.3 诊断工具
问题
您希望分析 Windows 应用的性能,以确定潜在的瓶颈。您想要分析 CPU 使用率、UI 响应性等等。
解决办法
使用 Visual Studio 2015 中的诊断工具来执行和分析各种因素,如 CPU 使用率、GPU 使用率、HTML UI 响应性、JavaScript 内存和网络。
它是如何工作的
Visual Studio 探查器或诊断工具可以帮助您找到 Windows 应用中的性能瓶颈。它们向您展示了应用中的代码大部分时间花在哪里。
您可以通过导航到调试菜单并选择启动诊断工具而不调试来启动 Visual Studio 2015 诊断工具,如图 16-9 所示。
图 16-9。
Launching Diagnostic Tools in Visual Studio 2015
Visual Studio 诊断工具(参见图 16-10 )为开发人员提供了以下选项来测试他们的应用:
图 16-10。
Diagnostic Tools with the different options
- CPU 使用情况
- GPU 使用情况
- HTML 用户界面响应
- JavaScript 内存
- 网络
默认情况下,目标是当前项目。这可以通过单击更改目标按钮并从提供的列表中选择选项来更改为正在运行的应用或已安装的应用等。
您可以在“诊断”对话框的“可用工具”部分选择要评测的工具。
选择工具后,单击开始按钮。这会启动应用,Visual Studio 会自动启动诊断工具并收集数据进行分析。
工具完成数据采集后,显示结果,如图 16-11 所示。
图 16-11。
Results of the Diagnostic Tools in Visual Studio 2015
了解应用如何使用 CPU 是分析和识别应用中性能问题的良好起点。CPU 使用率工具显示 CPU 在何处花费时间执行 JavaScript 代码的信息。
在分析 CPU 使用率报告时,开发人员可以检查 CPU 使用率时间线图表,并选择时间线段来查看详细信息。CPU 利用率时间线图显示了设备所有处理器内核中应用的 CPU 活动。
UI 响应工具可以帮助开发人员识别以下问题:
- UI 响应能力。如果 UI 线程被阻塞,应用可能会响应缓慢。出现这种情况的可能原因包括过多的同步 JavaScript 代码、同步 XHR 请求,甚至是处理器密集型 JavaScript 代码。
- 资源导致的加载时间慢。
GPU 使用工具检查 DirectX 应用中的 GPU 使用情况。它让开发人员可以确定是 CPU 还是 GPU 导致了性能瓶颈。
JavaScript 内存工具调查 JavaScript 堆,以发现诸如内存泄漏等问题。
网络工具允许开发人员检查影响您的 Windows 应用的各种网络操作的信息,包括 HTTP 请求和响应头、有效负载、cookies 等。
16.4 Windows 10 移动模拟器:附加工具
问题
您希望在没有实际设备的情况下,通过模拟与 Windows 10 移动设备的真实交互来测试应用的功能。这些现实世界的交互包括测试位置感知功能、加速度计等等。
解决办法
使用 Windows 10 移动模拟器,它是通用 Windows 平台工具的一部分。它包括额外的工具,让开发人员测试现实世界与设备的互动。
它是如何工作的
附加工具是 Windows 10 移动模拟器的一部分。让我们打开在前面的配方中创建的应用,并通过选择一个 Windows Mobile 模拟器而不是本地机器来运行项目。这将在 Windows 10 移动模拟器中启动您的应用。要在仿真器中打开其他工具,请单击工具按钮(> >)如图 16-12 所示。
图 16-12。
Windows 10 Mobile emulator with Additional Tools feature
这将打开“附加工具”窗口,开发人员可以在其中访问定位、网络和加速度计等工具,以便在仿真器上进行测试(参见图 16-13 )。
图 16-13。
Additional Tools window in emulator
模拟鼠标输入
您可以单击模拟器工具栏上的鼠标输入按钮来启用鼠标输入。这确保了模拟器中的任何鼠标点击都将作为鼠标事件发送到模拟器的操作系统。如果您的应用与可以用作输入的鼠标配对,这是一个非常有用的功能。
近场通信(NFC)
如果你的应用使用近场通信(NFC),NFC 标签(见图 16-14 )可能是一个有用的工具,可以用来测试你的应用,如近距离、点击共享、卡片仿真等场景。
图 16-14。
NFC tab in Additional Tools
你可以通过使用一对仿真器来模拟两部手机一起敲击来测试你的应用。
NFC 工具支持以下模式:
- 邻近模式
- HCE(主机卡仿真)模式
- 智能卡读卡器模式
测试此功能时,“NFC”选项卡显示以下内容:
- 选择的模式
- 与点击和未点击事件相关的日志
- 通过当前连接发送和接收的所有消息的副本
请注意,当您第一次在 NFC 选项卡中单击点击按钮时,您将收到 Windows 防火墙提示。
您需要从 Visual Studio 启动两个不同分辨率的模拟器来模拟两部电话一起敲击。
选中启用对等设备发现复选框。对等设备下拉框显示 Microsoft 模拟器和运行模拟器驱动程序的 Windows 机器。
当两个模拟器都在运行时,请按照下列步骤操作:
Select the target emulator. Select the Send to peer device option. Click the Tap button, which simulates the two devices tapping together. Click the Untap button to disconnect the devices. To simulate reading messages from a device, follow these steps: Select the Send to self radio option to test scenarios that require only one NFC-enabled device. Click the Tap button to simulate tapping a device to a tag. You should hear the notification sound. Click the Untap button to disconnect.
多点触摸输入
您可以使用 Windows 10 模拟器工具栏上的多点触摸输入按钮来模拟多点触摸输入,以进行挤压、缩放和旋转。
要模拟多点触控功能,请按照以下步骤操作:
Click the Multi-touch Input button on the emulator toolbar to enable this feature. Two points appear on the emulator screen. Right-click and drag one of the touch points to position it. Left-click and drag the other touch point to simulate pinching, zooming, and rotating, and so forth. You can click the Single Point Input button on the emulator toolbar to restore the normal input.
加速计
加速度计工具允许开发人员测试跟踪手机移动的 Windows 应用(见图 16-15 )。它模拟模拟器中的行为。
图 16-15。
Accelerometer tool in Additional Tools
加速度计传感器可以用实时输入或预先录制的输入进行测试。它可以用记录的数据模拟手机的震动。
Select the desired orientation from the orientation drop-down list. In the middle of the accelerometer, you see a colored dot. Drag it to simulate the movement of the device in a 3D plane.
位置
您可以使用位置选项卡测试使用导航和地理围栏的应用。
您可以模拟以不同的速度和精确度从一个位置移动到另一个位置。定位工具(见图 16-16 )目前支持三种模式:
图 16-16。
Location tab in Additional Tools
- 图钉模式:在地图上放置图钉。然后,您可以单击 Play all points,模拟器以指定的时间间隔按顺序将每个引脚的位置发送到模拟器。
- 实时模式:当您在地图上放置图钉时,模拟器会在您放置图钉时将图钉的位置发送给模拟器。
- 路线模式:在地图上放置图钉来指示路点。模拟器计算路线。
用户还可以在位置选项卡中执行以下操作:
- 使用搜索框搜索位置。
- 放大和缩小地图。
- 将当前的一组图钉点保存到 XML 文件中,以便以后重新加载。
- 明确所有要点。
- 保存布线,并在下次处于“固定”和“布线”模式时加载它。
网络
“网络”标签允许开发者在不同的网络速度和信号强度下测试应用。
你可以在 2G、3G 和 4G 等各种网络速度下,以及在良好、一般和较差等不同信号强度下测试你的应用。
当您的应用调用 web 服务或传输数据时,此功能尤其有用。
十七、侧装和 Windows 应用认证套件
开发应用后,在将应用上传到商店之前,在各种机器上部署和测试应用是非常重要的。本章介绍了一些关于如何从命令提示符生成应用包的方法,并将您的应用加载到计算机上,然后使用 Windows 应用认证工具包来测试应用是否足以发布到 Windows 应用商店。第十八章包括一个从 Visual Studio 交互生成应用包的方法,因此,这不在本章讨论。
17.1 侧装你的应用
问题
您需要在 Windows 设备上下载您的应用,而无需提交到 Windows 应用商店,以便测试人员可以使用您创建的应用包文件安装和测试它。
解决办法
使用 PowerShell 运行Add-AppDevPackage文件(它是在生成包文件时创建的),以便将您的应用下载到 Windows 设备上。
它是如何工作的
你的应用的用户不能像安装传统桌面应用那样简单地安装通用 Windows 应用。
通用 Windows 应用只能从商店下载,然后安装在设备上。如果您不想去商店就想安装某个应用,您可以将该应用下载到设备上,以便用户可以安装和测试它。
您可以按照以下步骤将应用包下载到 Windows 10 设备。
Enable your device for sideloading. Install your app using PowerShell.
侧面加载应用的第一步是确保在您的设备上启用侧面加载。您可以通过启动设置应用并访问更新与安全在您的 Windows 计算机上启用它。选择“开发人员”按钮,该按钮显示使用开发人员功能的各种选项。选择开发者模式以启用设备的侧面装载(参见图 17-1 )。
图 17-1。
Enable Sideload apps and Developer mode in Windows 10
一旦你选择了开发者模式,就会显示一个确认对话框(见图 17-2 )来确认你想要打开应用侧装。Sideload apps 选项允许您安装一个.appx文件和证书,该文件和证书是使用随软件包一起创建的 PowerShell 脚本运行应用所需的。此选项比开发人员模式更安全,因为您无法安装不受信任的应用。但是对于这个配方,让我们选择开发者模式并继续。
图 17-2。
Confirmation dialog for enabling sideloading
下一步是在机器上安装应用。要做到这一点,请遵循以下步骤。
Generate the package file for installation. This is covered in Chapter 18. Copy the complete folder of the package file that you want to install onto the target machine. For example, if you have created the app bundle, the folder name will contain the version number and _test. If the version number is 1.0.0.0 and the project name is Recipe17.1, targeting AnyCPU, the folder would be Recipe17.1_1.0.0.0_AnyCPU_Debug_Test. On the target machine that you want to sideload the app, open the folder. Right-click the Add-AppDevPackage.ps1 file and click the Run with PowerShell button on the context menu, as shown in Figure 17-3.
图 17-3。
The Run with PowerShell menu in Windows Explorer Follow the information shown in the PowerShell command. When the package is successfully installed, you will notice the Your app was successfully installed message in the command prompt, as shown in Figure 17-4.
图 17-4。
App installation message in PowerShell command
现在,单击 Windows 中的开始按钮。找到应用并启动它。
17.2 分别安装证书和软件包
问题
您需要在 Windows 中分别安装软件包和证书。
解决办法
使用 PowerShell 运行Add-AppDevPackage文件(它是在生成包文件时创建的),以便将您的应用下载到 Windows 设备上。
它是如何工作的
Recipe 17.1 演示了使用 PowerShell 安装一个应用和证书。有些情况下,您可能希望分别安装证书和软件包文件。您可以先安装证书,然后使用Add-AppDevPackage PowerShell 命令。
如果要在 Windows 桌面上单独安装证书和软件包文件,需要执行以下步骤。
Open the folder where the app package was created. Ideally, this folder contains the following:
- Add-AppDevPackage.resources 文件夹
- add-appdevpackage . resources PowerShell 脚本文件
- 项目名称 _ 版本 _ 平台. appx 文件
- project name _ Version _ platform . cer 安全或证书文件
Double-click the certificate file (.cer) and then click the Install Certificate button on the Certificate screen (see Figure 17-5).
图 17-5。
Install Certificate screen On the Certificate Import Wizard screen, select the Local Machine option under the Store Location group, as shown in Figure 17-6. Click Next.
图 17-6。
Select store location from the Certificate Import Wizard In the UAC dialog, click the OK button to continue. In the next certificate import screen, select the Place all certificates in the following store radio button and click the Browse button (see Figure 17-7).
图 17-7。
Select the certificate store to place the certificate In the Select Certificate Store pop-up screen, select Trusted people and click the OK button (see Figure 17-8).
图 17-8。
Select Certificate Store screen Click Next in the Certificate Import Wizard and then complete the certificate by clicking Finish (see Figure 17-9).
图 17-9。
Completion of the certificate import process This installs the certificate to the Windows certificate store on the local machine. The next step is to install the app alone using the add-appxpackage cmdlet for PowerShell, as explained in the following steps. Navigate to the AppPackages folder and identify the complete path of the package file (.appx) file that you want to install. As shown in Figure 17-10, open Windows PowerShell from the Start menu and run the Add-appxpackage command by specifying the following parameters. Add-appxpackage –Path <Path to appx file>
图 17-10。
Add-appxpackage command in PowerShell to install the app Once you enter the command, press the Enter key. This installs the app on your Windows 10 machine.
现在,您可以从“开始”菜单启动应用。
17.3 使用 Windows 应用认证套件验证您的 Windows 应用
问题
您希望通过交互式使用 Windows 应用认证工具包来验证您的通用 Windows 平台应用。
解决办法
从 Windows“开始”菜单启动 Windows 应用认证工具包,并指定要验证和测试的应用。
它是如何工作的
在将应用提交给商店进行认证之前,最好在本地对其进行验证和测试。这为开发人员提供了更多的信息,以防软件包出现任何问题。
Windows 应用认证工具包是一个非常棒的工具,可以帮助开发人员在本地验证和测试您的应用。Windows 应用认证套件包含在 Windows 10 的 Windows 软件开发套件(SDK)中。
以下步骤使用 Windows 应用认证工具包验证和测试 Windows 应用。
From the Windows Start menu, search for Windows app cert kit and then click the Windows App Cert Kit desktop app (see Figure 17-11).
图 17-11。
Windows App Certification Kit in the Start menu In the Windows App Certification Kit, select the validation category that you want to perform. For example, if you are validating a Windows app, select Validate Store App (see Figure 17-12).
图 17-12。
Selection of the type of app to perform validation Once you select the Store App option, you are provided with options to either select an app that is already installed on the machine or choose the package file that you want to validate. You can enable the Browse for app you want to validate radio button and click the Browse button to select the package file (see Figure 17-13).
图 17-13。
Selection of the app to validate and test Once you have selected the app or the package file, click Next to continue. The subsequent screens display the tests workflows that are applicable for the app that you are testing (see Figure 17-14). If a test is not applicable to your app type, it is grayed out.
图 17-14。
Types of tests applicable for the app Click Next. The Windows App Certification Kit begins validating the app, as shown in Figure 17-15.
图 17-15。
Windows App Certification Kit validating the app Once the validation is complete, you are prompted to save the report in the XML file format, which displays the results, as shown in Figure 17-16. The Windows App Certification Kit creates an HTML file along with an XML report and saves them in a specified folder.
图 17-16。
Test results from the Windows App Certification Kit
17.4 在远程 Windows 10 设备上验证应用包
问题
你需要在远程 Windows 10 机器上验证你的应用包,并测试它。
解决办法
在远程计算机上安装 Visual Studio 远程工具和 Windows 应用认证工具包,并使用远程计算机选项在远程计算机上验证包。
它是如何工作的
当从 Visual Studio 生成包文件时,您还可以选择在远程计算机上验证它。
要在远程计算机上验证包,请按照下列步骤操作。
Enable your Windows 10 remote device for development by enabling Developer mode in the Use developer features in the Settings app, as shown in Figure 17-17. Note that the validation on the remote ARM device for Windows 10 is currently not supported.
图 17-17。
Enabling Developer mode in the Settings app Download and install the remote tools for Visual Studio on the remote machine. Go to http://www.microsoft.com/en-us/download/details.aspx?id=48155&NavToggle=True . The remote tools for Visual Studio are used to run the Windows App Certification Kit. Download the Windows App Certification Kit from https://dev.windows.com/en-us/develop/app-certification-kit and install it on your remote machine. Now, start creating a package from your Windows app. In the Package Creation Completed wizard, select the Remote machine option and click the ellipsis button (see Figure 17-18).
图 17-18。
Package creation and the Remote Machine option Enter your subnet/Domain Name Server (DNS)/IP address. Select the appropriate mode in Authentication Mode menu of Windows credentials (see Figure 17-19).
图 17-19。
Remote Connection screen Click the Select button and then the Launch Windows App Certification Kit button. If the remote tools are running on the remote machine, you are connected and the validation tests should begin.
十八、商店和货币化
到目前为止,您应该已经完成了针对 Windows 10 操作系统的通用 Windows 平台应用的开发。您需要构建您的应用,并将其上传到 Windows 应用商店,用户可以在那里搜索和下载应用。在本章中,您将了解在 Windows 应用商店中获得您的应用所需的东西,以及如何利用应用内广告赚钱。
18.1 创建一个 Windows 应用开发者帐户
问题
您需要构建您的应用并将其上传到 Windows 应用商店。但要做到这一点,您需要首先使用您的开发人员帐户登录 Windows 开发人员中心。在开始上传阶段之前,您需要知道如何创建开发人员帐户。
解决办法
在线创建一个开发者帐户。有两种方法可以开始这个过程。
- 直接去
http://dev.windows.com。 - 通过 Visual Studio 访问帐户注册。
通过 Windows 开发中心注册访问帐户
Windows 开发中心是 Windows 应用开发的一站式门户。该门户提供了您开始 Windows 10 应用开发所需的工具。有代码示例、如何开发 Windows 10 应用的教程,当然还有提交应用的条款。可以在 http://dev.windows.com 访问 Windows 开发中心。当您导航到此页面时,您会看到一个获取开发人员帐户链接。点按它并按照屏幕指示完成创建您自己的开发人员帐户。开发者帐户允许您将应用(适用于所有 Windows 设备)提交到 Windows 应用商店。它还允许您管理您的应用,并分析您的应用在商店中的表现。
您可以注册以下类别之一:
- 个人:此帐户类型允许您以个人、学生或非法人团体的身份开发和销售应用。这种账户的费用是 19 美元。
- 公司:这种帐户类型适用于拥有注册商业名称的公司,用于开发和销售应用。这种账户的费用是 99 美元。
您需要提供以下信息才能获得帐户:
- 您的联系信息
- 要显示的发布者名称
- 支付方式(VISA/MasterCard/PayPal)
通过 Visual Studio 注册访问帐户
您也可以通过 Visual Studio 注册为开发人员。
在 Visual Studio 中,从项目菜单中选择 Store ➤ Open Developer Account(参见图 18-1 )。
图 18-1。
Open a developer account from Visual Studio
此操作会打开一个新的浏览器窗口,并将您直接带到帐户注册页面。你必须按照屏幕上的指示来完成帐户注册。
18.2 为 Windows 10 打包一个通用 Windows 平台应用
问题
您已经完成了应用的开发。您已经完成了 Windows 开发人员中心的帐户注册。现在,您想要打包您的应用,以便提交到商店。
解决办法
要销售或分发 Windows 应用,您需要创建一个应用包或 appxupload 包,这是一个技术术语。使用通用 Windows 平台(UWP),您可以生成一个包(.appxupload)。此包已上载到 Windows 应用商店。一旦应用进入商店,就可以在任何 Windows 10 设备上安装和运行,包括手机、平板电脑、个人电脑等。
它是如何工作的
打包 Windows 10 应用需要分两步完成。首先,用某些属性和设置配置包。然后,生成要上传到商店的包。
配置应用包
要创建应用包,您需要首先设置描述您的应用的某些属性和设置。应用属性和设置存储在一个名为应用清单文件的文件中,该文件位于项目的根目录下,名为package.appxmanifest。您在清单中设置的一些属性/设置是用于应用切片的图像或应用支持的方向。
应用清单文件是一个 XML 文件。Visual Studio 提供了一个基于 GUI 的清单设计器/编辑器来编辑该文件。使用 GUI 设计器/编辑器,很容易对应用清单进行更改。
以下步骤提供了如何配置软件包的说明:
图 18-2。
Application package manifest editing In Solution Explorer, expand your application’s project node. Double-click the package.appxmanifest file. Visual Studio will launch the manifest designer/editor (see Figure 18-2).
清单文件有几个选项卡,用于配置应用的不同方面。
-
应用:配置应用的显示名称、起始页、默认语言、描述、支持的方向、锁屏通知模式和磁贴更新信息。
-
Visual Assets: Configures your app’s visual assets, such as tile images and logos, the badge logo, and the splash screen (see Figure 18-3).
图 18-3。
Visual Assets
-
Capabilities: Any capabilities that your app needs has to be declared in this area of the manifest file (see Figure 18-4).
图 18-4。
Capabilities
-
Declarations: Use to add any declarations (for example, protocol or share target) for your app and sets their properties (see Figure 18-5).
图 18-5。
Declarations
-
Content URIs: Specifies which pages in the app can be navigated to by a frame, and URIs that can be navigated to when loaded in a web view (see Figure 18-6).
图 18-6。
Content URIs
-
Packaging: Sets the package details, such as package name (note: this is not the application name, rather just the package name), package display name, version details, publisher, publisher display name, and package family name (see Figure 18-7).
图 18-7。
Packaging
创建应用包
在使用清单文件配置应用包之后,接下来要做的事情是生成或创建包。该包是一个 appxupload 文件。Visual Studio 提供了创建应用包向导,您接下来将使用该向导。按照以下步骤创建包:
In Solution Explorer, open the solution of your Universal Windows app project. With the project opened in the Solution Explorer, right-click your project. Choose Store ➤ Create App Packages from the context menu (see Figure 18-8).
图 18-8。
Create App Packages The wizard will be invoked. In the Create Your Packages dialog, select Yes to build packages and upload to the Windows Store (see Figure 18-9).
图 18-9。
Create App Package wizard If you chose No, Visual Studio would not create the required .appxupload file required for Store submission. This option should be used when you only want to sideload your app to run it on an internal device. Next, you need to sign in to your Windows Dev Center account (see Figure 18-10).
图 18-10。
Create App Package Dev Center Sign in Next, you need to select a name for your package, or you can reserve a name for your package from the wizard. The name you select needs to be unique to the Windows Store (see Figure 18-11).
图 18-11。
Selecting app name Next, you need to select and configure the package information: the output location where the package will be saved, and the version and the architecture configuration for the build. Make sure to select all three architecture options (see Figure 18-12).
图 18-12。
Configuring package details Click Create to generate the appxupload package, which is generated at the selected output location. You can then submit the appxupload package to the Store. Next, you see Package Creation Completed dialog (see Figure 18-13).
图 18-13。
Creation Completion dialog It is important that you validate your app before submitting it to store for certification. Validation can be done by using the Windows App Certification Kit (WACK) that is installed as part of the SDK on your machine. Validation can be done on your local machine or on a remote machine. To validate locally, select the Local machine radio button in the Package Creation Completed dialog. Click the Launch Windows App Certification Kit button. The Windows App Certification Kit performs tests and shows you the results. If your app has passed the tests, you are ready to submit your app to the Store.
18.3 向 Windows 应用商店提交应用
问题
您已经完成了包的创建。已为您的应用生成了一个 appxupload 包。您现在需要将应用提交到商店进行认证。
解决办法
为您的应用创建 appxupload 包后,下一步是将其提交到商店进行认证。认证后,您的应用会列在 Windows 应用商店中,以便用户可以搜索和下载安装。您可以使用 Windows 开发人员中心仪表板将应用包提交到 Windows 应用商店。下面概述了提交的过程。
Log in to the Windows Dev Center using your dev center account credentials. Head over to http://dev.windows.com and sign in. Click the Dashboard link. On the dashboard page, you see the My Apps section on the left-hand side of the page. Under this section, the app name you reserved during package creation is listed with an In progress status. Click the app name (see Figure 18-14).
图 18-14。
Apps listing in Windows Dev Center dashboard Next, you are presented with the App Overview page. Here you need to click the Start your submission button in the Submissions section. Next, you are presented with the submission screen. Here you need to provide information related to pricing, the application properties, the application package, which countries you want your app to be available in, and any other instructions for certification team. Pricing and availability: Here you provide the pricing for your app or decide to list it as free. You also have option to choose the countries in which you want to list your app. App Properties: Here you provide information such as the category and subcategories to which your app belongs in, as well as the age rating, any hardware preferences, and app declarations. Packages: Here you submit the appxupload package that was generated by Visual Studio. Once you have followed all the steps in the submission process, you can click the Submit to the Store button. Your package will then undergo a workflow. Your app is signed with a certificate, and then the certification team performs certification tests. Once certified by the certification team, your app is published to the Windows Store.
18.4 在您的 UWP 应用中使用 Windows 广告中介
问题
你已经开发了你的 Windows 10 应用,并且你正在考虑通过运行广告来赚钱。你想与多个广告提供商签约,以便在你的应用中显示他们的广告。你的应用需要一个广告中介控件。
解决办法
应用内广告是你从应用中赚钱的方式之一。你可以订阅广告提供商,并在你的应用中运行他们的广告。你的应用中显示的广告的印象会得到报酬。不同的提供商有不同的与广告印象相关的经济学。但是要显示广告,你需要先安装 Windows Ad Mediator,这个控件可以帮助你显示来自多个提供商的广告。让我们学习如何从 Visual Studio 安装一个 Ad Mediator 控件。
Open your project in Solution Explorer. Expand your project if it is not expanded already. From the menu bar, select Tools➤ Extensions and Updates (see Figure 18-15).
图 18-15。
Extension and Updates dialog Select Online from the left tree. Type Windows Ad Mediation in the dialog search bar (see Figure 18-16).
图 18-16。
Windows ad mediation Click Download on the Windows ad mediation package shown in the search results. This launches a browser and downloads the executable. After it downloads, install the MSI and follow the onscreen instructions. Restart Visual Studio once installation has finished.
现在,您可以在应用中使用 Windows Ad 中介控件了。
18.5 在应用中显示广告
问题
您已经安装了 Windows Ad Mediation SDK,现在您希望开始在您的应用中显示广告。你想在你的应用页面上放广告。
解决办法
为了在应用页面中显示广告,您需要添加对 Windows 广告 SDK 的引用,该 SDK 是作为 Windows 广告中介安装的一部分安装的。一旦将引用添加到 Windows Ad SDK 中,您就可以在任何页面上实例化中介控件,并在其中显示广告。以下步骤解释了如何添加中介控件。
Open your project in Solution Explorer. Expand your project if it is not expanded already. Right-click the References node and select Add Reference from the context menu. In the Reference Manager dialog, select Microsoft Advertising SDK for JavaScript and click OK (see Figure 18-17).
图 18-17。
Reference Manager dialog Open the default.html or any other file where you want to place the ads. In the <head> section, after the project’s JavaScript references of default.css and default.js, add the reference to ad.js. <!-- Microsoft Advertising required references --> <script src="/Microsoft.Advertising.JavaScript/ad.js" ></script> Modify the <body> section in the default.html file (or other HTML files, as appropriate for your project) to include the following: <div id="myAd" style="position: absolute; top: 50px; left: 0px; width: 300px; height: 250px; z-index: 1" data-win-control="MicrosoftNSJS.Advertising.AdControl" data-win-options="{applicationId: 'd25517cb-12d4-4699-8bdc-52040c712cab', adUnitId: '10043121'}"> </div> Compile and run the app to see it with an ad (see Figure 18-18).
图 18-18。
Universal Windows app with ads Note
在前面的代码片段中提供的应用 id 和 ad 单元 id 是 Microsoft 在开发过程中为您提供的测试值。出于测试目的,应用 id 将是相同的,但是有不同的测试广告单元,可以用于测试不同的广告维度。位于 https://msdn.microsoft.com/en-US/library/mt313178(v=msads.30).aspx 的微软文档页面提供了关于测试广告单元 id 的更多信息。
To generate ApplicationID and AdUnitId in your production apps, follow these steps: Start the store submission process in the Windows Dev Center. Make sure that you set the App Category in the App Properties section. Next, select Monetization ➤ Monetize with ads from the options in the section on the left of the page. On the Monetize with ads page, under the Microsoft Advertising ad units section, click Show Options. Enter a name for your ad unit. Select the Ad unit type and the device family where the ad will be shown. Click the Create ad unit button. Now you have created an ad unit. Copy the application id and ad unit id and paste into the ad control in your app. Regenerate the package and use the new package in your submission process.