0

我正在使用 Monaca Cloud IDE、Onsen-ui 和 PhoneGap/Cordova 编写一个简单的应用程序。该应用程序将只有一个主页和一个设置页面，因此我使用的是 Monaca/Onsen-UI 提供的“最小模板”。事情是，我想在满足条件时动态加载第三页。我想在下载后第一次打开应用程序时加载“欢迎”屏幕，但之后不再加载。因为会有一些数据库集成，所以我想我可以对数据库进行简单的插入，记录一个人对应用程序的使用情况。打开应用程序时，可以调用一个简单的查询来检查数据库，如果存在使用记录，则不应加载“欢迎”屏幕。

目前我只想强制加载“欢迎”屏幕，只是在我开始编写条件之前检查它是否有效。

这是我的标准 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 的 options 参数。不是数组而是对象，正如您在导航器参考页中看到的那样。[parameter]表示参数是可选的，而不是数组。

希望能帮助到你！

于 2015-12-08T02:14:32.167 回答