莫纳卡温泉-ui 有条件的页面导航

Question

我正在使用 Monaca Cloud IDE、Onsen-ui 和 PhoneGap/Cordova 编写一个简单的应用程序。该应用程序将只有一个主页和一个设置页面，因此我使用 Monaca/Onsen-UI 提供的 "Minimal Template"。问题是，我想在满足条件时动态加载第 3 页。我想在下载后第一次打开应用程序时加载 "Welcome" 屏幕，但之后不会再加载。因为会有一些数据库集成，我想我可以对数据库做一个简单的插入，记录一个人对应用程序的使用。打开应用程序时，可以调用检查数据库的简单查询，如果存在使用记录，则不应加载 "Welcome" 屏幕。

目前我只想强制加载 "Welcome" 屏幕，只是为了在我开始编写条件之前检查它是否有效。

这是我的标准 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>

没有任何运气。

有人可以帮忙解决这个问题吗，我觉得我快疯了。请不要只给我 link 文档，我去过那里。如果你想给文档一个link，至少添加补充说明，或者告诉我如何解决我的具体问题。

提前致谢！

编辑：我的上述问题已得到解答并且效果很好。下面是追问：

只是一个后续问题：我现在正尝试将页面从堆栈中弹出，但它似乎不起作用。我在页面上有一个按钮被推送到堆栈，该按钮有一个 onclick 事件。 onclick 事件触发一个 js 函数，函数看起来像这样：

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

我也试过：

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

我做错了什么？

编辑：我发现脚本根本没有触发：

我发现上面的函数没有触发。我已经移动了脚本标签，不管它是在 <ons-page> 标签的内部还是外部。我也试过把它放在一个 onReady 函数中，就像第一个问题的解决方案一样，但这也没有用。

Answer 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 的选项参数。不是数组而是对象，正如您在 navigator reference page 中看到的那样。 [parameter]表示参数是可选的，不是数组。

希望对您有所帮助！

莫纳卡温泉-ui 有条件的页面导航

Monaca onsen-ui conditional page navigation

cordova

onsen-ui

monaca