快速入门：为自动播放设备注册应用 (HTML)

项目
12/11/2015

[ 本文适用于编写 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。对于内容事件，自动播放功能会筛选掉任何未与应用显式关联的文件类型。
保存并关闭清单文件。

设置	值
谓词	显示
操作显示名称	显示图片
内容事件	WPD\ImageSource

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 设备事件注册了该应用。

Share via