master.

cordova-plugin-splashscreen

此外掛程式會在您的網頁應用程式啟動時顯示和隱藏啟動畫面。您也可以使用其方法手動顯示和隱藏啟動畫面。

cordova-plugin-splashscreen

安裝

// npm hosted (new) id
cordova plugin add cordova-plugin-splashscreen

// you may also install directly from this repo
cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git

支援的平台

瀏覽器

平台啟動畫面圖片設定

設定範例

在最上層的 config.xml 檔案中（不是在 platforms 中的那個），新增如這裡指定的設定元素。

「src」屬性的值相對於專案根目錄，而不是 www 目錄（請參閱下方的 目錄結構）。您可以將來源圖片檔案命名為任何您喜歡的名稱。應用程式中的內部名稱會由 Cordova 自動決定。

目錄結構

projectRoot
    hooks
    platforms
    plugins
    www
        css
        img
        js
    res
        screen

<preference name="SplashScreenDelay" value="10000" />

偏好設定

config.xml

AutoHideSplashScreen（布林值，預設為 true）。表示是否自動隱藏啟動畫面。啟動畫面會在 SplashScreenDelay 偏好設定中指定的時間量後隱藏。
```
  <preference name="AutoHideSplashScreen" value="true" />
```
SplashScreenDelay（數字，預設為 3000）。自動隱藏啟動畫面之前要等待的毫秒數。
```
  <preference name="SplashScreenDelay" value="3000" />
```
此值以前是以秒為單位（但現在是毫秒），因此小於 30 的值將繼續被視為秒。（請將此視為已棄用的修補程式，將在未來的版本中消失。）

若要停用啟動畫面，請將以下偏好設定新增至 config.xml
```
  <preference name="SplashScreenDelay" value="0"/>
```
FadeSplashScreen（布林值，預設為 true）：設定為 false 可防止啟動畫面在其顯示狀態變更時淡入和淡出。
```
  <preference name="FadeSplashScreen" value="false"/>
```
FadeSplashScreenDuration（浮點數，預設為 500）：指定啟動畫面淡化效果執行的毫秒數。
```
  <preference name="FadeSplashScreenDuration" value="750"/>
```
注意：FadeSplashScreenDuration 包含在 SplashScreenDelay 中，例如，如果您在 config.xml 中定義了 <preference name="SplashScreenDelay" value="3000" /> 和 <preference name="FadeSplashScreenDuration" value="1000"/>
- 00:00 - 顯示啟動畫面
- 00:02 - 開始淡化
- 00:03 - 隱藏啟動畫面
透過 <preference name="FadeSplashScreen" value="false"/> 關閉淡化效果，在技術上表示淡化持續時間為 0，因此在此範例中，整體啟動畫面延遲時間仍為 3 秒。

注意：這僅適用於應用程式啟動 - 您需要在應用程式的程式碼中手動顯示/隱藏啟動畫面時，將淡化逾時時間納入考量
```
  navigator.splashscreen.show();
  window.setTimeout(function () {
      navigator.splashscreen.hide();
  }, splashDuration - fadeDuration);
```

怪癖

您可以在 config.xml 中使用以下偏好設定

<platform name="browser">
    <preference name="SplashScreen" value="/images/browser/splashscreen.jpg" /> <!-- defaults to "/img/logo.png" -->
    <preference name="AutoHideSplashScreen" value="true" /> <!-- defaults to "true" -->
    <preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" -->
    <preference name="SplashScreenBackgroundColor" value="green" /> <!-- defaults to "#464646" -->
    <preference name="ShowSplashScreen" value="false" /> <!-- defaults to "true" -->
    <preference name="SplashScreenWidth" value="600" /> <!-- defaults to "170" -->
    <preference name="SplashScreenHeight" value="300" /> <!-- defaults to "200" -->
</platform>

注意：SplashScreen 值應為絕對路徑，才能在子頁面中運作。

方法

splashscreen.show
splashscreen.hide

splashscreen.hide

關閉啟動畫面。

navigator.splashscreen.hide();

splashscreen.show

顯示啟動畫面。

navigator.splashscreen.show();

在應用程式啟動且觸發 deviceready 事件之前，您的應用程式無法呼叫 navigator.splashscreen.show()。但由於通常啟動畫面是在您的應用程式啟動之前顯示，這似乎會違背啟動畫面的目的。在 config.xml 中提供任何參數將會在您的應用程式啟動後且完全啟動並收到 deviceready 事件之前，立即自動 show 顯示啟動畫面。因此，您不太可能需要呼叫 navigator.splashscreen.show() 來使啟動畫面在應用程式啟動時可見。