2012-06-06 12 views
6

Seguí todos los pasos del tutorial básico de Phonegap (Eclipse, Android SDK, ADT Phonegap), creé una página HMTL en la carpeta assets/www, la ejecuté y mostró mi hello world html.Phonegap no funciona en el emulador de Android

Paso 2: Agregué una referencia a jQuery Mobile en un CDN en mi página HTML: funcionó.

Paso 3: Creé una nueva página html, copié y pegué el código siguiente, que es un ejemplo del sitio Phonegap, y no ... nada. Ni siquiera una alerta (añadí algunas alertas para ver si pasa algo, pero incluso el evento onDeviceReady no se dispara.

tengo el JAR Phonegap en su lugar, la cordova-1.7.0.js en mi directorio assest/www, pero algo es probable que falte.

Puede alguien ayudarme?

también probé otra muestra del sitio Phonegap (muestra las 'propiedades de los dispositivos'), pero todavía no funciona.

es una nueva instalación de Eclipse, Configuré la versión de Android en 2.3.3 y uso Phonegap 1.7.0.

================

EDITAR

He intentado un poco más, y ahora se puede reproducir el error, pero no saben por qué sucede .

Así que creé un nuevo proyecto con el proyecto de ejemplo Phonegap, funciona.

Copié todos los recursos de ese proyecto (1 html, 2 js y 1 css) en mis proyectos, dejo que la aplicación comience con ese html (de mi clase de actividad), y funciona.

Y ahora para la parte divertida (no): reinicié la página de inicio en mi 'viejo' index.html (que es jQuery mobile), y luego hice clic en un enlace al html de ejemplo, NO funciona.

Ejemplo html como inicio: funciona, ejemplo html abierto a través del enlace: NO funciona.

Y cuando cargué mis otras páginas html que no funcionaban como página de inicio, en vez de abrirlas a través de la página de inicio, también funcionan.

Entonces, ¿es posible que mi página de índice jQuery Mobile cause problemas? (Copiaré y pegaré el código a continuación).

EDIT2: Cuando uso una página de índice no jQuery Mobile y la enlace con un enlace <A href> normal al html de ejemplo, también funciona. Así que eso insinúa cada vez más el hecho de que creo que el móvil jQuery está en mi camino ...

El código de enlace es el siguiente:

<li><a href="index4.html" data-transition="none">phonegap example</a></li> 

La página principal de jQuery Mobile:

<html> 
<head> 
    <title></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <link rel="stylesheet" href="http://www.verfrisser.net/kalender/mobile/verfrisser.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
    <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script> 
</head> 
<body> 
    <div data-role="page"> 

    <div data-role="header"> 
     <h1>De NerdNight kalender</h1> 
     <a href="about.html" data-rel="dialog">About</a><a href="genereren.html" data-transition="pop">Genereren</a> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <img id="verfrisserlogo" src="verfrisserlogo.png" /> 
     <ul data-role="listview" data-inset="true" data-filter="false"> 
      <li><a href="2011.html" data-transition="none">2011</a></li> 
      <li><a href="2012.html" data-transition="none">2012</a></li> 
      <li><a href="2013.html" data-transition="none">2013</a></li> 
      <li><a href="testing.html" data-transition="none">testing</a></li> 
      <li><a href="testing2.html" data-transition="none">testing2</a></li> 
      <li><a href="testing3.html" data-transition="none">testing3</a></li> 
      <li><a href="index4.html" data-transition="none">phonegap example</a></li> 
     </ul> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h6>(C) Verfrisser 1998 till now</h6> 
    </div><!-- /footer --> 
</div><!-- /page --> 
</body> 
</html> 

================

El HTML de ejemplo (que solo muestra el texto 'Un cuadro de diálogo informará el estado de la red' en la página)

<!DOCTYPE html> 
<html> 
<head>  
    <title>navigator.network.connection.type Example</title>  
    <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script> 
<script type="text/javascript" charset="utf-8">  
    // Wait for Cordova to load //  
    document.addEventListener("deviceready", onDeviceReady, false); 
    // Cordova is loaded and it is now safe to make calls Cordova methods 
    alert ('stand alone'); 
    //  
    function onDeviceReady() { 
    alert ('onDeviceReady'); 
    checkConnection(); 
    }  
    function checkConnection() {   
    var networkState = navigator.network.connection.type;   
    var states = {};  
    states[Connection.UNKNOWN] = 'Unknown connection';   
    states[Connection.ETHERNET] = 'Ethernet connection';   
    states[Connection.WIFI]  = 'WiFi connection';  
    states[Connection.CELL_2G] = 'Cell 2G connection'; 
    states[Connection.CELL_3G] = 'Cell 3G connection'; 
    states[Connection.CELL_4G] = 'Cell 4G connection'; 
    states[Connection.NONE]  = 'No network connection'; 
    alert('Connection type: ' + states[networkState]); 
    } 

</script> 
</head> 
<body> 
    <p>A dialog box will report the network state.</p> 
</body> 
</html> 
+0

¿Ha añadido el permiso Android? ¿Has agregado cordova.xml y plugins.xml en res? –

+0

Sí, los permisos están en su lugar. Los 2 archivos xml no estoy seguro de haber leído sobre ellos en mi tutorial. ¿Puedes señalarme en la dirección correcta sobre ellos? – Michel

+0

En la carpeta res de la aplicación, debe agregar la carpeta xml que está presente en la carpeta lib del paquete de facsímil descargado. Esta carpeta xml contiene ambos xmls –

Respuesta

9

Con el comportamiento predeterminado, la página siguiente se cargará como un elemento DOM por lo que no se volverá a llamar al javascript deviceready.

Intenta con uno de estos modos de ejecutar es la forma normal:

<li><a href="testing2.html" data-transition="none" rel="external">testing2</a></li> 

O

<li><a href="testing2.html" data-transition="none" data-ajax="false">testing2</a></li> 

Explicación:

Cuando se hace clic en un enlace, jQuery Mobile hará Asegúrese de que el enlace sea haciendo referencia a una URL local y, de ser así, evitará que el enlacepredeterminadocomportamiento de clic que se produce y solicitar la url referenciada a través de Ajax en su lugar. Cuando la página vuelva a funcionar correctamente, configurará el location.hash en la url relativa de la página nueva.

Si la solicitud de Ajax es exitosa, el contenido de la nueva página se agrega al DOM, todos los widgets móviles se inicializan automáticamente, luego la nueva página se anima con una transición de página.

Para más detalle Info comprobar el doc

+1

Y.O.U. ROCK. He estado combatiendo este problema al menos 30 minutos todos los días durante la última semana, probando todo tipo de cosas y decepcionado cada vez. ¡Puedes imaginar la sonrisa en mi cara cuando esta respuesta hizo el truco! – Michel

+0

contento de que funcionó para usted. – dhaval

0

Una vez que añadir los archivos XML que @Coder_sLaY ha mencionado, es necesario agregar el servidor desde donde se va a cargar el archivo de jQuery Mobile JS (la URL CDN) a la lista blanca de servidores permitidos en cordova.xml

+0

¿qué es el archivo JQM? – Michel

1

Como Hasta ahora no hay errores en tu código. Esta estructura de código anterior no está bien construida. Usted mencionó el phonegap y jquery mobile javascript en el encabezado de la primera página y no en la segunda página. No tiene ningún archivo jvascript javascript móvil en la cabeza.

Datos de mi conocimiento:

  • Usted puede hacer la transición de la página jQuery jQuery móvil uno a otro jQuery Mobile incluyen página.
  • Incluya los archivos de biblioteca estándar en ambos encabezados.

Esto hará su trabajo.

+0

bien, voy a intentarlo – Michel

+0

intenté eso, ahora ambos archivos obtuvieron la referencia a cordova.js, jquery mobile y jquery normal, pero todavía no hubo suerte – Michel

Cuestiones relacionadas