javascript - 如何使用空白应用程序模板在Windows Store App中执行导航

Question

我正在使用JavaScript制作游戏，目前正在使用window.location = "somepage.html"进行导航，但是我不确定这是否是正确的方法。正如我在标题中所说，我选择了空白应用模板，因此我没有任何navigator.js或类似内容。

你们能告诉我最好的方法吗？

Answer 1

尽管您可以使用window.location进行导航，但是我敢肯定您已经注意到了一些缺点：


页面之间的过渡通过黑屏，这是底层HTML呈现引擎如何工作的产物。
您在页面之间丢失了脚本上下文，例如您没有任何共享变量或命名空间，除非您使用HTML5会话存储（或WinRT应用数据）。
很难连接后退按钮，例如您必须确保每个目标页面都知道导航到哪个页面，然后在会话存储中维护后退堆栈。


由于这些原因，WinJS + navigator.js创建了一种通过DOM替换来执行“页面”的方法，这与“单页面Web应用程序”所使用的策略相同。也就是说，您在default.html中有一个div，您可以在其中加载卸载DOM片段以显示页面导航的外观，而实际上您从未离开过default.html的原始脚本上下文。结果，所有的内存变量都将在所有页面导航中保留。

机制如下：WinJS.Navigation提供了一个用于管理导航和后退堆栈的API。但是，它本身所做的只是管理一个后堆栈数组并触发与导航有关的事件。要进行DOM替换，必须监听某些事件。

这些监听器是navigator.js实现的，因此您可以为此目的将这部分代码插入任何项目中。 Navigator.js还实现了一个称为PageControlNavigator的自定义控件（通常是Application.PageControlNavigator），该控件实现了侦听器。

这就剩下了如何定义“页面”的技巧。这就是WinJS.UI.Pages API的用途，并且navigator.js假定您已经以这种方式定义了页面。 （从技术上讲，您可以为此定义自己的页面机制，也许使用低级WinJS.UI.Fragments API甚至从头开始实现。但是WinJS.UI.Pages的出现是因为解决此问题的每个人基本上都提出了相同的解决方案，因此WinJS团队提供了一种所有人都可以使用的实现。）

然后放在一起：


您将每个页面定义为WinJS.UI.Pages.PageControl的实例，其中每个页面由其HTML文件（可以加载其自己的JS和CSS文件）标识。 JS文件包含页面方法（如ready）的实现，您可以在其中执行初始化工作。然后，您可以构建所需的任何其他对象结构。
在default.html中，为页面呈现的“主机容器”定义一个div。这是navigator.js中定义的PageControlNavigator类的实例。在其数据双赢选项中，为加载的初始页面指定“ {home：}”。
每当您要切换到另一个页面时，请使用目标页面的标识符（即其.html文件的路径）调用WinJS.Navigation.navigate。作为响应，它将触发一些导航事件。
作为响应，这些事件的PageControlNavigator的处理程序会将目标页面的HTML加载到DOM中，该文件位于default.html中其div中。然后它将卸载上一页的DOM。当所有这些都呈现后，您会看到页面过渡以及平滑的页面过渡，因为我们可以对内容进行动画处理，而不必经过黑屏。
在此过程中，将调用前一个页面控件的unload方法，并调用新页面控件的init / load / processed / ready方法。


将空白的应用程序模板转换为导航模板项目并不难，将您的default.html / .css / .js内容移动到页面控件结构中，将navigator.js添加到default.html（和您的项目）中，然后将PageControlNavigator放入default.html。我建议您从nav应用程序模板创建一个项目，以供参考。根据以上说明，您应该能够理解其结构。

有关更多详细信息，请参阅我的免费电子书Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition的第3章，在其中讨论了应用程序剖析和页面导航以及大量代码示例。