如何延长初始屏幕 (HTML)

  • 项目

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

通过创建延长的初始屏幕使初始屏幕显示更长时间。 该屏幕通常设计为模拟应用启动时显示的初始屏幕，但它完全可以自定义。 不论你是要显示实时加载信息还是想要简单地为应用提供更多时间来准备其初始 UI，延长的初始屏幕允许你定义启动体验。以下步骤将帮助你创建延长的初始屏幕，它与系统提供的初始屏幕相同。

若要查看完整应用中的延长的初始屏幕，请参阅初始屏幕示例。

如果你要使用户感觉默认初始屏幕显示了更长时间，你的延长的初始屏幕必须以下面这些方式模拟默认初始屏幕：

  • 你的扩展初始屏幕页面所使用的图像应该与在应用清单中为你的初始屏幕指定的图像相同。
  • 你的视图使用的背景颜色应该与应用清单中为初始屏幕指定的背景颜色一致。
  • 你的代码应该使用 SplashScreen 类将你的应用的初始屏幕图像放置在默认初始屏幕的相同屏幕坐标处。
  • Windows（而非 Windows Phone）：你的代码应该响应窗口重设大小事件（例如，当你的应用重设大小或者旋转屏幕时）。

要点  如果你在项目的 default.html 文件中声明了全局应用空间（如 AppBar），当你调用可显示延长初始屏幕的函数时，将该控件的 disabled 属性设置为 true，并在你从延长初始屏幕导航到其他位置时，重新将 disabled 设置为 false。如果你需要关于如何添加控件并设置其样式的详细信息，请参阅添加控件和内容。

 

先决条件

步骤 1: 创建延长的初始屏幕页面

  1. 将 JavaScript 代码（该代码将定义你延长的初始屏幕）与你的登录页面相关联。

    初始屏幕示例通过 default.html 将该代码添加到相关联的 extendedSplash.js：

    <script src="/js/extendedSplash.js"></script>

  2. 将一个延长的初始屏幕 <div> 添加到你的登录页面。

    初始屏幕示例使用此 HTML 将一个延长的初始屏幕 <div> 添加到其登录页面 (default.html) 的 <body>：

    <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>
        <button class="action" id="learnMore">Learn More</button>
    </div>
</div>

    已设置 id 和 class 属性，以便可以将它们用于设置样式和操纵。延长的初始屏幕 <div> 还设置 "hidden" 类，这样，直到延长的初始屏幕 JavaScript 代码显示该屏幕，才能看到该屏幕。

  3. 添加 CSS 以在你的登录页面上设置延长的初始屏幕标记的样式。

    确保你设置延长的初始屏幕 HTML 的样式以使用 position:absolute 样式。当你的应用显示你的延长的初始屏幕时，绝对定位允许你的应用使用整个屏幕。它还使你可以使用与默认初始屏幕相同的坐标定位初始屏幕图像。

    初始屏幕示例添加此 CSS（到 default.css）以在其登录页面上设置延长的初始屏幕标记的样式：

    .extendedSplashScreen {
    background-color:#00b2f0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
}

.extendedSplashScreen.hidden {
    display: none;
}

#extendedSplashImage {
    position: absolute;
}

#extendedSplashDescription
{
    position: absolute;
    width: 100%;
    top: calc(100% - 140px);
    text-align: center;
}

#extendedSplashText
{
    font-family: 'Segoe UI Semilight';
    font-size: 11pt;
    text-align: center;
    width: 75%;
    color: #ffffff;
}

    定义这些样式的类和 ID 还可识别登录页面的 HTML 中延长的初始屏幕标记。

步骤 2: 将代码添加到你的激活的事件处理程序，该事件处理程序显示你的延长的初始屏幕

初始屏幕示例说明了如何在 default.js 文件中使用 activated 事件处理程序（activated 函数）正确显示延长的初始屏幕。


function activated(eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        // Retrieve splash screen object
        splash = eventObject.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 ensures that the extended splash screen is formatted properly when the window is resized.
        window.addEventListener("resize", onResize, false);

        // Use setPromise to indicate to the system that the splash screen must not be torn down
        // until after processAll and navigate complete asynchronously.
        eventObject.setPromise(WinJS.UI.processAll().then(function () {
            // Navigate to either the first scenario or to the last running scenario
            // before suspension or termination.
            var url = WinJS.Application.sessionState.lastUrl || scenarios[0].url;
            return WinJS.Navigation.navigate(url);
        }));
    }
}

初始屏幕示例使用以下步骤来显示其延长的初始屏幕，并在激活应用时定位初始屏幕图像（在 default.js 文件中的 activated 事件处理程序内部）：

  1. **获取默认初始屏幕图像显示的位置的坐标。**这些坐标存储在 SplashScreen 对象的某个属性中，从传递给 activated 事件处理程序的事件对象可访问该对象。

    初始屏幕示例使用以下代码获取坐标：

    
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        // Retrieve splash screen object
        splash = eventObject.detail.splashScreen;

        // Retrieve the window coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;

  2. **侦听初始屏幕的隐藏事件，然后开始加载应用资源。**如果系统隐藏系统提供的初始屏幕，并且在此情况下，转换为显示你的应用的延长的初始屏幕，则它会引发 dismissed 事件。当应用设置完成时，在隐藏事件处理程序内部启动设置操作并导航离开延长的初始屏幕。

    初始屏幕示例在 default.js 的 activated 函数中注册其隐藏事件处理程序 (onSplashScreenDismissed)：

            // Register an event handler to be executed when the splash screen has been dismissed.
        splash.addEventListener("dismissed", onSplashScreenDismissed, false);

    在 default.js 的 activated 事件外部定义隐藏事件处理程序。因为初始屏幕示例不需要等待加载任何资源，因此当用户单击"了解详细信息"按钮时，它将删除延长的初始屏幕。

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

    创建用于从你的 extendedSplash.js 文件删除延长的初始屏幕的函数。

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

  3. 放置并显示延长的初始屏幕。

    初始屏幕示例使用其已激活事件处理程序（在 default.js 中）中的以下代码放置并显示初始屏幕：

    
        // Create and display the extended splash screen using the splash screen object.
        ExtendedSplash.show(splash);

    添加用于在 extendedSplash.js 中放入延长的初始屏幕图像的函数。

    
// 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");
}

  4. **Windows（而非 Windows Phone）：侦听窗口重设大小事件并通过重新放置初始屏幕图像进行响应。**这可以确保你的延长初始屏幕会在应用重设大小时采用正确的格式。如果你创建了灵活的布局或将内容放在灵活的控件（如 ViewBox）中，方向改变会自动得到处理。

    在你的 activated 事件处理程序中（在 default.js 中）注册你的重设大小事件处理程序：

                // 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 resizing, rotation, etc...
            window.addEventListener("resize", onResize, false);

    然后，添加代码以定义事件处理程序。该函数可获取更新的图像位置坐标，然后调用另一个函数以更新图像在延长的初始屏幕页面上的位置。

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

    该示例在 extendedSplash.js 中定义 updateImageLocation。如果可以看见延长的初始屏幕，它会将延长的初始屏幕的图像放置在系统之前显示初始屏幕的同一位置中。

    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";
        */
    }
}

备注

提示  如果你在过渡到延长的初始屏幕期间注意到闪烁，请在你的 <img> 标记上添加 onload=""，如下所示：<img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" />。这样将通过让系统在切换到延长的初始屏幕之前等待已经呈现图像来帮助阻止闪烁。

 

相关主题

如何激活应用

初始屏幕示例

Guidelines for splash screens

How to extend the splash screen (Windows Runtime apps using C#/VB/C++ and XAML)

参考

WinJS.Application.onactivated event

Windows.ApplicationModel.Activation namespace

Windows.ApplicationModel.Activation.splashScreen class

Windows.ApplicationModel.Activation.splashScreen.imageLocation property