FileOpenPicker WP8.1 - 如何

Question

我是 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 文件作为一个蛮力。

有线索吗？

Answer 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();
})();

此代码适合您。

Answer 2

我终于明白了。这是我基于 Cordova Camera Plugin JIRA issues(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>

记住：

"In short, choosing image from gallery causes app to suspend until image is picked and then resume with start page (as defined in config.xml). If you have called getPicture from different page, this will cause the whole app to reload and open start page. In addition, callbacks to getPicture also get wiped in this case so you'll never get any result from the plugin."

所以，我需要在索引页上设置一个钩子来拦截摄像头成功的回调。这是我的 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 但现在您可以希望将应用程序重定向到声明到 [=65= 中的页面]（在我的例子中，该页面称为 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 func 将图像发送到我的服务器，服务器使用我保存的远程 url 应答。上传 img 函数是一个简单的函数，您可以按照文件传输插件文档构建。

FileOpenPicker WP8.1 - 如何

FileOpenPicker WP8.1 - How to

javascript

winjs

cordova

fileopenpicker

windows-phone-8.1