Question

我正在使用Visual Studio 2015 RC和jQuery Mobile（multipage app）（jQuery 2.1.4，jQuery Mobile 1.4.5）构建Cordova 5.0.0应用程序，并且我正在体验使用后退按钮的行为与我对它应该如何工作的理解相反。现在，我所有的测试和开发都是针对Windows Phone 8.1进行的。我使用的唯一插件是cordova-plugin-media，它依赖cordova-plugin-file，但我没有明确使用文件插件。

问题

无论我在哪个页面上，如果我按下硬件后退按钮，应用程序就会转到后台（不会关闭，只需将应用程序导航离开）。从我所阅读的所有内容中，我了解到默认情况下后退按钮应该像页面导航一样工作。（也就是说，如果你从第1页转到第2页并按回，那么你转到第1页）。

所以，我已经尝试用我自己的实现覆盖了后退按钮，但是我无法触发backbutton event。

以下是一些代码：

(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会将其转到控制台，assign back button也是如此。当我导航到我的应用程序时（如果它的1,2,3或4页不重要）并单击后退按钮，backbutton无法进入控制台，应用程序只是移动到后面。

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

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

和

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

然后我得到相同的结果。

我的脚本标记位于index.html内部的body标签的底部，按此顺序排列：

<!-- 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>

我在这里做错了吗？

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

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

修改

我注意到Visual Studio也正在推出不正确的Cordova版本。我不确定如何纠正这个问题，我不确定这是不是我的问题。我打开了一个new question for it，但是想在这里提一下，以防它相关。我指的是5.0.0，但是当我在调试时查看动态内容时，它看起来像是使用了3.9.0-dev

修改

经过进一步研究，看起来版本号可能是正确的。请参阅：https://stackoverflow.com/a/31430780/403404

Answer 1

尝试使用＆＃39;＆＃39; jQuery函数。问题可能在于浏览器与代码的兼容性。您应该检查Windows Mobile上的浏览器版本。请阅读this attachEvent article.

function deviceReady() {

$("#backbutton").on("click",function(){
        console.log("backbutton");
         window.history.back();
         return false;
    });

}

如果您需要，可以退出并终止应用程序：[Cordova.js

navigator.app.exitApp();

Answer 2

在deviceReady或mobileinit中尝试：

   $(document).bind('keydown', function(event) {
      if (event.keyCode == 27) {
        // Prevent default (disable the back button behavior)
        event.preventDefault();

        $.mobile.back();
      }
    });

我希望有所帮助！

Answer 3

我遇到了完全相同的问题，我在Stackoverflow中找到了另一个问题。您可以在此处查看Phonegap +jquery mobile + windows phone: Back button issue

这里的快速视图是解决问题的代码：

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。

希望有所帮助

Answer 4

当我将cordova从3.6.6版本升级到5.1.1版本时，即使我遇到同样的问题。升级后的cordova后退按钮不会触发。最后，我在cordova.js之后进行了更改，之后工作正常：

//var APP_PLUGIN_NAME = Number(cordova.platformVersion.split('.')[0]) >= 4 ? 'CoreAndroid' : 'App';
var APP_PLUGIN_NAME = 'App';

Cordova 5.0后退按钮退出jQuery Mobile App

4 个答案: