Using jQuery Mobile with phonegap

问题

I am developing an android application using phonegap for android. As jQuery mobile provide us rich ui components. So I have choose to use jQuery mobile.

Now the problem is that when I am using jQuery mobile it is deceasing application performance. Means the loading time has been increased. So I just want to know how to use them properly so the application performance will not get affected.

Presently I am inserting like this.

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
    href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script
    src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>

回答1:

I suggest you to package jquery inside your asset/www just like Jason said. Then add : android:hardwareAccelerated="true" Inside tag in androidmanifest.xml like this :

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:hardwareAccelerated="true"
        android:theme="@style/AppTheme" >
        <activity

This will render your webview using GPU.

Dont forget to target latest or atleast ICS version for compiling. It can be done in first creation of your apps or edit your androidmanifest.xml :

 <uses-sdk
        android:minSdkVersion="9"
        android:targetSdkVersion="16" />

This method proofed worked with my apps. :D

回答2:

Well I would package the jquery libraries with the phoengap application. that way you won't be fetching the resources each time you launch the app from code.jquery.com. This would make your HTML look like this:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/scripts/jquery.mobile-1.2.0.min.css" />
<script src="/scripts/jquery-1.8.2.min.js"></script>
<script src="/scripts/jquery.mobile-1.2.0.min.js"></script>

回答3:

You can use backbone with jQuery mobile template which I integrated it and tested it on phonegap and it works like a charm

回答4:

Beside packaging the jquery libraries with the app you could disable all animations to increase responsiveness, especially on Android devices (animations seems to work reasonable on iOS devices).

// Suppress all page transitions
$(document).bind('pageinit', function (){
    $.mobile.defaultPageTransition = 'none';
});

来源：https://stackoverflow.com/questions/15062045/using-jquery-mobile-with-phonegap