如何延長啟動顯示畫面 (HTML)

  • 發行項

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]

您可以建立延長式啟動顯示畫面，讓啟動顯示畫面的顯示時間變長。 這個畫面通常是設計來模仿應用程式啟動時所顯示的啟動顯示畫面，但是可完全自訂。 不論您是想要顯示即時載入資訊，或只是想給應用程式額外的時間來準備好初始 UI，都可以利用延長式啟動顯示畫面來定義啟動體驗。這些步驟可協助您建立與系統所提供之啟動顯示畫面一致的延長式啟動顯示畫面。

若要查看完整應用程式中的延長式啟動顯示畫面，請參閱啟動顯示畫面範例。

如果您想要讓使用者有預設啟動顯示畫面顯示較長時間的印象，您的延長式啟動顯示畫面將必須以下列方式模仿預設的啟動顯示畫面：

  • 您的延長式啟動顯示畫面頁面所使用的影像，應該與您應用程式資訊清單中為啟動顯示畫面指定的影像相同。
  • 您的檢視所使用的背景色彩，應該與您應用程式資訊清單中為啟動顯示畫面指定的背景色彩一致。
  • 您的程式碼應該使用 SplashScreen 類別，將應用程式的啟動顯示畫面影像，放置在與預設啟動顯示畫面相同的螢幕座標上。
  • Windows (非 Windows Phone)：您的程式碼應該回應視窗調整大小事件 (例如當調整您應用程式的大小或旋轉畫面時)。

重要  如果您已經在您專案的 default.html 檔案中宣告一個全域應用程式控制項 (例如 AppBar)，請在呼叫顯示延長式啟動顯示畫面的函式時，將控制項的 disabled 屬性設定為 true，並在您離開延長式啟動顯示畫面時，將 disabled 設回 false。如需有關如何新增控制項或設定控制項樣式的詳細資訊，請參閱新增控制項和內容。

 

先決條件

步驟 1: 建立延長式啟動顯示畫面頁面

  1. 將定義延長式啟動顯示畫面的 JavaScript 程式碼與您的登陸頁面建立關聯。

    啟動顯示畫面範例會新增這個程式碼以將 extendedSplash.js 與 default.html 建立關聯：

    <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> 也會設定"隱藏的"類別，如此一來在延長式啟動顯示畫面 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;
}

    定義這些樣式的類別和識別碼也會識別登陸頁面 HTML 中的延長式啟動顯示畫面標記。

步驟 2: 將程式碼新增至顯示延長式啟動顯示畫面的 Activated 事件處理常式

啟動顯示畫面範例會示範如何使用 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 事件，然後開始載入應用程式資源。**系統在解除系統提供的啟動顯示畫面時，會引發 dismissed 事件；在此情況下，會轉換成顯示您應用程式的延長式啟動顯示畫面。啟動 Dismissed 事件處理常式內的設定操作，並在應用程式設定完成時，離開延長式啟動顯示畫面。

    啟動顯示畫面範例會在 default.js 的 activated 函式中，登錄它的 Dismissed 事件處理常式 (onSplashScreenDismissed)：

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

    在 default.js 的 activated 事件外部，定義 Dismissed 事件處理常式。因為啟動顯示畫面範例不需要等候任何資源載入，所以它會在使用者按一下 [深入了解]"" 按鈕時，移除延長式啟動顯示畫面。

        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. 定位和顯示延長式啟動顯示畫面。

    啟動顯示畫面範例會在它的 Activated 事件處理常式 (位於 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