2014-02-06 40 views
0

我正在開發一個使用jquery mobile和Phonegap的android移動應用程序。我是使用Phonegap開發android應用程序的新手。我需要在android中控制後退按鈕的功能。我想要的是如果我在特定的頁面上,並且如果我觸摸後退按鈕,會有提示詢問您是否要退出應用程序?我可以使用有關信息的幫助來解決這個問題。jQuery Mobile和Android設備後退按鈕與build.phonegap.com

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> 

回答

2

您將要添加的事件偵聽器的後退按鈕:

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的構建你將要添加到您的config.xml文件:

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

這將允許使用確認通知。

UPDATE:

這裏是一個光模到你的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做任何事情之前加載。這應該現在工作。

+0

是否有任何需要像js文件和/或config.xml中的添加使這項工作? – user3130849

+0

你使用build.phonegap.com還是建立本地? –

+0

我正在使用build.phonegap.com – user3130849