0

我正在使用 Microsoft 的 Typescript 和 WinJS 多设备混合应用模板创建单页导航应用。该应用程序为 Win8、WP8 和 Android 构建，并且可以很好地部署到模拟器。但是，Win8 和 WP8 应用程序无法正确导航到应用程序的第一页。Android 使用相同的代码可以很好地导航。

WinJS 具有导航状态保存功能，但实际上并不执行导航本身。我从 Typescript/WinJS 示例 Encyclopedia 中借用了实际导航代码，可在此处找到。

似乎失败的相关部分如下所示：

 args.detail.setPromise(
            WinJS.Promise.timeout().then(function () {
                if (oldElement.winControl && oldElement.winControl.unload) {
                    oldElement.winControl.unload();
                }
                return WinJS.UI.Pages.render(args.detail.location, newElement, args.detail.state, parented);
            }).then((control) => {
                    this.element.appendChild(newElement);
                    this.element.removeChild(oldElement);
                    oldElement.innerText = "";
                    this.navigated();
                    parentedComplete();
                })
            );

在渲染命令返回后，在 Android 上，元素的 innerHTML 包含路径中指向的页面 (args.detail.location)。在 Win8 和 WP8 上，该元素仍然是空白的。

这部分代码由根 index.html 文件中的 WinJS 特定 html 触发。 

<div id="contenthost" data-win-control="TurnstileTS.PageControlNavigator" data-win-options="{home: './views/home/HomeView.html'}"></div>

此路径在 Android 中运行良好。Ripple 基于 Web 的 Android 模拟器中的绝对路径是http://localhost:4400/views/home/HomeView.html.

此路径在 WP8 或 Win8 中不起作用，但也不会引发异常。屏幕只是一片空白。Win8 应用程序调试运行期间的绝对路径是ms-appx://io.cordova.turnstile/www/views/home/HomeView.html.

我看不出有什么问题。我正在使用最新版本的 WinJS 和 WinJS 构建中包含的类型。

编辑 另一个难题： 此示例使用 Cordova 和 WinJS，但没有使用 Typescript。一切都在javascript中。它也有自己的导航功能。这似乎适用于 Win8 和 WP8。据我所知，它在 WinJS 库中调用相同的函数。我真的找不到这个样本和我正在尝试做的事情之间的任何主要区别。

编辑 #2 好的，在发现 javascript 控制台开始吐出错误后，我在 Win8 中运行它时收到以下消息：

APPHOST9623: The app couldn’t resolve ms-appx://57059lmcpherson.turnstile/views/home/HomeView.css because of this error: RESOURCE_NOT_FOUND.

实际上，有很多这样的消息。所以，有点不对劲。

我读到了一些关于在路径中使用斜杠的内容对于 Windows/Cordova 应用程序是不可接受的，所以我尝试重写它们。如果 javascript 文件与 html 文件位于同一子目录中，则路径引用应该只是不带斜杠的文件名。但是，javascript 控制台显示这已在 Win8 中解释为 www 文件夹的根目录（在构建期间生成）。如果我尝试使用“/views/home/HomeView.css”将其硬编码到实际路径，它仍然找不到该文件。如果javascript控制台指示它试图在头部加载脚本，我不确定为什么没有加载HTML文档的正文。

4

1 回答 1

3 
edit - 11/14/2014 - post CTP3 release!

MDHA 模板似乎还有另一个问题...用于使 3rd 方库与 Windows 8 应用程序模型兼容的 winstore-compat.js 填充程序文件（本机访问而不是像 android 或 iOS 那样的 webview）会导致问题使用 WinJS 导航模型时的 MDHA 模板。我正在将本地 html 片段打开到根 html 页面中的 div 中...... shim 拦截这个片段并以一种导致整个页面静默失败的方式对其进行修改。如果您注释掉垫片，则导航有效。（它位于 merges/windows/scripts/platformOverrides.js 中）这不是永久解决方案，因为那样您可能无法使用其他 3rd 方库。

问题在此处的 WinJS github 问题跟踪页面上注册。

end edit

一种解决方案虽然仍然令人沮丧，但从已知的单页导航工作示例开始，而不是从空白模板开始。

我之前链接的这个示例使用了所有 JavaScript，并且可以开箱即用地使用单页导航。我留下了原来的 index.html 和 index.js，但是替换了所有的子页面和脚本。它仍然有效。然后我添加了 TypedMVVM 框架文件，它仍然有效。

我仍然不知道我如何使用 Typescript 实现我自己的单页导航有什么问题，但我很高兴现在使用这个替代方案。

编辑 - 另外，我发现 Win8/WP8 项目路径的前导“/”字符效果不佳。我必须使用前导点“./”或不使用任何路径，并且所有路径都必须相对于当前的 html 文件。（很多“..”去上一个目录）

编辑2路径 的前导点非常重要。Win8 和 WP8 应用程序中的绑定根本不起作用，我最终将其追踪到页面脚本中的一个简单语句。

这不起作用：

WinJS.UI.Pages.define("/views/main/MainView.html", new MainView());

这确实有效：

WinJS.UI.Pages.define("./views/main/MainView.html", new MainView());

发现这一点后，我想打破一些东西。

于 2014-10-17T21:50:13.540 回答