PhoneGap的不工作在Android模拟器 [英] Phonegap not working in Android emulator

查看:206
本文介绍了PhoneGap的不工作在Android模拟器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我遵循的基本PhoneGap的教程(Eclipse中的Andr​​oid SDK,ADT PhoneGap的)所有的步骤,我的资产/网络文件夹中创建一个HMTL页,运行它,而事实证明,我的的Hello World HTML

步骤2:我添加了一个引用jQuery Mobile的一个CDN在我的HTML页面。它的工作

步骤3:我创建了一个新的HTML网页,复制粘贴低于code,这是从PhoneGap的部位的样本,它也什么都没有。甚至不是一种警报(我加了一些警报,看看是否有事情发生,但即使是onDeviceReady不会触发事件。

我有PhoneGap的JAR的地方,在我的入资产/ WWW的科尔多瓦-1.7.0.js 目录中的事,但可能缺失。

有人能帮助我吗?

我也试过从PhoneGap的网站(以下简称设备属性样本)另一个样本,但它仍然无法正常工作。

这是一个全新的Eclipse安装,我给自己定了Android版本2.3.3,我使用PhoneGap的1.7.0。

=====

修改

我尝试了一些更多的,我现在就可以重现错误,但不知道为什么会发生。

因此​​,我创建与PhoneGap的例子项目中的新项目,它的工作原理。

所以,我复制了所有的资产从该项目(1 HTML,JS 2和1的CSS),以我的项目,让应用程序启动与HTML(从我的活动课),和它的作品。

现在最有趣的部分(不):我重新设置起始页到我的老的index.html(这是jQuery Mobile的),然后点击一个链接,例如HTML,它不工作

所以,例如HTML作为启动:它的工作原理,例如HTML通过链接打开:不工作

当我装我的其他HTML页面而没有作为起始页工作,而不是通过启动页面打开它们,他们的工作了。

所以,我的jQuery Mobile的索引页面会导致麻烦的是这可能吗? (我会复制粘贴code以下)。

EDIT2:当我使用非jQuery Mobile的索引页,我有一个正常的&LT链接; A HREF> 链接例如HTML,它也适用。所以这是暗示越来越多的事实,我认为jQuery Mobile的是我的路......

链接code是这样的:

 <李>< A HREF =index4.html数据转换=无>的PhoneGap例如< / A>< /李>
 

在jQuery Mobile的主页:

 < HTML>
< HEAD>
    <冠军>< /标题>
    < META NAME =视口内容=WIDTH =装置宽度,初始规模= 1>
    <链接相对=样式表的href =HTTP://$c$c.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css/>
    <链接相对=样式表的href =htt​​p://www.verfrisser.net/kalender/mobile/verfrisser.css/>
    &所述;脚本的src =的http://$c$c.jquery.com/jquery-1.6.4.min.js>&所述; /脚本>
    &所述;脚本的src =的http://$c$c.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js>&所述; /脚本>
    <脚本类型=文/ JavaScript的字符集=utf-8SRC =科尔多瓦 -  1.7.0.js>< / SCRIPT>
< /头>
<身体GT;
  < D​​IV数据角色=页面>

    < D​​IV数据角色=头>
        < H1>德NerdNight kalender< / H1>
        < A HREF =about.html数据相对=对话框中的>关于< / A>< A HREF =genereren.html数据转换=啪> Genereren< / A>
    < / DIV><! -  /头 - >

    < D​​IV数据角色=内容>
        < IMG ID =verfrisserlogoSRC =verfrisserlogo.png/>
        < UL数据角色=列表视图数据插入=真正的数据过滤器=假>
            <李>< A HREF =2011.html数据转换=无> 2011< / A>< /李>
            <李>< A HREF =2012.html数据转换=无> 2012< / A>< /李>
            <李>< A HREF =2013.html数据转换=无> 2013< / A>< /李>
            <李>< A HREF =testing.html数据转换=无>测试< / A>< /李>
            <李>< A HREF =testing2.html数据转换=无> testing2< / A>< /李>
            <李>< A HREF =testing3.html数据转换=无> testing3< / A>< /李>
            <李>< A HREF =index4.html数据转换=无>的PhoneGap例如< / A>< /李>
        < / UL>
    < / DIV><! -  /内容 - >

    < D​​IV数据角色=页脚>
        < H6>(三)1998年Verfrisser至今< / H6>
    < / DIV><! -  /页脚 - >
< / DIV><! -  /页 - >
< /身体GT;
< / HTML>
 

=====

样本HTML(只显示文本对话框将报告网络状态页面)

 <!DOCTYPE HTML>
< HTML>
< HEAD>
    <冠军> navigator.network.connection.type例< /标题>
    <脚本类型=文/ JavaScript的字符集=utf-8SRC =科尔多瓦 -  1.7.0.js>< / SCRIPT>
 <脚本类型=文/ JavaScript的字符集=utf-8>
   //等待科尔多瓦加载//
   document.addEventListener(deviceready,onDeviceReady,假);
   //科尔多瓦被加载,这是现在可以安全地进行呼叫科尔多瓦方法
    警报('独立');
   //
   传播onDeviceReady(){
    警报('onDeviceReady');
   checkConnection();
   }
   功能checkConnection(){
   VAR networkState = navigator.network.connection.type;
   变种状态= {};
   国家[Connection.UNKNOWN] ='未知连接;
   国家[Connection.ETHERNET] ='以太网连接;
   国家[Connection.WIFI] ='WiFi连接;
   国家[Connection.CELL_2G] ='细胞2G连接;
   国家[Connection.CELL_3G] ='细胞3G连接;
   国家[Connection.CELL_4G] ='细胞4G连接;
   国家[Connection.NONE] ='无网络连接;
   警报(连接方式:+国[networkState]);
   }

< / SCRIPT>
< /头>
<身体GT;
    < P> A对话框将报告网络状态< / P>
< /身体GT;
< / HTML>
 

解决方案

通过默认行为下一个页面都会被载入DOM元素使的JavaScript deviceready 不会再次调用。

试着用这些方式来运行它正常的方式之一:

 <李>< A HREF =testing2.html数据转换=无相对=外部> testing2< / A>< /李>
 

 <李>< A HREF =testing2.html数据转换=none的数据AJAX =假> testing2< / A>< /李>
 

说明:

  

当点击一个链接,jQuery Mobile的将确保链接   引用一个本地的URL,如果是的话,它会prevent链接的默认   点击行为的发生,并要求通过Ajax引用网址   代替。当页面成功返回时,它将设置   的location.hash到新页面的相对URL。

     

如果Ajax请求是成功的,新的页面内容被添加到DOM,所有移动小窗口是可自动初始化,则新的页面是动画进入视野与页面过渡

有关详细信息查看 DOC

I followed all the steps in the basic Phonegap tutorial (Eclipse, Android SDK, ADT Phonegap), I created an HMTL page in the assets/www folder, ran it, and it showed my hello world html.

Step 2: I added a reference to jQuery Mobile on a CDN in my HTML page: it worked.

Step 3: I created a new html page, copy-pasted the code below, which is a sample from the Phonegap site, and it does... nothing. Not even an alert (I added some alerts to see if something happens, but even the onDeviceReady event doesn't fire.

I have the Phonegap JAR in place, the cordova-1.7.0.js in my assest/www directory, but something is probably missing.

Can someone help me out?

I also tried another sample from the Phonegap site (the 'device properties' sample), but it still doesn't work.

It's a fresh Eclipse install, I've set the Android version to 2.3.3 and I'm using Phonegap 1.7.0.

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

EDIT

I tried some more, and I now can reproduce the error, but don't know why it happens.

So I created a new project with the Phonegap example project, it works.

So, I copied all the assets from that project (1 html, 2 js and 1 css) to my projects, let the app start with that html (from my activity class), and it works.

And now for the fun part (not): I reset the startpage to my 'old' index.html (which is jQuery mobile), and then clicked on a link to the example html, it does NOT work.

So example html as startup: it works, example html opened via the link: does NOT work.

And when I loaded my other html pages which didn't work as start page, instead of opening them via the start page, they work too.

So, is it possible that my jQuery Mobile-powered index page causes trouble ? (I'll copy-paste the code below).

EDIT2: When I use a non-jQuery Mobile index page and I link with a normal <A href> link to the example html, it also works. So that's hinting more and more to the fact that I think jQuery mobile is in my way...

The link code is this:

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

The jQuery Mobile home page:

<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>

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

The sample HTML (which only shows the text 'A dialog box will report the network state' in the page)

<!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>

解决方案

With default behavior the next page will be loaded as a DOM element so the javascript deviceready will not be called again.

Try with one of these ways to run it the normal way:

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

Or

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

Explanation:

When a link is clicked, jQuery mobile will make sure the link is referencing a local URL, and if so, it'll prevent the link's default click behavior from occurring and request the referenced url via Ajax instead. When the page returns successfully, it will set the location.hash to the new page's relative url.

If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.

For more detail info check the doc

这篇关于PhoneGap的不工作在Android模拟器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆