Question

我是Windows手机开发的新手，我必须使用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问题的正式答案（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来保存图片网址和一个本地变量来存储我来自的网页（我称之为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 - ＆gt; app.onactivated in wp_get_image.js - ＆gt;在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 func将图像发送到我的服务器，服务器使用我保存的远程URL回答。 upload img func是一个简单的函数，你可以按照File Tranfer Plugin doc构建它。

FileOpenPicker WP8.1 - 如何

2 个答案: