Как сделать приложение для Android, написанное на jQuery Mobile and Phonegap

Im новое для веб-разработки и разработки приложений. Я могу делать приложения с помощью html5 и css3 без проблем. Но когда я использую jquery mobile, приложение не отображается должным образом. Как я могу это исправить. Это код, который я использовалКак сделать приложение для Android, написанное на jQuery Mobile and Phonegap

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

привет, что ур опубликован код не работает r ур просит шаги для jQM + приложение Phonegap, чтобы начать .. пожалуйста, ясно – codebreaker

что точно не отображается правильно? Можете ли вы разместить желаемый результат по сравнению с тем, что вы видите? какую версию JQM вы используете, какую версию PhoneGap, какой мобильный телефон вы тестируете, работает ли она на эмуляторе, какой SDK вы используете для развертывания? Какой цвет носков вы носите сегодня? –

Шаги для создания андроид приложение с помощью 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 + Android 4.2) glyphish значки не будут отображаться на устройстве, хотя они отлично отображаются в моем окне с ноутбуком.

Мне удалось показать это, избегая подчеркивания (_), предшествующего папке «_asset». То есть,

Переименовать имя папки "_asset" к "актива" с помощью файлового менеджера.
Редактирование CSS код из "URL (_asset/IMG/...." в "URL (актив/IMG/...." для того, чтобы соответствовать ранее изменения имени папки.

источник

2014-01-01 01:04:11 dageddy

Как сделать приложение для Android, написанное на jQuery Mobile and Phonegap

ответ

Смежные вопросы