如何製作一個用jQuery Mobile和Phonegap編寫的android應用程序

我不熟悉web開發和應用程序開發。我可以使用html5和css3製作應用程序，沒有任何問題。但是，當我使用jQuery的手機應用程序不正確顯示。我如何解決它。這是我使用的代碼如何製作一個用jQuery Mobile和Phonegap編寫的android應用程序

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, user-scalable=no"> 
    <title>Test App</title> 
    <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.2.min.css"> 
    <link rel="stylesheet" href="_assets/css/jqm-demos.css"> 
    <link rel="stylesheet" href="css/glyphish.css.css"> 
    <!-- <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"> --> 
    <script src="js/jquery.js"></script> 
    <script src="_assets/js/index.js"></script> 
    <script src="js/jquery.mobile-1.3.2.js"></script> 
    <script type="text/javascript" charset="utf-8" 
    src="cordova/cordova.js"></script> 
    <style> 
    .background {background:url(_assets/img/background.jpg)} 
    .toparea {background:#FFF} 
    .toparea { padding-top: 0.2px !important; padding-bottom: 0.2px !important } 
    .toparea {alignment-adjust:middle !important; } 
    </style> 
    <style> 
     .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; } 
     .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; } 
     #chat .ui-icon { background: url(_assets/img/glyphish-icons/53-house.png) 50% 50% no-repeat; background-size: 22px 22px; } 
     #email .ui-icon { background: url(_assets/img/glyphish-icons/157-wrench.png) 50% 50% no-repeat; background-size: 24px 24px; } 
     #login .ui-icon { background: url(_assets/img/glyphish-icons/42-photos.png) 50% 50% no-repeat; background-size: 22px 24px; } 
     #beer .ui-icon { background: url(_assets/img/glyphish-icons/80-shopping-cart.png) 50% 50% no-repeat; background-size: 26px 19px; } 
     #coffee .ui-icon { background: url(_assets/img/glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px; } 
    </style>  
</head> 
<body> 


<section data-role="page" class="background" id="home"> 
    <div class="toparea" data-theme="d" data-position="persistent"> 
     <h1>Test App</h1> 
    </div> 

    <div data-theme="d" data-role="footer" class="nav-glyphish-example" data-position="fixed"> 
     <div data-role="navbar" class="nav-glyphish-example" data-grid="d"> 
      <ul> 
       <li><a href="index.html" class="ui-btn-active" data-transition="flow" id="chat" data-icon="custom"></a></li> 
       <li><a href="services.html" data-transition="flow" id="email" data-icon="custom"></a></li> 
       <li><a href="gallery.html" data-transition="flow" id="login" data-icon="custom"></a></li> 
       <li><a href="products.html" data-transition="flow" id="beer" data-icon="custom"></a></li> 
       <li><a href="contact.html" data-transition="flow" id="coffee" data-icon="custom"></a></li> 
      </ul> 
     </div> 
    </div> 
</section> 

</body> 
</html>

我希望你能幫助我。

問候

邁克爾

來源

2013-10-11 Michael Magumise

嗨你是否發佈的代碼沒有運行，因此你需要爲jQM + Phonegap應用程序開始步驟。請清除 – codebreaker

什麼不能正確顯示？你能發佈期望的輸出還是你看到的？你使用的是哪種JQM版本？什麼PhoneGap版本？你正在測試的手機是什麼？它在仿真器上工作嗎？你用什麼SDK部署？你今天穿什麼襪子顏色？ –

步驟使用創建Android應用的PhoneGap：

1) Download latest phongap(cordova) zip file. 
2) Paste cordova.js file in www folder and link in index.html . 
3) Paste www folder in /Projectname/assets folder. 
4) Paste cordova-x.x.x.jar file in /Projectname/libs folder. 
5) Paste xml folder(which contain config.xml) in /Projectname/res folder. 
6) Add following code in /Projectname/AndroidManifest.xml 
<uses-permission android:name="android.permission.CAMERA" /> 
<uses-permission android:name="android.permission.VIBRATE" /> 
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" 
/> 
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" 
/> 
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" 
/> 
<uses-permission android:name="android.permission.READ_PHONE_STATE" /> 
<uses-permission android:name="android.permission.INTERNET" /> 
<uses-permission android:name="android.permission.RECEIVE_SMS" /> 
<uses-permission android:name="android.permission.READ_SMS" /> 
<uses-permission android:name="android.permission.RECORD_AUDIO" /> 
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" 
/> 
<uses-permission android:name="android.permission.READ_CONTACTS" /> 
<uses-permission android:name="android.permission.WRITE_CONTACTS" /> 
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" 
/> 
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" 
/> 
<uses-permission android:name="android.permission.GET_ACCOUNTS" /> 
<uses-permission android:name="android.permission.BROADCAST_STICKY" /> 

7) Add following code in /Projectname/src/com/example/packagename/MainActivity.java file. 

public class MainActivity extends DroidGap { 

    public MainActivity() { 
    super(); 
    }  
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState);  
    //init webview 
    this.init();   
    // Clear our cache (this is used mainly during development - comment out for production) 
    this.clearCache();  
    // Show splashscreen 
    //this.setIntegerProperty("Splashscreen",R.drawable.bg_splash); 
    this.setIntegerProperty("Splashscreen",R.drawable.ic_launcher); 
    // Load our app 
     this.loadUrl("file:///android_asset/www/index.html",3000); 

    } 
} 
8) Finally get compiled application package file(.apk file) from Projectname/bin folder.

來源

2013-10-11 14:30:13 Ved

對我（的PhoneGap 3.X +安卓4.2）的glyphish圖標不會顯示在設備上，儘管它們在我的窗口上渲染得很好筆記本電腦。

我設法通過避免「_asset」文件夾前面的下劃線（_）來顯示它。也就是說，

重命名「_asset」文件夾名稱爲「資產」使用文件管理器。
編輯從CSS代碼「URL（_asset/IMG/....」到「URL（資產/ IMG/....」以匹配前面的文件夾名稱更改。

來源

2014-01-01 01:04:11 dageddy

如何製作一個用jQuery Mobile和Phonegap編寫的android應用程序

回答

相關問題