6

基本的な Phonegap チュートリアル (Eclipse、Android SDK、ADT Phonegap) のすべての手順に従い、assets/www フォルダーに HMTL ページを作成して実行すると、hello world html.

ステップ 2: CDN 上の jQuery Mobile への参照を HTML ページに追加しました。うまくいきました。

ステップ 3: 新しい html ページを作成し、Phonegap サイトのサンプルである以下のコードをコピーして貼り付けましたが、何もしません。アラートすらありません (何かが発生したかどうかを確認するためにいくつかのアラートを追加しましたが、onDeviceReady イベントでさえ発生しません。

ディレクトリに Phonegap JAR が配置されcordova-1.7.0.jsassest/wwwいますが、何かが不足している可能性があります。

誰かが私を助けることができますか?

Phonegap サイトの別のサンプル (「デバイス プロパティ」サンプル) も試しましたが、それでも機能しません。

これは Eclipse の新規インストールです。Android のバージョンを 2.3.3 に設定し、Phonegap 1.7.0 を使用しています。

================

編集

もう少し試してみたところ、エラーを再現できるようになりましたが、なぜ発生するのかわかりません。

そこで、Phonegap サンプル プロジェクトを使用して新しいプロジェクトを作成しました。

そのため、そのプロジェクトのすべてのアセット (1 つの html、2 つの js、および 1 つの css) を自分のプロジェクトにコピーし、(アクティビティ クラスからの) その html でアプリを開始すると、動作します。

そして今、楽しい部分(ではない):スタートページを「古い」index.html(jQueryモバイル)にリセットし、サンプルhtmlへのリンクをクリックしましたが、機能しません。

したがって、スタートアップとしてのhtmlの例: 動作しますが、リンクを介して開いたhtmlの例: 動作しません。

また、スタート ページとして機能しない他の html ページをロードすると、スタート ページから開くのではなく、それらも機能します。

では、私の jQuery Mobile を利用したインデックス ページが問題を引き起こす可能性はありますか? (以下のコードをコピーして貼り付けます)。

EDIT2: jQuery Mobile 以外のインデックス ページを使用<A href>し、例の html への通常のリンクにリンクすると、それも機能します。つまり、jQuery モバイルが私の邪魔をしていると思うという事実がますます暗示されています...

リンクコードは次のとおりです。

<li><a href="index4.html" data-transition="none">phonegap example</a></li>

jQuery Mobile ホームページ:

<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <link rel="stylesheet" href="http://www.verfrisser.net/kalender/mobile/verfrisser.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
</head>
<body>
  <div data-role="page">

    <div data-role="header">
        <h1>De NerdNight kalender</h1>
        <a href="about.html" data-rel="dialog">About</a><a href="genereren.html" data-transition="pop">Genereren</a>
    </div><!-- /header -->

    <div data-role="content">
        <img id="verfrisserlogo" src="verfrisserlogo.png" />
        <ul data-role="listview" data-inset="true" data-filter="false">
            <li><a href="2011.html" data-transition="none">2011</a></li>
            <li><a href="2012.html" data-transition="none">2012</a></li>
            <li><a href="2013.html" data-transition="none">2013</a></li>
            <li><a href="testing.html" data-transition="none">testing</a></li>
            <li><a href="testing2.html" data-transition="none">testing2</a></li>
            <li><a href="testing3.html" data-transition="none">testing3</a></li>
            <li><a href="index4.html" data-transition="none">phonegap example</a></li>
        </ul>
    </div><!-- /content -->

    <div data-role="footer">
        <h6>(C) Verfrisser 1998 till now</h6>
    </div><!-- /footer -->
</div><!-- /page -->
</body>
</html>

================

サンプル HTML (ページ内に「ダイアログ ボックスでネットワーク状態が報告されます」というテキストのみが表示されます)

<!DOCTYPE html>
<html>  
<head>    
    <title>navigator.network.connection.type Example</title>    
    <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script> 
 <script type="text/javascript" charset="utf-8">    
   // Wait for Cordova to load    //    
   document.addEventListener("deviceready", onDeviceReady, false);  
   // Cordova is loaded and it is now safe to make calls Cordova methods   
    alert ('stand alone');
   //    
   function onDeviceReady() {
    alert ('onDeviceReady'); 
   checkConnection();   
   }    
   function checkConnection() {        
   var networkState = navigator.network.connection.type;        
   var states = {};       
   states[Connection.UNKNOWN]  = 'Unknown connection';        
   states[Connection.ETHERNET] = 'Ethernet connection';        
   states[Connection.WIFI]     = 'WiFi connection';       
   states[Connection.CELL_2G]  = 'Cell 2G connection';   
   states[Connection.CELL_3G]  = 'Cell 3G connection';   
   states[Connection.CELL_4G]  = 'Cell 4G connection';   
   states[Connection.NONE]     = 'No network connection';
   alert('Connection type: ' + states[networkState]); 
   }  

</script> 
</head>  
<body>
    <p>A dialog box will report the network state.</p>  
</body>
</html>
4

3 に答える 3

9

デフォルトの動作では、次のページが DOM 要素として読み込まれるため、JavaScriptdevicereadyが再度呼び出されることはありません。

通常の方法で実行するには、次のいずれかの方法を試してください。

<li><a href="testing2.html" data-transition="none" rel="external">testing2</a></li>

または

<li><a href="testing2.html" data-transition="none" data-ajax="false">testing2</a></li>

説明:

リンクがクリックされると、jQuery モバイルはリンクがローカル URL を参照していることを確認し、そうであれば、リンクのデフォルトのクリック動作が発生するのを防ぎ、代わりに Ajax を介して参照された URL を要求します。ページが正常に返されると、location.hash が新しいページの相対 URL に設定されます。

Ajax リクエストが成功すると、新しいページ コンテンツが DOM に追加され、すべてのモバイル ウィジェットが自動初期化され、新しいページがアニメーション化されてページ遷移が表示されます。

詳細については、ドキュメントを確認してください

于 2012-06-15T20:08:31.297 に答える
1

コードにバグがない限り。この上記のコード構造は、うまく構成されていません。2 ページ目ではなく、最初のページの先頭で phonegap と jquery モバイル JavaScript について言及しました。ヘッドにjqueryモバイルjavascriptファイルはありません。

私の知識からの事実:

  • ある jquery モバイル ページから別の jquery モバイル インクルード ページへの Jquery トランジションを実行できます。
  • 標準ライブラリ ファイルを両方のヘッダーに含めます。

これはあなたの仕事をします。

于 2012-06-15T09:28:54.013 に答える
0

@Coder_sLaY が言及した xml ファイルを追加したら、jQuery Mobile JS ファイル (CDN URL) をロードしているサーバーを、cordova.xml の許可されたサーバーのホワイトリストに追加する必要があります。

于 2012-06-11T16:27:23.970 に答える