快速入門：登錄自動播放裝置的應用程式 (HTML)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

您可以登錄應用程式做為自動播放裝置事件的選項。將裝置連接到電腦時，就會引發「自動播放」****裝置事件。

我們將在此處示範如何在將相機連接到電腦時，將您的 app 識別為 [自動播放] 選項。該 app 會登錄為 WPD\ImageSourceAutoPlay 事件的處理常式。當相機及其他影像裝置通知 Windows 可攜式裝置 (WPD) 系統它們是使用 MTP 的 ImageSource 時，該系統常會引發這個事件。如需詳細資訊，請參閱 Windows 可攜式裝置。

如果您是裝置製造商，而且想將您的 Windows 市集裝置應用程式關聯為裝置的自動播放處理常式，可在裝置中繼資料中識別該應用程式。如果您將應用程式關聯為裝置體驗識別碼的自動安裝應用程式，那麼當您的裝置連接到電腦時，作業系統將會探索這項關聯。如果電腦未安裝您的應用程式，作業系統將自動下載並安裝您的應用程式。「自動播放」****會將您的應用程式做為第一選項提供，讓使用者可以選擇做為您裝置的處理常式。如需詳細資訊，請參閱 Windows 市集裝置應用程式的自動播放。

目標: 建立應用程式以處理自動播放裝置事件。

先決條件

Microsoft Visual Studio

指示

1. 建立新專案以及新增自動播放宣告

開啟 Visual Studio，然後選取 [檔案]**** 功能表的 [新增專案]。在 [Javascript]**** 區段中，選取 [Windows 市集]。將應用程式命名為 AutoPlayDevice_Camera，然後按一下 [確定]。
開啟 Package.appxmanifest 檔案，然後選取 [功能]**** 索引標籤。選取 [抽取式存放裝置] 功能。這可讓 app 存取做為卸除式存放磁碟區裝置的相機中的資料。
在資訊清單檔案中，選取 [宣告]**** 索引標籤。在 [可用宣告] 下拉式清單中，選取 [自動播放裝置]，然後按一下 [加入]。選取已經新增至 [支援的宣告] 清單中的新 [自動播放裝置] 項目。
當自動播放引發已知事件的裝置事件時，[自動播放裝置]**** 宣告可以將您的 app 識別為選項。

在 [啟動動作] 區段中，為第一個啟動動作輸入下列值。

設定值

動詞顯示

動作顯示名稱顯示圖片

內容事件 WPD\ImageSource

[動作顯示名稱]**** 設定會識別為您 app 自動播放所顯示的字串。[動詞] 設定會識別針對選取的選項而傳遞至您 app 的值。您可以為自動播放事件指定多個啟動動作，並使用 [動詞]**** 設定判斷使用者為您 app 選取的選項。您可以檢查傳遞至 app 啟動事件引數的 verb 屬性，以判斷使用者選取的選項。您可以在 [動詞] 設定使用保留字 open 以外的任何值。如需在單一應用程式中使用多個動詞的範例，請參閱快速入門：登錄自動播放內容的應用程式。
在 [可用宣告] 下拉式清單中，選取 [檔案類型關聯]，然後按一下 [加入]。在新 [檔案類型關聯] 宣告的 [屬性] 中，將 [顯示名稱] 欄位設定成 Show Images from Camera，將 [名稱] 欄位設定成 camera_association1。在 [支援的檔案類型] 區段中，按一下 [加入新的]。將 [檔案類型] 欄位設定成 .jpg。在 [支援的檔案類型] 區段中，再次按一下 [加入新的]。將新檔案關聯的 [檔案類型] 欄位設定成 .png。對於內容事件，自動播放會篩選掉未明確地與您 app 關聯的所有檔案類型。
儲存並關閉資訊清單檔案。

設定	值
動詞	顯示
動作顯示名稱	顯示圖片
內容事件	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. 新增啟用程式碼

這個步驟中的程式碼透過將相機的裝置資訊識別碼傳送至 fromId 方法，以將相機參考為 StorageDevice。相機的裝置資訊識別碼的取得，是來自傳送至 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 裝置事件的應用程式。