6

我按照基本 Phonegap 教程(Eclipse、Android SDK、ADT Phonegap)中的所有步骤操作,在 assets/www 文件夹中创建了一个 HMTL 页面,运行它,它显示了我的hello world html.

第 2 步:我在我的 HTML 页面的 CDN 上添加了对 jQuery Mobile 的引用:它起作用了。

第 3 步:我创建了一个新的 html 页面,复制粘贴了下面的代码,这是来自 Phonegap 网站的示例,但它确实……什么都没有。甚至没有警报(我添加了一些警报以查看是否发生了某些事情,但即使 onDeviceReady 事件也不会触发。

我有Phonegap JAR,cordova-1.7.0.js在我的assest/www目录中,但可能缺少一些东西。

有人可以帮我吗?

我还尝试了 Phonegap 站点的另一个示例(“设备属性”示例),但它仍然无法正常工作。

这是一个全新的 Eclipse 安装,我将 Android 版本设置为 2.3.3,我使用的是 Phonegap 1.7.0。

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

编辑

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

所以我用 Phonegap 示例项目创建了一个新项目,它可以工作。

因此,我将该项目中的所有资产(1 个 html、2 个 js 和 1 个 css)复制到我的项目中,让应用程序从该 html(来自我的活动类)开始,它就可以工作了。

现在是有趣的部分(不是):我将起始页重置为我的“旧”index.html(这是 jQuery 移动版),然后单击指向示例 html 的链接,它不起作用。

因此,作为启动的示例 html:它可以工作,通过链接打开的示例 html:不起作用。

当我加载我的其他 html 页面时,这些页面不能作为起始页面,而不是通过起始页面打开它们,它们也可以工作。

那么,我的 jQuery Mobile 驱动的索引页面会不会造成问题?(我将复制粘贴下面的代码)。

EDIT2:当我使用非 jQuery Mobile 索引页面并通过普通<A href>链接链接到示例 html 时,它也可以工作。所以这越来越多地暗示我认为 jQuery mobile 挡住了我的路……

链接代码是这样的:

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

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>

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

示例 HTML(仅在页面中显示文本“对话框将报告网络状态”)

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

3 回答 3

9

使用默认行为,下一页将作为 DOM 元素加载,因此deviceready不会再次调用 javascript。

尝试使用以下方法之一以正常方式运行它:

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

或者

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

解释:

单击链接时,jQuery mobile 将确保链接引用本地 URL,如果是,它将阻止链接的默认单击行为发生,并改为通过 Ajax 请求引用的 URL。当页面返回成功时,它会将 location.hash 设置为新页面的相对 url。

如果 Ajax 请求成功,则将新页面内容添加到 DOM,自动初始化所​​有移动小部件,然后通过页面转换将新页面动画化到视图中。

有关更多详细信息,请查看文档

于 2012-06-15T20:08:31.297 回答
1

只要您的代码中没有错误。上面的代码结构不是很好构造的。您在第一页而不是在第二页中提到了 phonegap 和 jquery mobile javascript。它的头部没有任何 jquery mobile javascript 文件。

据我所知的事实:

  • 您可以从一个 jquery 移动页面到另一个 jquery 移动包含页面进行 Jquery 转换。
  • 在两个头文件中包含标准库文件。

这将完成你的工作。

于 2012-06-15T09:28:54.013 回答
0

添加@Coder_sLaY 提到的xml 文件后,您需要将加载jQuery Mobile JS 文件(CDN URL)的服务器添加到cordova.xml 中允许的服务器的白名单中

于 2012-06-11T16:27:23.970 回答