Question

我正在使用Cordova包装的JQuery Mobile开发混合移动应用程序。

我的Jquery版本是2.1.4，Jquery Mobile版本是1.4.5。同样，我的Cordova CLI版本是5.3.3。

我需要覆盖杀死活动的Android后退按钮行为。所以我使用了Cordova的backbutton听众。我在deviceready上调用此活动。但是，依旧安卓回来后，我的鼻涕被召唤，应用程序被杀了。

我的index.html是，

<html>
<head>

    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">


    <link rel="stylesheet" href="css/jquery.mobile.theme.min.css"/>
    <link rel="stylesheet" href="css/jquery.mobile.icons.min.css"/>

    <link rel="stylesheet" type="text/css" href="libs/JQuery/jquery.mobile.icons-1.4.5.min.css"/>
    <link rel="stylesheet" type="text/css" href="libs/JQuery/jquery.mobile.structure-1.4.5.min.css"/>


    <!-- PAGE/APPLICATION STYLE SHEETS -->

    <link rel="stylesheet" type="text/css" href="css/index.css">

    <script src="libs/JQuery/jquery-2.1.4.min.js"></script>
    <script src="libs/JQuery/jquery.mobile-1.4.5.min.js"></script>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>

    <title>Override Back</title>

</head>

<body>

<div id="page-index" data-role="page">


    <div role="main">

        <div class="ui-content"></div>

    </div>

</div>


</body>

</html>

我的index.js是，

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {

        app.receivedEvent('deviceready');

        document.addEventListener("backbutton", function (e) {
            e.preventDefault();
        }, false );

        app.OrganizationInformation();
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        /*var parentElement = document.getElementById(id);
         var listeningElement = parentElement.querySelector('.listening');
         var receivedElement = parentElement.querySelector('.received');

         listeningElement.setAttribute('style', 'display:none;');
         receivedElement.setAttribute('style', 'display:block;');

         console.log('Received Event: ' + id);*/

    }
};

app.initialize();

我正在使用的插件是，

com.phonegap.plugins.facebookconnect 0.4.0 "Facebook Connect"
cordova-plugin-splashscreen 2.1.0 "Splashscreen"
cordova-plugin-whitelist 1.0.0 "Whitelist"
phonegap-plugin-push 1.4.4 "PushPlugin"

任何人都可以帮助我理解为什么这个监听器没有被调用。我关注了许多博客和答案，但无法取得成功。感谢您提前帮助。

Answer 1

@Joseph，
你有三个问题。一个效果较差，但有一天会迎头赶上。另一个问题是，无法捕获[backbutton]，更容易看到。

在＃1 上，e.preventDefault();没有做任何事情。该事件与浏览器无关，并且不受通常的“事件冒泡”影响。请参阅Event Order - 和older post on subject

在＃2 上，您需要等到deviceready事件触发后再执行任何操作。这包括调用其他库。

正如deviceready event的文档中所述：

Cordova由两个代码库组成：native和JavaScript。加载本机代码时，会显示自定义加载图像。但是，只有在DOM加载后才会加载JavaScript。这意味着在相应的本机代码可用之前，Web应用程序可能会调用Cordova JavaScript函数。

一旦Cordova完全加载，deviceready事件就会触发。一旦事件触发，您就可以安全地调用Cordova API。一旦HTML文档的DOM加载，应用程序通常会附加一个带有document.addEventListener的事件监听器。

deviceready事件的行为与其他事件略有不同。在deviceready事件触发后注册的任何事件处理程序都会立即调用其回调函数。

我强烈建议您重新组织代码。

在＃3 上，代码中存在常见错误。调用事件时，代码中的this超出范围。这意味着以下代码无效：

bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},

有几种方法可以解决这个问题。

使onDeviceReady()函数成为全局函数，因为这是您的代码所调用的函数。
直接调用库，就像它是库的外部一样。

像这样：

bindEvents: function() {
    document.addEventListener('deviceready', app.onDeviceReady, false);
},

要明确的是，当最终制作this.onDeviceReady()时，它“超出范围”并且是全局的。

有关详细说明，请阅读以下SO帖子：
Phonegap IOS - Plugin Push Setup

最好的运气

覆盖Android后退按钮是Cordova的挑战

1 个答案: