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

项目
12/11/2015

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

可以将应用注册为“自动播放”内容事件的选项。当卷设备（如相机内存卡、指状驱动器或 DVD）插入到电脑时，会引发“自动播放”****内容事件。

下面我们介绍了如何将应用标识为在插入来自相机的卷设备时的“自动播放”选项。

目标: 创建应用以处理“自动播放”内容事件。

先决条件

Microsoft Visual Studio

说明

1. 创建新项目并添加自动播放声明

打开 Visual Studio，然后从“文件”****菜单中选择“新建项目”。在“Javascript”****部分中，选择“Windows 应用商店”。将应用命名为 AutoPlayDisplayOrCopyImages 并单击“确定”。
打开 Package.appxmanifest 文件并选择“功能”****选项卡。选择“可移动存储”和“图片库”****功能。如此一来，该应用便可访问相机内存的可移动存储设备，也可访问本地图片。
在清单文件中，选择“声明”选项卡。在“可用声明”下拉列表中，选择“自动播放内容”，然后单击“添加”。选择已添加到“支持的声明”列表中的新的“自动播放内容”项****。
“自动播放内容”声明会在“自动播放”引发内容事件时将你的应用标识为一个选项。该事件基于卷设备（如 DVD 或 U 盘）的内容。“自动播放”会检查卷设备的内容并确定要引发的内容事件。如果卷的根中包含 DCIM、AVCHD 或 PRIVATE\ACHD 文件夹，或如果用户已启用“自动播放”控制面板中的“为每种媒体选择相应的操作”****，且在卷的根中找到了图片，则“自动播放”会引发 ShowPicturesOnArrival 事件。

在“启动操作”部分中，为第一个启动操作输入以下值。

设置值

谓词显示

操作显示名称显示图片

内容事件 ShowPicturesOnArrival

“操作显示名称”****设置标识自动播放为你的应用显示的字符串。“谓词”设置标识针对所选选项传递给你的应用的值。你可以为自动播放事件指定多个启动操作并且可以使用“谓词”****设置确定用户未你的应用选择的选项。你可以通过检查传递给应用的启动事件参数的 verb 属性来标识用户选择的选项。你可以为“谓词”设置使用任何值（但保留的 open 除外）。
在“自动播放内容”项的“启动操作”部分中，****单击“新增”可添加第二个启动操作。为第二个启动操作输入以下值。

设置值

谓词复制

操作显示名称将图片复制到库

内容事件 ShowPicturesOnArrival
在“可用声明”下拉列表中，选择“文件类型关联”，然后单击“添加”。在新“文件类型关联”声明的“属性”中，将“显示名称”字段设置为 AutoPlay Copy or Show Images，并将“名称”字段设置为 image_association1。在“支持的文件类型”部分中，单击“新增”。将“文件类型”字段设置为 .jpg。在“支持的文件类型”部分中，再次单击“新增”****。将新文件关联的“文件类型”字段设置为 .png。对于内容事件，自动播放功能会筛选掉任何未与应用显式关联的文件类型。
保存并关闭清单文件。

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

设置	值
谓词	复制
操作显示名称	将图片复制到库
内容事件	ShowPicturesOnArrival

2. 添加 HTML UI

打开 Default.html 文件并将以下 HTML 置于 <body> 部分中。

<label>File List</label>
<div id="files" style="position:fixed;top:30px;height:400px;width:600px" ></div>

3. 添加初始化代码

此步骤中的代码检查被传递给应用的启动参数的 verb 属性中的 verb 值。代码随后调用与用户所选选项相关的函数。对于相机内存事件，自动播放功能将相机存储的根文件夹传递给应用的启动参数。可以从 detail.files 属性的第一个元素检索该文件夹。

打开 js 文件夹。打开 Default.js 文件并将默认的 onactivated 函数替换为以下代码。

var filesDiv;

app.onactivated = function (args) {
    if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.file) {
        filesDiv = document.getElementById("files");

        if (args.detail.verb === "show") {
            // Call displayImages with root folder from camera storage.
            displayImages(args.detail.files[0]);
        }
        else if (args.detail.verb === "copy") {
            // Call copyImagesToLibrary with root folder from camera storage.
            copyImagesToLibrary(args.detail.files[0]);
        }
    }
    args.setPromise(WinJS.UI.processAll());
};

4. 添加显示图像的代码

在 Default.js 文件中，将以下代码添加到 onactivated 函数的后面。

function displayImages(rootFolder) {
    // Display images from first folder in root\DCIM.
    rootFolder.getFolderAsync("DCIM").then(
    function (dcimFolder) {
        dcimFolder.getFoldersAsync().then(
        function (cameraFolders) {
            cameraFolders[0].getFilesAsync().then(
            function (files) {
                files.forEach(function (file) {
                    filesDiv.innerHTML += file.name + "<br />";
                    displayImage(file);
                });
            });
        });
    });
}

function displayImage(file) {
    try {
        var element = document.createElement("img");
        element.src = window.URL.createObjectURL(file, { oneTimeOnly: true });
        element.height = 100;
        element.width = 100;
        filesDiv.appendChild(element);
        filesDiv.innerHTML += "<br>";
    }
    catch (e) {
        filesDiv.innerHTML += e.message;
    }
}

5. 添加复制图像的代码

在 Default.js 文件中，将以下代码添加到 displayImage 函数的后面。

function copyImagesToLibrary(rootFolder) {
    try {
        var now = new Date();
        var folderName =
            "Images " + now.toDateString() + " " + now.getHours() +
                        now.getMinutes() + now.getSeconds();

        Windows.Storage.KnownFolders.
        picturesLibrary.createFolderAsync(folderName).then(
                function (imageFolder) {
                    // Copy images from first folder in root\DCIM.
                    rootFolder.getFolderAsync("DCIM").then(
                function (dcimFolder) {
                    dcimFolder.getFoldersAsync().then(
                function (cameraFolders) {
                    cameraFolders[0].getFilesAsync().then(
                function (files) {
                    files.forEach(function (file) {
                        copyImage(file, imageFolder);
                    });
                });
                });
                });
                });
    } catch (e) {
        filesDiv.innerHTML = "Failed copy images.<br />" + e.message;
    }
}

function copyImage(file, imageFolder) {
    try {
        file.copyAsync(
            imageFolder, file.fileName,
                Windows.Storage.NameCollisionOption.replaceExisting).then(
                    function (newFile) {
                        filesDiv.innerHTML += file.name + " copied.<br />";
                    });
    } catch (e) {
        filesDiv.innerHTML += "Failed to copy image.<br />" + e.message;
    }
}

6. 生成并运行应用

按 F5 生成并部署应用（在调试模式下）。
若要运行应用，请将相机内存卡或相机的其他存储设备插入电脑。然后，从“自动播放”选项列表中选择在你的 package.appxmanifest 文件中指定的内容事件选项之一。此示例代码仅显示或复制相机内存卡的 DCIM 文件夹中的图片。如果你的相机内存卡将图片存储在 AVCHD 或 PRIVATE\ACHD 文件夹中，则将需要相应地更新代码。注意如果你没有相机内存卡，则可以使用闪存驱动器（只要它在根目录中具有一个名为 DCIM 的文件夹，并且 DCIM 文件夹具有一个包含图像的子文件夹）。

摘要和后续步骤

在本教程中，你创建了一个用于显示图像文件或将其复制到“图片”的应用。为自动播放 ShowPicturesOnArrival 内容事件注册了应用。

“自动播放”功能为在使用邻近感应（点击）的电脑之间共享的内容引发内容事件。你可以使用本快速入门中的步骤和代码来处理使用邻近感应的电脑之间共享的文件。下表列出了可以使用邻近感应共享内容的“自动播放”内容事件。

操作	“自动播放内容”事件
共享音乐	PlayMusicFilesOnArrival
共享视频	PlayVideoFilesOnArrival

使用邻近感应功能共享文件时，FileActivatedEventArgs 对象的 Files 属性包含对拥有所有共享文件的根文件夹的引用。

通过