如何使用空白应用模板在Windows Store应用中进行导航

虽然你可以使用窗口。位置来执行导航，我相信你已经注意到了一些缺点:

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

正是由于这些原因，WinJS + navigator.js创建了一种通过DOM替换来实现"页面"的方法，这与"单页面web应用"使用的策略相同。也就是说，您在default.html中有一个div，您在其中加载一个unload DOM片段以提供页面导航的外观，而实际上您从未离开过default.html的原始脚本上下文。因此，所有的内存变量都会在所有页面导航中持续存在。

机制是这样的:Navigation提供了一个API来管理导航和backstack。然而，就其本身而言，它所做的只是管理一个backstack数组并触发与导航相关的事件。要进行DOM替换，必须有东西监听这些事件。

这些监听器是navigator.js实现的，所以这是一段代码，你可以把它拉到任何项目中。Navigator.js还实现了一个名为PageControlNavigator的自定义控件(通常是Application.PageControlNavigator)，它实现了侦听器。

这就留下了如何定义"页面"的机制。这就是WinJS.UI.Pages API的作用，navigator.js假定您已经以这种方式定义了页面。(从技术上讲，您可以为此定义自己的页面机制，也许可以使用底层的WinJS.UI.Fragments API，甚至可以从头开始实现自己的页面机制。但是WinJS. ui . pages的出现是因为每个处理这个问题的人基本上都提出了相同的解决方案，所以WinJS团队提供了一个每个人都可以使用的实现。

Put together then:

• 将每个页面定义为WinJS.UI.Pages的一个实例。PageControl，其中每个页面由其HTML文件标识(可以加载自己的JS和CSS文件)。JS文件包含一个页面的方法的实现，比如ready，您可以在其中进行初始化工作。然后你可以构建任何你想要的对象结构。
• 在default.html中，为页面呈现的"host container"定义一个div。这是在navigator.js中定义的PageControlNavigator类的一个实例。在data-win-options中，你可以为加载的初始页面指定"{home:}"。
• 当你想切换到另一个页面，调用WinJS.Navigation.navigate与目标页面的标识符(即路径到它的。html文件)。作为响应，它将触发一些导航事件。
作为响应，PageControlNavigator对这些事件的处理程序将把目标页面的HTML加载到DOM中，在default.html中的div中。然后，它将卸载前一个页面的DOM。当所有这些都被渲染时，你会看到一个页面过渡——一个平滑的页面过渡，因为我们可以将内容动画化，而不是通过黑屏。
• 在此过程中，调用前一个页面控件的unload方法，并调用新页面控件的init/load/processed/ready方法。

把一个空白的应用模板转换成一个导航模板项目并不太难——把你的default.html/.css/.js内容移到一个页面控件结构中，把navigator.js添加到default.html(和你的项目)中，把PageControlNavigator放到default.html中。我建议您从导航应用程序模板创建一个项目，以供参考。根据上面的解释，你应该能够理解这个结构。

要了解更多细节，请参阅我的免费电子书用HTML, CSS和JavaScript编程Windows Store应用程序的第3章，第二版，在那里我用大量的代码示例讨论了应用程序的结构和页面导航。