在 Windows 8 应用程序中创建扩展启动画面

Question

我正在使用 javascript

使用 Windows 8 应用程序

我参考了使用 javaScript 创建扩展启动画面的 MSDN 教程。扩展启动画面工作正常。但问题是我无法删除它并启动应用程序。感谢您的任何帮助。

这是我的 defaulf.js 文件。

(function () {
    "use strict";
    WinJS.Binding.optimizeBindingReferences = true;

var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
var nav = WinJS.Navigation;

var splash = null; // Variable to hold the splash screen object.
var dismissed = false; // Variable to track splash screen dismissal status.
var coordinates = { x: 0, y: 0, width: 0, height: 0 };

WinJS.Application.onerror = function (e) {
    console.error(e.detail.exception.message, e.detail.exception.stack);
    var dialog = new Windows.UI.Popups.MessageDialog(
    e.detail.exception.stack, e.detail.exception.message);
    dialog.showAsync().done();
    return true;
};

WinJS.Application.onsettings = function (e) {
    e.detail.applicationcommands = {
        "about": { title: "About", href: "/pages/settings/about.html"},
        "privacy": { title: "Privacy Policy", href: "/pages/settings/privacy.html"}          
    };
    WinJS.UI.SettingsFlyout.populateSettings(e);
};

app.addEventListener("activated", function (args) {
    WinJS.Namespace.define("GlobalNav", nav);
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

            // Retrieve splash screen object
            splash = args.detail.splashScreen;
            // Retrieve the window coordinates of the splash screen image.
            SdkSample.coordinates = splash.imageLocation;
            // Register an event handler to be executed when the splash screen has been dismissed.
            splash.addEventListener("dismissed", onSplashScreenDismissed, false);
            // Create and display the extended splash screen using the splash screen object.
            ExtendedSplash.show(splash);
            // Listen for window resize events to reposition the extended splash screen image accordingly.
            // This is important to ensure that the extended splash screen is formatted properly in response to snapping, unsnapping, rotation, etc...
            window.addEventListener("resize", onResize, false);
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }
        if (app.sessionState.history) {
            nav.history = app.sessionState.history;
        }
        args.setPromise(WinJS.UI.processAll().then(function () {
            document.body.classList.add("loaded");
            if (nav.location) {
                nav.history.current.initialPlaceholder = true;
                return nav.navigate(nav.location, nav.state);
            } else {
                return nav.navigate(Application.navigator.home);

            }
        }));
    }

});

function onSplashScreenDismissed() {
    // Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
    SdkSample.dismissed = true;
    // Tear down the app's extended splash screen after completing setup operations here...
    // In this sample, the extended splash screen is torn down when the "Learn More" button is clicked.
    document.getElementById("learnMore").addEventListener("click", ExtendedSplash.remove, false);
    // The following operation is only applicable to this sample to ensure that UI has been updated appropriately.
    // Update scenario 1's output if scenario1.html has already been loaded before this callback executes.
    if (document.getElementById("dismissalOutput")) {
        document.getElementById("dismissalOutput").innerText = "Received the splash screen dismissal event.";
    }
}

function onResize() {
    // Safely update the extended splash screen image coordinates. This function will be fired in response to snapping, unsnapping, rotation, etc...
    if (splash) {
        // Update the coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;
        ExtendedSplash.updateImageLocation(splash);
    }
}

WinJS.Namespace.define("SdkSample", {
    dismissed: dismissed,
    coordinates: coordinates
});

app.oncheckpoint = function (args) {
    // TODO: This application is about to be suspended. Save any state
    // that needs to persist across suspensions here. If you need to 
    // complete an asynchronous operation before your application is 
    // suspended, call args.setPromise().
    app.sessionState.history = nav.history;
};

if (Internet.isConnected()) {app.start();}
else {
    var internetError = Windows.UI.Popups.MessageDialog("Internet connection is not working properly", "Daily Mirror : internet Connection Error");
    internetError.showAsync().done();
}
})();

这是 extendedSplash.js 文件

(function () {
"use strict";
// Displays the extended splash screen. Pass the splash screen object retrieved during activation.
function show(splash) {
    var extendedSplashImage = document.getElementById("extendedSplashImage");
    // Position the extended splash screen image in the same location as the system splash screen image.
    extendedSplashImage.style.top = splash.imageLocation.y + "px";
    extendedSplashImage.style.left = splash.imageLocation.x + "px";
    extendedSplashImage.style.height = splash.imageLocation.height + "px";
    extendedSplashImage.style.width = splash.imageLocation.width + "px";
    // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.       
    var extendedSplashProgress = document.getElementById("extendedSplashProgress");
    extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";     
    // Once the extended splash screen is setup, apply the CSS style that will make the extended splash screen visible.
    var extendedSplashScreen = document.getElementById("extendedSplashScreen");
    WinJS.Utilities.removeClass(extendedSplashScreen, "hidden");
}

// Updates the location of the extended splash screen image. Should be used to respond to window size changes.
function updateImageLocation(splash) {
    if (isVisible()) {
        var extendedSplashImage = document.getElementById("extendedSplashImage");

        // Position the extended splash screen image in the same location as the system splash screen image.
        extendedSplashImage.style.top = splash.imageLocation.y + "px";
        extendedSplashImage.style.left = splash.imageLocation.x + "px";
        extendedSplashImage.style.height = splash.imageLocation.height + "px";
        extendedSplashImage.style.width = splash.imageLocation.width + "px";

        // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.
        /*
        var extendedSplashProgress = document.getElementById("extendedSplashProgress");
        extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";
        */
    }
}

// Checks whether the extended splash screen is visible and returns a boolean.
function isVisible() {
    var extendedSplashScreen = document.getElementById("extendedSplashScreen");
    return !(WinJS.Utilities.hasClass(extendedSplashScreen, "hidden"));
}

// Removes the extended splash screen if it is currently visible.
function remove() {
    if (isVisible()) {
        var extendedSplashScreen = document.getElementById("extendedSplashScreen");
        WinJS.Utilities.addClass(extendedSplashScreen, "hidden");            
    }
}

WinJS.Namespace.define("ExtendedSplash", {
    show: show,
    updateImageLocation: updateImageLocation,
    isVisible: isVisible,
    remove: remove
});
})();

最后是 splash.html 文件

<div id="extendedSplashScreen" class="extendedSplashScreen hidden">
    <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" />
    <!-- Optionally, add a progress ring. Note: In this sample, the progress ring is not used. -->
    <!--
    <progress id="extendedSplashProgress" style="color: white;" class="win-medium win-ring"></progress>
    -->
    <div id="extendedSplashDescription">
        <span id="extendedSplashText">The splash screen was dismissed and the image above was positioned using the splash screen API.</span>
        <br /><br />
        <button class="action" id="learnMore">Learn More</button>
    </div>
</div>

请帮我举例或指导我...非常感谢。当我将起始页面更改为 splash.html 但应用程序在 default.html

下工作正常时，这工作正常

Answer 1

如果我理解正确，您不确定如何使扩展启动画面 (splash.html) 消失并显示 default.html 中的内容，对吗？

关键是如何关闭扩展的初始屏幕以及如何显示应用主页——MSDN 教程并不特别擅长指出这是如何工作的。

这里有两种方法来实现。

一种是在 default.html 中将扩展初始屏幕和应用主页的内容作为同级元素，如下所示：

<body>
<div id="mainContent">
    <h1>This is the real start page</h1>    
    <p>Other content goes here.</p>
</div>

<!-- This div (declared last) will overlay the rest of the page initially; the elements within it will be
        repositioned according to the default splash screen layout, then animated or shown. -->
<div id="splashScreen">
    <p><span id="counter"></span></p>
    <img id="logo" src="/images/splashscreen.png" />
    <img id="title" src="/images/splashscreentitle.png" />
    <progress id="progress" class="win-ring win-large"></progress>
</div>
</body>

因为第二个 div 覆盖了第一个，所以该内容将作为扩展的初始屏幕可见。当需要删除该启动画面时，您可以隐藏该元素（就像您正在做的那样）或将其完全从 DOM 中删除（以释放内存）。

第二种方法是使用页面控件，其中 default.html 承载 PageControlNavigator，您导航到的第一个页面是扩展的初始屏幕页面。完成工作后，它会导航到应用程序主页。 （在这种情况下，如果您不想在历史记录中出现启动画面，请预先将 WinJS.Navigation.history.current.initialPlaceholder 设置为 true，请参阅我在 http://kraigbrockschmidt.com/blog/?p=741 上的博客。）

在您的代码中，我看到您已经在使用导航器，但我认为它并没有达到您想要的效果。

底线是您必须以某种方式从 splash.html 导航到 default.html，我看不出您在代码中的哪个位置执行了类似操作。这就是为什么有分机。作为 default.html 的一部分的闪屏很有意义，我发现这比为此目的尝试导航页面控件更简单。我的第二版书 (http://aka.ms/BrockschmidtBook2) 第 3 章的预览中有一个 ExtendedSplashScreen 示例（但将在即将到来的第二版预览中的附录中），就是这样做的。