Question

我是网络开发和应用开发的新手。我可以使用html5和css3制作应用程序没有问题。但是，当我使用jquery mobile时，应用程序无法正常显示。我该如何解决呢？这是我用过的代码

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

我希望你能帮助我。

此致

迈克尔

Answer 1

使用PhoneGap创建Android应用程序的步骤：

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.

Answer 2

对我来说（phonegap 3.x + android 4.2）虽然它们在我的Windows笔记本电脑上渲染得很好，但glyphish图标不会显示在设备上。

我设法通过避免“_asset”文件夹前面的下划线（_）来显示它。也就是说，

使用文件管理器将“_ asset ”文件夹名称重命名为“资产”。
将CSS代码从“ url（_asset / img /....”编辑为“ url（asset / img /....”）以便匹配先前的文件夹名称更改。

如何制作一个用jQuery Mobile和Phonegap编写的android应用程序

2 个答案: