共用方式為


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

[ 本文的目標對象是撰寫 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. 建立新專案以及新增自動播放宣告

  1. 開啟 Visual Studio,然後選取 [檔案]**** 功能表的 [新增專案]。在 [Javascript]**** 區段中,選取 [Windows 市集]。將應用程式命名為 AutoPlayDevice_Camera,然後按一下 [確定]。

  2. 開啟 Package.appxmanifest 檔案,然後選取 [功能]**** 索引標籤。選取 [抽取式存放裝置] 功能。這可讓 app 存取做為卸除式存放磁碟區裝置的相機中的資料。

  3. 在資訊清單檔案中,選取 [宣告]**** 索引標籤。在 [可用宣告] 下拉式清單中,選取 [自動播放裝置],然後按一下 [加入]。選取已經新增至 [支援的宣告] 清單中的新 [自動播放裝置] 項目。

  4. 當自動播放引發已知事件的裝置事件時,[自動播放裝置]**** 宣告可以將您的 app 識別為選項。

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

    設定
    動詞 顯示
    動作顯示名稱 顯示圖片
    內容事件 WPD\ImageSource

     

    [動作顯示名稱]**** 設定會識別為您 app 自動播放所顯示的字串。[動詞] 設定會識別針對選取的選項而傳遞至您 app 的值。您可以為自動播放事件指定多個啟動動作,並使用 [動詞]**** 設定判斷使用者為您 app 選取的選項。您可以檢查傳遞至 app 啟動事件引數的 verb 屬性,以判斷使用者選取的選項。您可以在 [動詞] 設定使用保留字 open 以外的任何值。如需在單一應用程式中使用多個動詞的範例,請參閱快速入門:登錄自動播放內容的應用程式

  5. 在 [可用宣告] 下拉式清單中,選取 [檔案類型關聯],然後按一下 [加入]。在新 [檔案類型關聯] 宣告的 [屬性] 中,將 [顯示名稱] 欄位設定成 Show Images from Camera,將 [名稱] 欄位設定成 camera_association1。在 [支援的檔案類型] 區段中,按一下 [加入新的]。將 [檔案類型] 欄位設定成 .jpg。在 [支援的檔案類型] 區段中,再次按一下 [加入新的]。將新檔案關聯的 [檔案類型] 欄位設定成 .png。對於內容事件,自動播放會篩選掉未明確地與您 app 關聯的所有檔案類型。

  6. 儲存並關閉資訊清單檔案。

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. 建置和執行應用程式

  1. 按 F5 以建置和部署應用程式 (偵錯模式)。
  2. 若要執行您的應用程式,請將相機連接到您的電腦。然後從自動播放選項清單中選取應用程式。注意  並非所有相機都會針對 WPD\ImageSource 自動播放裝置事件進行公告。  

摘要

在這個教學課程中,您建立了一個顯示相機裝置中的影像檔的應用程式。您登錄了自動播放 WPD\ImageSource 裝置事件的應用程式。

相關主題

使用自動播放功能來自動啟動