使用带有 phonegap 的 jQuery Mobile

Question

我正在使用 phonegap for android 开发一个 android 应用程序。由于 jQuery mobile 为我们提供了丰富的 ui 组件。所以我选择使用jQuery mobile。

现在的问题是，当我使用 jQuery mobile 时，它​​会降低应用程序的性能。 表示加载时间已增加。所以我只想知道如何正确使用它们，以免影响应用程序性能。

目前我是这样插入的。

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

Answer 1

我建议您将 jquery 打包到您的资产/www 中，就像 Jason 所说的那样。 然后添加：android:hardwareAccelerated="true" androidmanifest.xml 中的内部标签，如下所示：

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

这将使用 GPU 渲染您的 webview。

不要忘记以最新或至少 ICS 版本为目标进行编译。它可以在您的应用程序的第一次创建或编辑您的 androidmanifest.xml 中完成：

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

经过验证的这种方法适用于我的应用程序。 :D

Answer 2

我会将 jquery 库与 phoengap 应用程序打包在一起。这样您就不会在每次从code.jquery.com 启动应用程序时获取资源。这将使您的 HTML 看起来像这样：

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

Answer 3

您可以将骨干与 jQuery mobile template 一起使用，我将它集成并在 phonegap 上对其进行了测试，它的工作原理就像一个魅力

Answer 4

除了将 jquery 库与应用程序一起打包之外，您还可以禁用所有动画以提高响应能力，尤其是在 Android 设备上（动画似乎在 iOS 设备上运行合理）。

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