Javascript 在windows 8应用程序中创建扩展启动屏幕

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

<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文件

(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
});
})();

<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>

启动屏幕被关闭，上面的图像使用启动屏幕API定位。



了解更多

---

请帮我举个例子或指导我。。。非常感谢你。当我将起始页更改为splash.html时，这工作正常，但应用程序与default.html

配合工作正常如果我理解正确，您不确定如何使扩展的启动屏幕（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。如果您不想在历史记录中显示初始屏幕，请参阅我的博客。）

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

---

归根结底，您必须以某种方式从splash.html导航到default.html，我看不出您在代码中做了什么类似的事情。这就是为什么将ext.splash screen作为default.html的一部分是很有意义的，我发现这是一种比尝试为此导航页面控件更简单的方法。在我的第二版书（第3章）的预览版中，我有一个ExtendedSplashScreen示例（但将在即将到来的第二次预览版的附录中），可以做到这一点。

只有default.html，它包含两个div，如Kraig在下面提到的。您试图将splash.html和default.html分开有什么原因吗？示例不共享此方案的代码。@Sushil我在default.html文件中包含的我的应用程序栏事件。正如Kraig所说，我做到了，它在一个问题上运行良好。。也就是说，当我右键单击扩展启动屏幕时，应用程序栏显示在扩展启动屏幕上。非常感谢您的帮助。这才是我真正想做的。再次感谢你，克雷格。我采用了第一种方法。谢谢你用非常简单的方式来解释。但下一件事是我的应用程序栏在default.html中工作，正如您在示例中看到的。当我右键单击扩展启动屏幕时，应用程序栏将显示在扩展启动屏幕的顶部。如何克服此问题？。在扩展启动屏幕打开时将应用程序栏的disabled属性设置为true（或在default.html中设置），然后在主页出现时将其设置为false。看，非常感谢你，克雷格。。它正在工作。真的非常感谢你的支持。我祝你将来一切顺利。我在default.html中设置它，并添加appBare.disables=true以删除扩展初始屏幕中的函数。。