在 Windows 8 应用中创建延长的初始屏幕

Create extended splash screen in windows 8 app

本文关键字:屏幕 创建 Windows 应用      更新时间:2023-09-26

我正在使用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();
}
})();

这是扩展的Splash.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
});
})();

最后是飞溅.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>

请帮助我举例或指导我...谢谢。当我将起始页更改为启动时,这工作正常.html但应用程序在默认情况下工作正常.html

如果我

理解正确,您不确定如何使延长的初始屏幕(启动画面.html)消失并默认显示内容.html,对吗?

关键是如何关闭延长的初始屏幕以及如何显示应用主页 - MSDN 教程并不擅长指出其工作原理。

有两种方法可以在此处实现。

一种是将延长的初始屏幕和应用主页的内容默认作为同级元素.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 中完全删除(以释放内存)。

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

在您的代码中,我看到您已经在使用导航器,但我认为它没有做您想要的。

最重要的是,您必须以某种方式从 splash.html 导航到默认值.html,而且我看不到您在代码中的哪个位置正在做类似的事情。这就是为什么将 ext. 初始屏幕作为默认的一部分.html很有意义,我发现这是一种比尝试为此目的导航页面控件更简单的方法。在我的第二版书(http://aka.ms/BrockschmidtBook2)第3章的预览中,我有一个ExtendedSplashScreen示例(但在即将到来的第二个预览中将在附录中),它就是这样做的。