FileOpenPicker WP8.1 - 如何答案

【问题标题】：FileOpenPicker WP8.1 - How toFileOpenPicker WP8.1 - 如何
【发布时间】：2016-04-19 14:18:41
【问题描述】：

我是 windows phone 开发的新手，我必须使用 phonegap/cordova 将我的应用程序移植到它上面。我的大部分代码都适用于 Android/iOS 和 winphone，但在这个 FileOpenPicker 上我被阻止了。我正在使用 winjs 2.1，我想准备一个脚本，以便在我在需要此功能的页面中时调用。

我已经阅读了大量示例，并且我认为我已经非常接近解决方案了。

在我的 html 文件中声明：

<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
<script type="text/javascript" src="js/default.js"></script>

这是我的 default.js，我在必须调用 FileOpenPicker 的页面中使用的文件。

(function () {
"use strict";

var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;

app.onloaded = function (args) {
    var activationKind = args.detail.kind;

    document.getElementById("btnSnap").addEventListener("click", pickSinglePhoto);

    if (activationKind === Windows.ApplicationModel.Activation.ActivationKind.pickFileContinuation) {
        continueFileOpenPicker(options.activatedEventArgs);
    }           
};

function pickSinglePhoto() {
    // Clean scenario output 
    WinJS.log && WinJS.log("", "sample", "status");
    console.log("in pickSinglePhoto");

    // Create the picker object and set options 
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
    openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
    openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
    // Users expect to have a filtered view of their folders depending on the scenario. 
    // For example, when choosing a documents folder, restrict the filetypes to documents for your application. 
    openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);

    // Open the picker for the user to pick a file 
    openPicker.pickSingleFileAndContinue();
}

// Called when app is activated from file open picker 
// eventObject contains the returned files picked by user 
function continueFileOpenPicker(eventObject) {
    console.log("in continueFileOpenPicker");
    var files = eventObject[0].files;
    var filePicked = files.size > 0 ? files[0] : null;
    if (filePicked !== null) {
        // Application now has read/write access to the picked file 
        WinJS.log && WinJS.log("Picked photo: " + filePicked.name, "sample", "status");
    } else {
        // The picker was dismissed with no selected file 
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
}

app.start();
})();

很遗憾，这不起作用。我无法进入 continueFileOpenPicker 因为标志 activationKind 始终未定义。我很确定我应该使用 app.onactivated 而不是 app.onloaded，但在前一种情况下，我无法进入该函数。

我已经尝试了 pickSinglePhoto 功能，它似乎可以工作，但由于应用程序崩溃，我无法在选择后返回页面，显然是因为我无法在其他 javascript 文件中选择和使用该功能一个畜生。

有什么线索吗？

【问题讨论】：

标签： javascript cordova windows-phone-8.1 winjs fileopenpicker

【解决方案1】：

(function () {
"use strict";

var app = WinJS.Application;

app.onloaded = function (args) {

document.getElementById("btnSnap").addEventListener("click", pickSinglePhoto);
}

//This is where the app should validate the ActivationKind
app.onactivated = function ( args ) {

var value = args.detail.kind;

if (value ===     Windows.ApplicationModel.Activation.ActivationKind.pickFileContinuation)
{
continueFileOpenPicker(args);
}

}

function pickSinglePhoto() {

console.log("in pickSinglePhoto");

var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

openPicker.suggestedStartLocation =     Windows.Storage.Pickers.PickerLocationId.picturesLibrary;

openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);

openPicker.pickSingleFileAndContinue();

}


function continueFileOpenPicker(eventObject)
{
var imagen = eventObject.detail.files[0];

//whatch the properties of this object in the debuger
console.log(imagen.displayName);


}


app.start();
})();

此代码将为您工作。

【讨论】：

【解决方案2】：

我终于明白了。这是我基于 Cordova Camera Plugin JIRA 问题(link) 的官方回答的工作解决方案。

使用官方相机插件Cordova (link)
主要文件： index.html、index.js、new.html、new.js、wp_get_image.js、utils.js。

首先，在 index.html（我的主页）中，我声明了 wp_get_image.js 脚本：

<script type="text/javascript" src="js/localstoragedb.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/wp_get_image.js"></script> 
<script type="text/javascript" src="js/index.js"></script>

记住：

“简而言之，从图库中选择图片会导致应用暂停，直到选择图像，然后从起始页恢复（如定义 config.xml）。如果你从不同的页面调用了 getPicture，这个将导致整个应用程序重新加载并打开开始页面。此外，在这种情况下，getPicture 的回调也会被清除，所以你永远不会从插件中获取任何结果。”

所以，我需要在索引页面上设置一个钩子来拦截来自摄像头成功的回调。这是我的 wp_get_image.js：

var goto_new_page_winphone = "";

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {

        if (args.detail.kind === activation.ActivationKind.launch) {
            var that = this;

            // Init:
            goto_new_page_winphone = "";
            localStorage.setItem("image_url_winphone", "");
        }

        if (args && args.detail.kind === activation.ActivationKind.pickFileContinuation) {
            continueFileOpenPicker(args);
        };

        args.setPromise(WinJS.UI.processAll().then(function () {
            // Text
        }));
    };

    function continueFileOpenPicker(eventObject) {

        console.log("in continueFileOpenPicker");
        var filePicked = eventObject.detail.files[0];
        var msgBox;
        if (filePicked !== null) {
            // Save filePicked.path in localstorage:
            localStorage.setItem("image_url_winphone", filePicked.path);
        } else {
            msgBox = new Windows.UI.Popups.MessageDialog("Operation cancelled.");
            msgBox.showAsync();
        }
        // Save back page:
        goto_new_page_winphone = read_backpage();
    };
app.start();
})();

我使用 localstorage 来保存图像 url 和一个本地变量来存储我来自的页面（我称为 new.html 的页面）。 read_backpage() 函数在我的 utils.js 文件中声明，我在其中跟踪用户访问的页面。因此，在我拍摄照片的 new.html 页面上执行操作后，系统将我踢回索引页面。在那里，我需要阅读我来自的页面。所以在我的 index.js 中：

window.addEventListener("load", load, false);

function load() {
    if (device.platform != undefined) {
        var plat = device.platform;
        plat = plat.substring(0, 3);
        if (plat.toLowerCase() == "win") {
            if (goto_new_page_winphone && goto_new_page_winphone.length > 0) {
                window.location.href = goto_new_page_winphone;
            }
        }
    }
}

注意：流程是：$(document).ready in index.js -> app.onactivated in wp_get_image.js -> load in index.js。所以不要把 goto 函数 (window.location.href = goto_new_page_winphone) 放在 $(document).ready 里面，否则你会得到 var goto_new_page_winphone null 并且你不能移动。

好吧，此时，您已经在 new.html 页面中选择了图片，回到了 index.html，但现在您可以希望将应用程序重定向到声明为 goto_new_page_winphone 的页面（在我的情况下，该页面称为 new .html)。

在new.js（new.html相关的脚本）中我选择了图片的路径：

if (is_winphone) {
        var image_url = localStorage.getItem("image_url_winphone");
        if (image_url && image_url.length > 0) {
            upload_img("newprofile", image_url, function (urlimg) {
                // Reset localstorage var:
                localStorage.setItem("image_url_winphone", "");
                if (urlimg.length > 0) {
                    urlimg = urlimg.replace(/\\/g, '');
                    console.log(urlimg);
                    // Save remote url in my localstorage
                    wp_save_img_url(urlimg);
                }
            });
        }
    }

在我的情况下，我通过 upload_img 函数将图像发送到我的服务器，服务器使用我为我的目的保存的远程 URL 进行应答。上传 img 函数是一个简单的函数，您可以按照文件传输插件文档构建。

【讨论】：