0

Monaca Cloud IDE、Onsen-ui、PhoneGap/Cordova を使用して簡単なアプリを作成しています。アプリはメインページと設定ページのみなので、Monaca/Onsen-UI が提供する「Minimal Template」を使用しています。つまり、条件が満たされたときに3ページ目を動的にロードしたいのです。ダウンロード後にアプリを初めて開いたときに「ようこそ」画面をロードしたいのですが、その後はロードしません。データベースの統合があるので、データベースに簡単な挿入を作成して、アプリのユーザーの使用を記録できると考えました。アプリを開くと、データベースを確認するための簡単なクエリを呼び出すことができ、使用の記録が存在する場合は、「ようこそ」画面が読み込まれないはずです。

現時点では、「ようこそ」画面を強制的にロードして、条件を書き始める前に機能することを確認したいだけです。

これが私の標準の index.html ページです。

<!DOCTYPE HTML>
<html ng-app="myAp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
      ons.bootstrap();  
    </script>
  </head>

  <body>
    <ons-navigator var="myNavigator" page = "page1.html">
    </ons-navigator> 
  </body>

</html>

いろいろ試してみました。Onsen-UI と Monaca の両方のドキュメントを読むのに何時間も費やしました。ドキュメントが非常に曖昧であることは、非常にイライラします。

私が試したことのいくつか：

<script>
  myNavigator.insertPage(0, "welcomePage.html", [animation:"lift"]);
</script>

また

<script>
  $scope.myNavigator.insertPage(0, "welcomePage.html", [animation:"lift"]);
</script>

pushPage() も試しましたが、うまくいきませんでした。

また、通常の HTML として扱い、にid="pageNav"属性を追加してから、<ons-navigator>これを実行してみました。

<script>
  var onsNav = document.getElementById("pageNav");
  onsNav.page = "welcomePage.html";
</script>

それのどれにも運がありません。

誰かがこれを手伝ってくれませんか、私は気が狂っているように感じます。ドキュメントへのリンクを教えてください。ドキュメントへのリンクを提供したい場合は、少なくとも補足説明を追加するか、特定の問題を解決する方法を教えてください。

前もって感謝します！

編集:上記の質問に回答があり、完全に機能します。以下はフォローアップの質問です。

フォローアップの質問: ページをスタックからポップしようとしていますが、うまくいかないようです。スタックにプッシュされたページにボタンがあり、そのボタンには onclick イベントがあります。onclick イベントは js 関数を起動します。関数は次のようになります。

function navToHome()
  {
    myNavigator.popPage({animation:fade});
  }

私も試しました：

ons.myNavigator.popPage({animation:fade});

私は何を間違っていますか？

編集:スクリプトがまったく起動していないことがわかりました:

上記の関数が起動しないことがわかりました。スクリプト タグを移動しました。タグの内側か外側かは関係ありません<ons-page>。最初の問題の解決策のように onReady 関数の中に入れてみましたが、それもうまくいきませんでした。

4

1 に答える 1

1

これは非常に簡単に説明できます。Onsen UI は、他のライブラリと同様に、最初の読み込みに時間がかかります。ロードが完了するまで待つ必要があります。について読むことができるドキュメントではons.ready( callback )、コールバックを実行する前に、基本的に Onsen UI と Cordova がロードされるまで待機します。この方法は、ドキュメントに沿ったほとんどのサンプルで実際に使用されているため、十分な例があると思います。あなたの場合、次のようにする必要があります。

<script>
  ons.bootstrap();

  ons.ready(function() {
    myNavigator.pushPage('welcomePage.html', {animation: 'lift'});
  });
</script>

AngularJS を使用する場合はons.ready( ... )、最初のコントローラー内に配置することもできます。

オプション パラメータが pushPage/insertPage/etc にあることに注意してください。ナビゲーターのリファレンス ページ でわかるように、配列ではなくオブジェクトです。[parameter]は、パラメーターが配列ではなくオプションであることを意味します。

それが役に立てば幸い！

于 2015-12-08T02:14:32.167 に答える