个人中心
gpt4 book ai didi

javascript - 带有 build.phonegap.com 的 jQuery Mobile 和 Android 设备后退按钮

转载 作者：行者123 更新时间：2023-12-02 17:47:46 26 4
gpt4 key购买 nike

我正在使用 jquery mobile 和 Phonegap 开发 Android 移动应用程序。我是使用 Phonegap 开发 Android 应用程序的新手。我需要控制android中后退按钮的功能。我想要的是，如果我在特定页面上，并且如果我触摸后退按钮，则会出现提示询问“是否要退出该应用程序？”。我可以使用信息帮助来解决这个问题。

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" charset="UTF-8"/> 
    <link rel="stylesheet" href="themes/theme.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.2.min.css" />
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery.mobile-1.3.2.min.js"></script>
<script>
document.addEventListener('backbutton', backButtonCallback, false);

function backButtonCallback() {
navigator.notification.confirm('do you want to exit the app?',confirmCallback);
}
function confirmCallback(buttonIndex) {
if(buttonIndex == 1) {
    navigator.app.exitApp();
    return true;
}
else {
    return false;
}
}
</script>

</head>

XML:

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="hap" version="1.0">

    <name>APP</name>
    <description>Happy Au Pair</description>
    <author>Myname</author>        <gap:platforms>
            <gap:platform name="ios" />
            <gap:platform name="android" />
            <gap:platform name="webos" />
            <gap:platform name="symbian.wrt" />
            <gap:platform name="blackberry" project="widgets"/>
    </gap:platforms>
    <gap:plugin name="org.apache.cordova.dialogs" />
     <icon src="icon.png" />
    <preference name="phonegap-version" value="3.1.0" />

    <access origin="*" subdomains="true" />
    <access uri="*" subdomains="true" />
     <access uri="http://gcccs.org" subdomains="true" />
    <feature name="http://api.phonegap.com/1.0/network"/>
    <feature name="InAppBrowser">
<param name="android-package" value="org.apache.cordova.InAppBrowser" />
    </feature>
    <feature name="App">
    <param name="android-package" value="org.apache.cordova.App" />
</feature>

    <preference name="orientation" value="portrait" />
    <preference name="fullscreen" value="true" />
    <preference name="target-device" value="universal" />

    <icon src="res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:density="ldpi" />
<icon src="res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:density="mdpi" />
<icon src="res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:density="hdpi" />
<icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:density="xhdpi" />

<gap:splash src="res/screen/android/screen-ldpi-portrait.png"  gap:platform="android" gap:density="ldpi" />
<gap:splash src="res/screen/android/screen-mdpi-portrait.png"  gap:platform="android" gap:density="mdpi" />
<gap:splash src="res/screen/android/screen-hdpi-portrait.png"  gap:platform="android" gap:density="hdpi" />
<gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" />

</widget>

最佳答案

您需要为后退按钮添加事件监听器:

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

然后创建一个函数，在单击时运行您想要的任何内容:

function backButtonCallback() {
    navigator.notification.confirm('do you want to exit the app?',confirmCallback);
}

然后，如果用户愿意，则回调以关闭应用程序:

function confirmCallback(buttonIndex) {
    if(buttonIndex == 1) {
        navigator.app.exitApp();
        return true;
    }
    else {
        return false;
    }
}

此外，对于 PhoneGap Build，您需要将其添加到您的 config.xml 文件中:

<gap:plugin name="org.apache.cordova.dialogs" />

这将允许使用确认通知。

更新:

这是您的 html 的轻量模式:

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
                <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" charset="UTF-8"/>
                <link rel="stylesheet" href="themes/theme.min.css" />
                <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.2.min.css" />
                <script src="js/jquery-1.10.2.min.js"></script>
                <script src="js/jquery.mobile-1.3.2.min.js"></script>
                <script src="cordova.js">
                <script>
                function onLoad() {
                    document.addEventListener('deviceready', deviceReady, false);
                }

                function deviceReady() {
                    document.addEventListener('backbutton', backButtonCallback, false);
                }

                function backButtonCallback() {
                    navigator.notification.confirm('do you want to exit the app?',confirmCallback);
                    }
                function confirmCallback(buttonIndex) {
                    if(buttonIndex == 1) {
                    navigator.app.exitApp();
                    return true;
                    }
                else {
                    return false;
                    }
                }
                </script>

            </head>
            <body onload="onLoad()">

您需要确保始终包含 cordova.js，然后使用设备就绪事件监听器将确保在使用 API 执行任何操作之前加载 cordova。现在应该可以工作了。

关于javascript - 带有 build.phonegap.com 的 jQuery Mobile 和 Android 设备后退按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21611401/

26 4 0
文章推荐： javascript - 部分更新时隐藏？
文章推荐： opencv - 使用鱼眼镜头undistortPoints时断言失败
文章推荐： python - 无法在Windows x64系统上使用OpenCV安装Python
文章推荐： javascript - 如何使用javascript导航获取页面上的所有链接？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com