快速入门:为自动播放设备注册应用 (HTML)
[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]
可以将应用注册为“自动播放”设备事件的选项。“自动播放”****设备事件会在设备连接到电脑时引发。
下面显示了如何将应用标识为在将相机连接到电脑时的“自动播放”选项。此应用会注册为 WPD\ImageSource“自动播放”事件的处理程序。当相机和其他图像设备通知事件它们为使用 MTP 的 ImageSource 时,此为 Windows 便携设备 (WPD) 系统引发的常见事件。有关详细信息,请参阅 Windows 便携设备。
如果你是设备制造商,并且希望将你的 Windows 应用商店设备应用关联为设备的“自动播放”****处理程序,则可以在设备元数据中标识该应用。 如果将你的应用关联为设备的体验 ID 的自动安装的应用,则在将设备连接到电脑时,操作系统将发现这种关联。如果该电脑上没有安装你的应用,操作系统将自动下载和安装你的应用。“自动播放”功能会将你的应用作为第一个选项供用户选为设备的处理程序。有关详细信息,请参阅 Windows 应用商店设备应用的自动播放。
目标: 创建一个用于处理“自动播放”设备事件的应用。
先决条件
Microsoft Visual Studio
说明
1. 创建新项目并添加自动播放声明
打开 Visual Studio,然后从“文件”****菜单中选择“新建项目”。在“Javascript”****部分中,选择“Windows 应用商店”。将应用命名为 AutoPlayDevice_Camera 并单击“确定”。
打开 Package.appxmanifest 文件并选择“功能”****选项卡。选择“可移动存储”功能。这会使该应用能够访问作为可移动存储卷设备的相机上的数据。
在清单文件中,选择“声明”选项卡。在“可用声明”下拉列表中,选择“自动播放设备”,然后单击“添加”。选择已添加到“支持的声明”列表中的新的“自动播放设备”****项。
“自动播放设备”****声明会在“自动播放”引发已知事件的设备事件时将你的应用标识为一个选项。
在“启动操作”部分中,为第一个启动操作输入以下值。
设置 值 谓词 显示 操作显示名称 显示图片 内容事件 WPD\ImageSource “操作显示名称”****设置标识自动播放为你的应用显示的字符串。“谓词”设置标识针对所选选项传递给你的应用的值。你可以为自动播放事件指定多个启动操作并且可以使用“谓词”****设置确定用户未你的应用选择的选项。你可以通过检查传递给应用的启动事件参数的 verb 属性来标识用户选择的选项。你可以为“谓词”设置使用任何值(但保留的 open 除外)。有关在单个应用中使用多个谓词的示例,请参阅快速入门:为自动播放内容注册应用。
在“可用声明”下拉列表中,选择“文件类型关联”,然后单击“添加”。在新“文件类型关联”声明的“属性”中,设置“显示名称”字段为“Show Images from Camera”,设置“名称”字段为“camera_association1”。在“支持的文件类型”部分中,单击“新增”。将“文件类型”字段设置为 .jpg。在“支持的文件类型”部分中,再次单击“新增”。将新文件关联的“文件类型”字段设置为 .png。对于内容事件,自动播放功能会筛选掉任何未与应用显式关联的文件类型。
保存并关闭清单文件。
2. 添加 HTML UI
打开 Default.html 文件并将以下 HTML 置于 <body> 部分中。
<table> <tr> <td colspan="2">Device Information</td> </tr> <tr> <td style="vertical-align:top"><div id="deviceInfoDiv" style="width:400px;" /></td> <td style="vertical-align:top"><div id="picturesDiv" style="overflow:scroll;width:400px;height:400px" /></td> </tr> </table>
3. 添加激活代码
此步骤中的代码通过将相机的设备信息 ID 传递给 fromId 方法来以 StorageDevice 形式引用相机。相机的设备信息 ID 是从传递给 onactivated 事件处理程序的参数的 detail.deviceInformationId 属性获取的。
打开 js 文件夹。打开 Default.js 文件并将默认的 onactivated 函数替换为以下代码。
app.onactivated = function (args) { if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.device) { args.setPromise(WinJS.UI.processAll()); showImages(Windows.Devices.Portable.StorageDevice.fromId(args.detail.deviceInformationId)); } };
4. 将代码添加到显示设备信息中
可以从 StorageDevice 类的属性中获取有关相机的信息。此步骤中的代码在应用运行时,向用户显示设备名称和其他信息。此代码随后调用 getImages 方法,该方法将在下一步中添加,可显示相机上所存储图像的缩略图。
在 Default.js 文件中,将以下代码添加到 onactivated 函数的后面。
var imagesDiv; function showImages(folder) { var infoDiv = document.getElementById("deviceInfoDiv"); imagesDiv = document.getElementById("picturesDiv"); infoDiv.innerHTML = "Display Name = " + folder.displayName + "<br />" + "Display Type = " + folder.displayType + "<br />" + "FolderRelativeId = " + folder.folderRelativeId + "<br />"; getImages(folder); }
5. 添加显示图像的代码
此步骤中的代码显示相机上所存储图像的缩略图。此代码对相机进行异步调用以获取缩略图。但是,只有在上一个异步调用完成后,才会进行下一个异步调用。这可确保一次仅对相机发出一个请求。
在 Default.js 文件中,将以下代码添加到 showImages 函数后。
function getImages(folder) { // Find images in the specified folder folder.getFilesAsync().done( function (files) { files.forEach(function (file) { file.getThumbnailAsync( Windows.Storage.FileProperties.ThumbnailMode.singleItem, 100, Windows.Storage.FileProperties.ThumbnailOptions.useCurrentScale).done( function (thumbnail) { // Create an img element to display on the page var element = document.createElement("img"); element.src = window.URL.createObjectURL(thumbnail, { oneTimeOnly: true }); element.style.height = thumbnail.originalHeight; element.style.width = thumbnail.originalWidth; element.alt = file.name; imagesDiv.appendChild(element); } ); }) // Find images in subfolders folder.getFoldersAsync().done( function (folders) { folders.forEach(function (f) { getImages(f); }) }); }); }
6. 生成并运行应用
- 按 F5 生成并部署应用(在调试模式下)。
- 若要运行你的应用,请将相机连接到你的电脑。然后,从“自动播放”选项列表中选择该应用。注意 并非所有的相机都针对 WPD\ImageSource 自动播放设备事件进行公布。
摘要
在本教程中,你创建了一个显示相机设备中图像文件的应用。你已经为自动播放 WPD\ImageSource 设备事件注册了该应用。