如何使用空白应用程序模板在Windows应用商店应用中执行导航

Question

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

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

Answer 1

虽然你可以使用window.location来执行导航，但我相信你已经注意到了一些缺点：

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

出于这些原因，WinJS + navigator.js创建了一种通过DOM替换来执行“页面”的方法，这与“单页面网络应用程序”使用的策略相同。也就是说，你在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类的实例。在其data-win-options中，您为已加载的初始页面指定“{home：}”。
• 每当您想切换到另一个页面时，请使用目标页面的标识符（即其.html文件的路径）调用WinJS.Navigation.navigate。作为回应，它将触发一些导航事件。
• 作为回应，PageControlNavigator对这些事件的处理程序会将目标页面的HTML加载到DOM中，在其default.html中的div中。然后它将卸载上一页的DOM。当所有这些都被渲染时，你会看到一个页面转换 - 一个平滑的转换，因为我们可以对内容进行动画处理，而不是通过黑屏。
• 在此过程中，将调用上一页控件的卸载方法，并调用新页面控件的init / load / processed / ready方法。

将空白应用模板转换为导航模板项目并不太难 - 将default.html / .css / .js内容移动到页面控制结构中，将navigator.js添加到default.html（以及您的项目） ），并将PageControlNavigator放入default.html。我建议您从导航应用模板创建一个项目以供参考。鉴于上述解释，您应该能够理解结构。

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