1

Cordova と jQuery Mobile を使用して、単純な 4 画面の Android アプリケーションを作成してきました。さまざまな画面が、data-role="page" 属性を持つ DIV として HTML の 1 ページ内に配置されます。基本的に、複数ページのサンプル テンプレートを jQuery Mobile のドキュメントからコピーしました。

http://jquerymobile.com/test/docs/pages/page-anatomy.html

ページ間のナビゲーションは、各ページの下部に固定されたナビゲーション バーを介して行われます。ここでも、jQuery Mobile ドキュメントで提案されているコードをほとんど変更せずに使用しました。

<div data-role="footer" data-id="appNavBar" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#homePage" data-icon="home" data-transition="none" class="ui-btn-active ui-state-persist">Home</a></li>
            <li><a href="#historyPage" data-icon="grid" data-transition="none">History</a></li>
            <li><a href="#settingsPage" data-icon="gear" data-transition="none">Settings</a></li>
            <li><a href="#aboutPage" data-icon="info" data-transition="none">About</a></li>
        </ul>
    </div>
</div>

次のように、さまざまな Javascript ライブラリが HTML ページの head セクションに含まれています (application.js にはアプリのロジックが含まれています)。

<head> 
    <title>Redacted</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery/RedactedTheme.min.css" />
    <link rel="stylesheet" href="jquery/jquery.mobile.structure-1.1.0.min.css" />
    <link rel="stylesheet" href="application.css" />
    <script type="text/javascript" src="jquery/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.mobile-1.1.0.min.js"></script>
    <script type="text/javascript" src="flot/jquery.flot.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script> 
    <script type="text/javascript" charset="utf-8" src="statusbarnotification.js"></script>
    <script type="text/javascript" charset="utf-8" src="application.js"></script>
</head>

Cordova のロードが完了し、使用できるようになると、「deviceready」シグナルが発行されます。Cordova のドキュメントでは、すべてのセットアップ コードをそのシグナルに関連付けられたイベント リスナーにバインドすることを推奨しています。私はapplication.jsで次のようにしました：

function onDeviceReady() {
    console.debug("Cordova initialized.");
    setup();
}
document.addEventListener("deviceready", onDeviceReady);

setup() は、ブラウザーの Web SQL データベースとストレージから情報を読み取る関数であり (ここで定義されている Cordova API を使用)、アプリケーションの起動間でユーザー設定と使用情報を維持します。

問題は次のとおりです。jQuery Mobile は jQuery ajax メソッドを使用して最初のページの後に後続のページをロードし、そうすることで head セクションを取り除き、データを含む DIV に直接スキップするという印象を受けました。 -role="page" 属性と適切な ID。代わりに私が観察しているのは、アプリケーションの新しいページにアクセスするたびに、head セクションのスクリプトがリロードされているように見えることです。これは、セッションで初めてページにアクセスしたときに発生し、その後停止します。

Cordova が再初期化されており、deviceready 信号が再び発信されているようです。Eclipse で LogCat を使用すると、onDeviceReady 関数に配置したデバッグ メッセージを確認できます。setup() 関数も再度呼び出されています。これにより、処理が大幅に遅くなります。

私がどこで間違っているのか誰か知っていますか？Cordova が 1 回だけ読み込まれるようにする方法はありますか?

ありがとう、エヴァン

4

2 に答える 2

1

この問題は約9か月前のものであることは知っていますが、私の解決策が同じ問題を抱えている他の人に役立つ場合に備えて

HTML ごとに表示するページを作成しないでください。代わりに、各表示部分を独自の DIV に配置した 1 つの長い HTML ページを作成してください。data-role="page"

これで、ページを変更するときに、JQM の呼び出しを使用$.mobile.changePage()して表示ページを変更できます

たとえば、ページは次のようになります。

<div data-role="page" id="startingPage">
<p onClick="$.mobile.changePage('page2')">Page Link</p>
</div>

<div data-role="page" id="page2">
<p>more content here</p>
</div>

これはほとんどの Web 開発にとって直感に反するように思えますが、PhoneGap と JQM を使用することは、標準の Web 開発では作業しないことを意味します

于 2013-03-25T16:12:13.840 に答える
1

phonegap facebook connect プラグインを使用しても同じ問題が発生します。唯一の回避策は、アプリ全体を 1 つの HTML ドキュメントとして設計し、パネルを異なる画面として表示および非表示にすることです。パネルを別々のファイルに保持したい場合は、require.js のようなものを使用できます。

于 2012-07-19T18:39:32.153 に答える