0

基于 Google Maps 的 jQuery Mobile 应用程序在浏览器上运行良好，但是我很难尝试将其包装为android applicationusing PhoneGap. 我得到的只是带有no styling and javascript interaction. 当然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 页面。

我遵循了我在这里找到的方法。

我一直试图解决这个问题，但没有成功。

4

2 回答 2

0

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

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

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

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

于 2013-08-06T14:39:41.493 回答
0

正如我在评论中提到的，这个问题是由于包含了来自 CDN 的 jQuery 文件。whitelisting很可能没有正确格式化或正确使用 。

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

文件的本地版本还可以防止诸如用户没有 Internet 连接之类的问题以及诸如此类的各种问题。

于 2013-08-06T17:32:24.587 回答