8

PhoneGap と jQuery Mobile を使用してアプリケーションを開発しています。

アプリケーションの Android バージョンを完成させました。Adobe PhoneGap ビルドを使用してアプリケーションをビルドしています。Android版は問題なく動作しています。しかし今、私は Windows Phone 8 バージョンのアプリをテストしようとしています。

app.xapVisual Studio 2012 エミュレーターでPhoneGap ビルドをテストしました。jQuery モバイルが機能していないようです。テスト目的で、サンプル アプリを作成しました。2jQuery mobileページ付き。それも機能していません。

私を助けてください。どんな種類の助けでも大歓迎です。ありがとう、=) どこが間違っているのか教えてください。

私のサンプルコードを貼り付けます:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]-->
    <link rel="stylesheet"  href="css/index.css" />
    <link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />

    <title>Hello World</title>
</head>
<body>
    <div data-role="page" id="page1">
<div data-theme="a" data-role="header">
    <h3>
        Header
    </h3>
</div>
<div data-role="content">
    <a data-role="button" href="#page2">
        Button
    </a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
    <h3>
        Footer
    </h3>
</div>
</div>

    <div data-role="page" id="page2">
<div data-role="content">
    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false"
    width="288" height="200">
    <a data-role="button" href="#page1">
        Button
    </a>
    <div data-role="navbar" data-iconpos="top">
        <ul>
            <li>
                <a href="#page1" data-transition="fade" data-theme="" data-icon="">
                    Button
                </a>
            </li>
        </ul>
    </div>
</div>
</div>
    <script type="text/javascript" src="cordova-2.5.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
     <script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.2.0.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>
</html>

これは私が出力として得たものです：

ここに画像の説明を入力

これは私が必要なものです:

ここに画像の説明を入力

4

6 に答える 6

5

jQuery Mobile は Windows Phone 8 を公式にはサポートしていません。サポートされているプラ​​ットフォームを参照してください: http://jquerymobile.com/gbs/

于 2013-03-06T05:26:47.010 に答える
0

実際、JQuery モバイルは Windows Phone 8 で正常に動作します。

js ファイルをロードする正しい順序は次のとおりです。

JQuery 自体をロードします。JQuery Mobile css ファイルのみを読み込みます。カスタム スクリプトと CSS をロードします。必要に応じて phonegap (cordova) をロードします。JQuery Mobile を最後のものとしてロードします。

この順序は、Windows phone 8 (デバイスまたは VS2012 エミュレーター) を含む任意のデバイスで正常に機能します。通常、このすべてのものを index.html の HEAD セクションにロードします。疑問がある場合は、ここで説明されているように、Cordova テンプレートを使用して VS2012 でプロジェクトを直接テストできます。

この助けを願っています。

于 2013-04-25T08:52:40.487 に答える
0

Cordova ファイルを HEAD に配置し、それがページ内の最初の JS ファイルであることを確認します。

JQMはWindows Phoneで正常に動作します...私はあなたと同様の問題を抱えていましたが、これで修正されました。

于 2013-04-02T07:26:51.183 に答える
0

以下のようにページを変更し、エミュレータがインターネットにアクセスできることを確認してください

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]-->
    <link rel="stylesheet"  href="css/index.css" />
    <link rel="stylesheet"  href="http://jquery.mobile/jquery.mobile-1.1.0.css" />
    <script type="text/javascript" src="http://jquery.mobile/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://jquery.mobile/jquery.mobile-1.2.0.js"></script>
    <script type="text/javascript" src="cordova-2.5.0.js"></script>

    <title>Hello World</title>
</head>
<body>
    <div data-role="page" id="page1">
<div data-theme="a" data-role="header">
    <h3>
        Header
    </h3>
</div>
<div data-role="content">
    <a data-role="button" href="#page2">
        Button
    </a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
    <h3>
        Footer
    </h3>
</div>
</div>

    <div data-role="page" id="page2">
<div data-role="content">
    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false"
    width="288" height="200">
    <a data-role="button" href="#page1">
        Button
    </a>
    <div data-role="navbar" data-iconpos="top">
        <ul>
            <li>
                <a href="#page1" data-transition="fade" data-theme="" data-icon="">
                    Button
                </a>
            </li>
        </ul>
    </div>
</div>
</div>

    <script type="text/javascript" src="js/index.js"></script>

    <script type="text/javascript">
        app.initialize();
    </script>
</body>
</html>
于 2013-03-06T05:52:14.207 に答える
0

Windows8 の VS2012 の WP8 エミュレーターでも同じ問題が発生しています。jQuery ファイルのローカル コピーを作成すると、機能します。CDN からロードしようとしてもロードされません。

<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>

動作します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

機能せず、スタイリングされていないように見えます。

すべての Jquery および Jquery モバイル js ファイルと CSS ファイルのローカル コピーを作成したところ、JQM UI は期待どおりに見えました。

ただし、エミュレーターのホワイトリスト機能が正しく機能していないかどうかは、まだ興味があります。または、そのままでは正しく動作しない hyper-v スイッチ マネージャーの構成がある場合。

于 2013-06-16T05:35:44.850 に答える