在 cordova 使用双击后退按钮退出应用程序jquery代码并触摸屏幕时,应用程序退出

chhqkbe1  于 2022-11-15  发布在  jQuery
关注(0)|答案(2)|浏览(185)

我正在尝试为Android创建一个Cordova应用程序。在我的应用程序中,我需要这样的功能:在单击Cordova应用程序的默认后退按钮时,它会显示一个通知/对话框/消息,上面写着“再次按下退出应用程序”。单击“是”,它应该退出应用程序。单击“否”,它应该留在应用程序中。在点击消息框外,它退出应用程序,但在点击消息框外,它应该留在应用程序内。我在我的应用程序中使用cordova对话框插件。
预期结果:在消息框外点击时,它应停留在应用程序内。
实际结果:点击消息框外,它退出应用程序。
有谁能帮我解决这个问题吗?提前感谢..!

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
  document.addEventListener("backbutton", function(e) {
    e.preventDefault();
    navigator.notification.confirm("Press again to exit from the app", onConfirmExit, "", "Yes,No");
  }, false);
}

function onConfirmExit(button) {
  if (button == 2) {
    return;
  } else {
    navigator.app.exitApp();
  }
}
hrirmatl

hrirmatl1#

我从你的代码中编辑了几行

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
  document.addEventListener("backbutton", function(e) {
    e.preventDefault();
    navigator.notification.confirm("Press again to exit from the app", onConfirmExit, "Yes", "No");
  }, false);
}

function onConfirmExit(button) {
  if (button == 1) {
    navigator.app.exitApp();
  } else {
    
  }
}

您已经在一个字段中添加了yes和no。它们应该在单独的参数中。
是索引号为1,否为2

stszievb

stszievb2#

我最近使用jQuery、CSS和HTML做了一些类似的事情。
当用户按下返回按钮时,它会显示对话框2秒,然后如果用户再次按下返回按钮,它会关闭应用程序。
下面的代码将在html文件中显示消息。

<div id="dialog" class="dialog">
   <span id="dialog_text"></span>
</div>

这段代码会放在你的CSS文件中。如果你想的话,可以随意改变样式。

.dialog{
    display: none;
    position: fixed;
    background-color: rgba(0,0,0,.7);
    padding: 10px 20px;
    z-index: 1600;
    border-radius: 5px;
    width: fit-content;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
}

.dialog span{
    padding: 0px;
    text-align: center;
    font-size: 16px;
}

接下来是jQuery and函数,这个函数在被调用时显示对话框,2秒后隐藏。

function showDialog(message) {
    $("#dialog_text").html(message).delay(2000).html();
    $("#dialog").fadeIn(250).delay(2000).fadeOut(400);
}

最后是逻辑。当按下后退按钮两次。
这将保存在app.js文件中

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

function onDeviceReady() {
    var countPress = 0;

    document.addEventListener("backbutton", function(e) {
        e.preventDefault();
        if(countPress >= 1){
            navigator.app.exitApp();
        }
        countPress += 1;
        showDialog("Press again to close app");
        setTimeout(function(){
            countPress = 0;
        },3000);
      }, false);
/*--------------------End of Device Ready--------------------*/
}

所以这是在变量countPress中保存后退按钮被按下的次数。
在后退按钮的addEventListener上,这是检查countPress变量值是否等于或大于1,这意味着如果后退按钮已被按下两次,如果是,则应用程序自行关闭;如果不是,则它会将countPress变量加1,并显示对话框函数,我们这样调用该函数。

showDialog("any message you want to display on the dialog box);

如果用户再次按下返回按钮,则应用程序会自行关闭,因为现在countPress值为1。
我还包含了一个3秒的setTimeout。3秒后它将countPress变量重置为0。这意味着用户没有再次按下返回按钮,这可能只是一个意外。
希望这对你有所帮助,也是可以理解的。欢迎在你的应用程序上使用它,并与我分享你对此所做的任何改进。

相关问题