製作jQuery手機與PhoneGap的Android應用程序

基於谷歌地圖的jQuery Mobile應用程序在瀏覽器上運行良好，但我很難試圖把它包裝爲android application使用PhoneGap。我所得到的僅僅是純粹的HTML 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的不正確方式有關。我從加載庫。製作jQuery手機與PhoneGap的Android應用程序

除了一大堆其他的事情，在我的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。

我一直在試圖弄清楚沒有成功。

來源

2013-08-06 SASM

這可能是最好的，所有的jQuery文件/ css存儲在本地，而不是通過CDN，以避免簡單的問題，如白名單。這可能會解決一些問題（或至少是一個很好的測試來確保）。 –

通過CDN使用文件在Phonegap的情況下是一個記錄的問題？我不知道這一點，我會試試看。 – SASM

呃，當'域名白名單'的格式不正確時，它可能會成爲一個問題。例如，如果您使用的是PhoneGap Build，則存在「白名單」無法正常工作的錯誤。我不確定它是否已經解決，但這裏是關於該錯誤的主題。 [白名單錯誤]（http://community.phonegap.com/nitobi/topics/access_elements_not_working_on_android） –

正如我在評論中提到的，由於包含來自CDN的jQuery文件，問題出現了。 whitelisting很可能未正確格式化，或正確使用。

爲了解決這個問題，所有需要做的事情是使用本地版本的jQuery文件，而不是從CDN。

本地版本的文件還可以防止像用戶沒有互聯網連接和類似的問題的問題。

來源

2013-08-06 17:32:24

另一種啓動不使用JQuery的PhoneGap應用程序的方法，只需簡單的JavaScript即可。

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

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

另外，作爲德魯Boatright提到的，我認爲這是在本地存儲的JQuery文件，以及對他所提到的同樣的理由一個好主意，再加上如果有這會導致一些延遲在獲取代碼壞的互聯網連接從CDN，你不會希望你的應用程序凍結或崩潰。這通常是很好的做法，因爲如果你的用戶在沒有互聯網連接的情況下打開你的應用程序，你仍然希望應用程序打開並顯示一些內容，即使這只是一個消息，說明沒有互聯網連接的功能都不可用，比白屏或崩潰的應用程序更好。希望這可以幫助。

來源

2013-08-06 14:39:41

製作jQuery手機與PhoneGap的Android應用程序

回答

相關問題