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

發行項
12/11/2015

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

您可以登錄應用程式做為自動播放內容事件的選項。將磁碟區裝置 (例如，相機記憶卡、隨身碟或 DVD) 插入電腦時，就會引發「自動播放」****內容事件。

我們在此處示範如何讓您的應用程式在插入相機的磁碟區裝置時成為自動播放選項。

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

先決條件

Microsoft Visual Studio

指示

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

開啟 Visual Studio，然後選取 [檔案]**** 功能表的 [新增專案]。在 [Javascript]**** 區段中，選取 [Windows 市集]。將應用程式命名為 AutoPlayDisplayOrCopyImages，然後按一下 [確定]。
開啟 Package.appxmanifest 檔案，然後選取 [功能]**** 索引標籤。選取 [抽取式存放裝置] 以及 [圖片庫]**** 功能。這樣 app 就可以存取相機記憶體的抽取式存放裝置，以及存取本機圖片。
在資訊清單檔案中，選取 [宣告] 索引標籤。在 [可用宣告]**** 下拉式清單中，選取 [自動播放內容]，然後按一下 [加入]。選取已經新增至 [支援的宣告] 清單中的新 [自動播放內容] 項目。
當自動播放引發內容事件時，[自動播放內容] 宣告可以將您的 app 識別為選項。事件是以磁碟區裝置 (如 DVD 或隨身碟) 的內容為基礎。自動播放會檢查磁碟區裝置的內容，然後決定要引發的內容事件。如果磁碟區根目錄包含 DCIM、AVCHD 或 PRIVATE\ACHD 資料夾，或如果使用者已在 [自動播放] 控制台中啟用 [選擇要對每種媒體類型執行的動作]**** 並在磁碟區的根目錄中找到圖片，則自動播放就會引發 ShowPicturesOnArrival 事件。

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

設定值

動詞顯示

動作顯示名稱顯示圖片

內容事件 ShowPicturesOnArrival

[動作顯示名稱]**** 設定會識別為您 app 自動播放所顯示的字串。[動詞] 設定會識別針對選取的選項而傳遞至您 app 的值。您可以為自動播放事件指定多個啟動動作，並使用 [動詞]**** 設定判斷使用者為您 app 選取的選項。您可以檢查傳遞至 app 啟動事件引數的 verb 屬性，以判斷使用者選取的選項。您可以在 [動詞] 設定使用保留字 open 以外的任何值。
在 [自動播放內容] 項目的 [啟動動作]**** 區段中，按一下 [新增]，以新增第二個啟動動作。為第二個啟動動作輸入下列值。

設定值

動詞複製

動作顯示名稱複製圖片到媒體櫃

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

設定	值
動詞	顯示
動作顯示名稱	顯示圖片
內容事件	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 屬性中的動詞值。程式碼接著會呼叫與使用者選取之選項相關的函式。若為相機記憶體事件，自動播放會將啟動引數中的相機存放裝置根資料夾傳送至應用程式。您可以從 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 以建置和部署應用程式 (偵錯模式)。
若要執行 app，請將相機中的相機記憶卡或其他存放裝置插入電腦。然後從自動播放選項清單中選取您在 package.appxmanifest 檔案中指定的其中一個內容事件選項。這個範例程式碼只會顯示或複製相機記憶卡的 DCIM 資料夾中的相片。如果您的相機記憶卡將相片儲存在 AVCHD 或 PRIVATE\ACHD 資料夾中，您必須隨之更新程式碼。注意如果您沒有任何相機記憶卡，您可以使用快閃磁碟機 (如果其根目錄中有一個名為 DCIM 的資料夾，而且該 DCIM 資料夾有一個包含影像的子資料夾)。

摘要與後續步驟

在這個教學課程中，您建立了一個可顯示影像檔或將影像檔複製到 [圖片] 中的應用程式。您登錄了應用程式以自動播放 ShowPicturesOnArrival 內容事件。

自動播放會在使用鄰近性功能 (輕觸) 的電腦間，針對分享的內容引發內容事件。您可以使用這個快速入門中的步驟及程式碼，處理使用鄰近性功能的電腦間所分享的檔案。下表列出可利用鄰近性來分享內容的自動播放內容事件。

動作	自動播放內容事件
分享音樂	PlayMusicFilesOnArrival
分享視訊	PlayVideoFilesOnArrival

使用鄰近性功能分享檔案時，FileActivatedEventArgs 物件的 Files 屬性會包含根資料夾的參照，這個參照包含所有已分享的檔案。

Share via