Question

我有一个简单的应用程序，有点像一个热身启动器来jgery on phonegap。我在我的模拟器上运行它运行得很好。布局看起来很好，就像它应该的那样。但是当我在我的设备上安装.apk（恰好是GALAXY S）时，我希望看到的html是关闭的。我的意思是说，在我的设备上它没有颜色，没有过渡，只有白色背景中的纯蓝色链接。我的javascript文件或css文件是否未正确包含在内？我完全是新手，请帮帮我。我只是跟着http://jquerymobile.com/，其中一个应该拖放布局并下载html，css，js文件并包含在你的项目中。我也跟着http://docs.phonegap.com/en/1.8.1/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android开始使用PhoneGap。

我的应用名称是'Settling'，java文件如下所示：

package maddy.application;
import android.app.Activity;
import org.apache.cordova.*;
import android.os.Bundle;

public class SettlingActivity extends DroidGap {
/** Called when the activity is first created. */

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.loadUrl("file:///android_asset/www/app.html");

}
}

我的android清单文件如下所示：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="maddy.application"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk android:minSdkVersion="8" />
<supports-screens 
android:largeScreens="true" 
android:normalScreens="true" 
android:smallScreens="true" 
android:resizeable="true" 
android:anyDensity="true" />
<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.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" />
<application
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name" >
    <activity
        android:name=".SettlingActivity"
        android:label="@string/app_name" android:configChanges="orientation|keyboardHidden">

        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

</manifest>

我的'app.html'看起来像这样：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
    </title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <link rel="stylesheet" href="maddytheme.css" />
    <style>
        /* App custom styles */
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
    </script>
    <script src="my.js">
    </script>
</head>
<body>
    <!-- Home -->
    <div data-role="page" id="page1">
        <div data-theme="a" data-role="header">
            <h5>
                Settlement
            </h5>
        </div>
        <div data-theme="a" data-role="header">
        </div>
        <div data-role="content" style="padding: 15px">
            <div data-role="navbar" data-iconpos="left">
                <ul>
                    <li>
                        <a href="#page1" data-theme="" data-icon="">
                            Users
                        </a>
                    </li>
                    <li>
                        <a href="#page1" data-theme="" data-icon="">
                            Money
                        </a>
                    </li>
                    <li>
                        <a href="#page1" data-theme="" data-icon="">
                            My name
                        </a>
                    </li>
                </ul>
            </div>
            <ul data-role="listview" data-divider-theme="b" data-inset="true">
                <li data-role="list-divider" role="heading">
                    Divider
                </li>
                <li data-theme="c">
                    <a href="#page1" data-transition="slide">
                        List here
                    </a>
                </li>
                <li data-theme="c">
                    <a href="#page1" data-transition="slide">
                        List 1
                    </a>
                </li>
                <li data-theme="c">
                    <a href="#page1" data-transition="slide">
                        List 2
                    </a>
                </li>
            </ul>
        </div>
        <div data-theme="a" data-role="footer" data-position="fixed">
        </div>
    </div>
    <script>
        //App custom javascript
    </script>
</body>

Answer 1

我想您可能忘记打开无线互联网连接或移动网络连接。我因此而面临同样的问题。否则，您只需将js文件本地放入您的应用程序中。

Answer 2

您是否whitelist正在加载CSS和JS的远程站点？看起来你需要添加：

http://code.jquery.com
http://ajax.googleapis.com

设备和仿真器的布局不匹配（phonegap + jquery mobile）

2 个答案: