您的位置: 首页  >  技术问答  >  Cordova 5.0后退按钮退出jQuery Mobile App

Cordova 5.0后退按钮退出jQuery Mobile App

分类: 技术问答 • 2022-05-11 16:20:13
问题描述：

我正在使用Visual Studio 2015 RC和jQuery Mobile建立Cordova 5.0.0应用程式（ multipage app ）（jQuery 2.1.4，jQuery Mobile 1.4.5），我遇到的行为与后台按钮相反，我的理解，它应该如何工作。现在，我的所有测试和开发都是在Windows Phone 8.1上完成的。我使用的唯一插件是 cordova-plugin-media ，它依赖于 cordova-plugin-file ，但我没有明确使用文件插件。

I'm building a Cordova 5.0.0 application with Visual Studio 2015 RC and jQuery Mobile (multipage app) (jQuery 2.1.4, jQuery Mobile 1.4.5), and I'm experiencing behavior with the back-button contrary to my understanding of how it should work. Right now, all my testing and development is being done on/for Windows Phone 8.1. The only plugins I'm using are cordova-plugin-media, which has a dependency on cordova-plugin-file, though I'm not explicitly using the file plugin.

问题

无论我在哪个网页，硬件后退按钮，应用程序只是去背景（不关闭，只是应用程序导航远离）。从我阅读的一切，我明白后台按钮应该像默认情况下页面导航。 （也就是说，如果你从page1到page2，然后按回去，然后你转到page1）。

No matter what page I'm on, if I press the hardware back button, the app just goes to background (doesn't close, just the app is navigated away from). From everything that I've read, I understand that the back button is supposed to work like page navigation by default. (That is, if you go from page1 to page2 and press back, then you go to page1).

所以，我试过覆盖自己实现，但我无法获取 backbutton事件 to fire。

So, I've tried overriding the back-button with my own implementation, but I can't get the backbutton event to fire.

以下是一些代码：

(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {
        console.log("deviceReady");
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );

        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        console.log('assign back button');
        document.addEventListener('backbutton', function (e) {
            console.log("backbutton");
            window.history.back();
            return false;
        }, false);
    };

当我运行应用程序时， deviceReady 它到控制台，因此分配后退按钮。当我浏览到我的应用程序（无论是1，2，3或4页）无关紧要，并点击返回按钮， backbutton 不会使它

When I run my app, deviceReady makes it to the console, and so does assign back button. When I navigate into my app (doesn't matter if it's 1, 2, 3, or 4 pages) and click the back button, backbutton doesn't make it to the console, and the app just moves to the back.

如果我将事件监听器更改为：

If I change the event listener to this:

document.addEventListener('backbutton', onBackButton, false);

和

function onBackButton() {
    console.log("backButton");
    window.history.back();
    return false;
};

那么我得到相同的结果。

then I get the same result.

我的脚本标签位于index.html内的我的body标签的底部，并且顺序如下：

My script tags are at the bottom of my body tag inside index.html and are in this order:

<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/jquery-2.1.4.min.js"></script>
<script src="scripts/jquery.mobile-1.4.5.min.js"></script>
<script src="scripts/platformOverrides.js"></script> // Empty file

<script src="scripts/index.js"></script>
<script src="scripts/jqueryHelpers.js"></script>

有什么明显的事情我在这里做错了吗？

Is there something blaringly obvious that I'm doing wrong here?

platformOverrides.js 由Visual Studio模板提供，并且为空。 index.js 由模板提供，并且是上面发布的代码所在的位置。 jqueryHelpers.js 只是两个常数，如下所示：

platformOverrides.js is provided by the Visual Studio template and is empty. index.js is provided by the template, and is where the code posted above lives. jqueryHelpers.js is just two constants, like this:

var APIROOT = "http://WEBAPI-ADDRESS.COM/";
var PCFGUID = "00000000-0000-0000-000E-000000000000"; // changed to Guid.Empty here for security reasons.

EDIT

我注意到Visual Studio也拉下了不正确的版本的Cordova。我不知道如何纠正这个，我不知道这是否是我的问题或不。我已为其打开了一个新问题，但是在这里提及它是否相关。我指定5.0.0，但是当我在调试时看动态内容，它看起来像使用3.9.0-dev

I've noticed that Visual Studio is pulling down the incorrect version of Cordova also. I'm not sure how to correct this, and I'm not sure if this is my problem or not. I've opened a new question for it, but wanted to mention it here in case it was relevant. I'm specifying 5.0.0, but when I look at the dynamic content while debugging, it looks like it's using 3.9.0-dev

EDIT

EDIT

进一步研究后，它的版本号可能是正确的。请参阅： http://*.com/a/31430780/403404

Upon further research, it looks like the version number might be correct. See: http://*.com/a/31430780/403404

答

我有完全相同的问题，我在*找到了另一个问题的答案。您可以在此查看 Phonegap + jquery mobile + windows phone：返回按钮问题

I had exactly the same problem and I found another question here in * with the answer. You can check it here Phonegap +jquery mobile + windows phone: Back button issue

下面是解决问题的代码：

As a quick view here is the code that solves the problem:

WinJS.Application.addEventListener("backclick", function (evt) {
if (!jQuery(".ui-page-active").attr("id") == "page-home")) {
    history.back();
    // Prevent the default behavior by returning true. evt.preventDefault doesn't cancel the external code.
    return true;
}
// Execute the default behavior.
return false;
};



PS：我更改了一些代码，以避免从原始答案中弃用jQuery.mobile.activePage 。

PS: I changed the code a bit to avoid the deprecated jQuery.mobile.activePage from the original answer.

希望它有助于

相关推荐