Question

基于Google Maps的jQuery Mobile应用程序在浏览器上运行良好，但是我很难尝试使用android application将其包装为PhoneGap。我得到的只是no styling and javascript interaction的简单html。当然还有no map。我正在使用Eclipse on Windows 7 with android build target of 4.0。 AVD针对v 2.2 above。我认为问题主要与使用PhoneGap加载JQM的错误方式有关。我正在从CDN加载库。

除了很多其他内容之外，在我的logcat我也得到了以下内容：

TypeError: Result of expression 'e' [undefined] is not an object at http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js

ReferenceError: Can't find variable: $ at file:///android_asset/www/index.html:22

deviceready has not fired after 5 seconds. at file:///android_asset/www/cordova.js:6725

我的网页结构：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Application</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" 
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJWtBGtXPE9BeyZyEc8lFvi3I0fs_-7mY&sensor=false"></script>
    <script type="text/javascript" src="markerwithlabel_packed.js"></script>

    <script>
       var deviceReadyDeferred = $.Deferred();
       var jqmReadyDeferred = $.Deferred();
       document.addEventListener("deviceReady", deviceReady, false);

       function deviceReady() {
          deviceReadyDeferred.resolve();
       }

       $(document).one("pageinit", function () {
          jqmReadyDeferred.resolve();
       });

       $.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);

       function doWhenBothFrameworksLoaded() {
          //All my application logic goes here

       }
   </script>

   <style type="text/css">
     ...All my css
   </style>
  </head>

  <body>
      // My multipage template
  </body>

</html>

注意：我在同一页面中使用了所有的css和js。我没有单独的自定义js或css页面。

我按照我找到here的方法。

我一直试图弄清楚这一点并没有成功。

Answer 1

另一种启动不使用JQuery的PhoneGap应用程序的方法，只需简单的JavaScript即可。

<script>
  var initApp = function() {
    document.addEventListener("deviceReady", deviceReady, false);
  }
</script>

<body onload="initApp()">
  ....
</body>

同样正如Drew Boatright所提到的，我认为将JQuery文件本地存储在本地也是一个好主意，原因与他提到的相同，如果互联网连接不良导致从CDN获取代码有一些延迟，你不希望你的应用程序冻结或崩溃。这通常是一种很好的做法，因为如果您的用户在没有互联网连接的情况下打开您的应用程序，您仍然希望该应用程序打开并显示某些内容，即使它只是一条消息，指出没有互联网连接时没有任何功能可用，比白屏或崩溃的应用程序更好。希望这会有所帮助。

Answer 2

正如我在评论中提到的那样，问题来自于包含来自CDN的jQuery文件。 whitelisting很可能未正确格式化或正确使用。

要解决这个问题，所有需要做的就是使用本地版本的jQuery文件而不是CDN。

文件的本地版本还可以防止用户没有互联网连接等问题以及类似的各种问题。

使jQuery mobile与PhoneGap for Android应用程序一起工作

2 个答案: