Question

我正在使用 javascript

使用Windows 8应用

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

这是我的 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覆盖了第一个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）的预览中有一个ExtendedSplashScreen示例，第3章（但将在即将到来的第二个预览的附录中），这样做。

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

1 个答案: