基本的な 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.js
てassest/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>