啟動頁作為應用程序首次出現的頁面，該頁面提供一些預加載數據的提前獲取，防止應用程序出現白屏等異常，如是否第一次訪問應用程序并開啟應用歡迎頁；判斷用戶登錄信息進行頁面跳轉；消息信息懶加載等。

常見啟動頁參數如下表所示：

常見啟動頁方法如下表所示：

封裝啟動頁參數類代碼如下所示：

export class Splash {
  // 倒計時時長
  timer: number;
  // 顯示Logo
  isLogo?: boolean = false;
  // 頁面顯示圖片
  backgroundImg?: ResourceStr;
  // 企業名稱
  companyName?: string;
  // 企業名稱字體顏色
  mFontColor?: ResourceColor;

  constructor(timer: number, isLogo?: boolean, backgroundImg?: ResourceStr,
              companyName?: string, mFontColor?: ResourceColor) {
    this.timer = timer;
    this.isLogo = isLogo;
    this.backgroundImg = backgroundImg;
    this.companyName = companyName;
    this.mFontColor = mFontColor;
  }
}

自定義啟動頁組件代碼如下所示：

@Component
export struct SplashPage {

  @State mSplash: Splash = new Splash(3);

  // 跳轉方法
  skip: () => void;

  build() {
    // 底部企業名稱顯示堆疊組件
    Stack({ alignContent: Alignment.Bottom }) {
      // 圖片和倒計時跳轉頁面堆疊組件
      Stack({ alignContent: Alignment.TopEnd }) {
        if (this.mSplash.isLogo) {
          Image(this.mSplash.backgroundImg).objectFit(ImageFit.None)
        }
        Button(`跳過 | ${this.mSplash.timer} s`, { type: ButtonType.Normal })
          .height(42)
          .padding({ left: 16, right: 16 })
          .margin({ top: 16, right: 16 })
          .fontSize(16).fontColor(Color.White)
          .backgroundColor(Color.Gray)
          .borderRadius(8)
          .onClick(() => {
            this.skip();
          })
      }
      .backgroundImage(this.mSplash.isLogo ? null : this.mSplash.backgroundImg)
      .backgroundImageSize(this.mSplash.isLogo ? null : { width: '100%', height: '100%' })
      .width('100%').height('100%')
      if (this.mSplash.companyName) {
        Text(this.mSplash.companyName)
          .width('100%').height(54)
          .fontColor(this.mSplash.mFontColor)
          .fontSize(14).fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Center)
      }
    }
    .width('100%').height('100%')
  }

  aboutToAppear() {
    // 倒計時處理
    let skipWait = setInterval(() => {
      this.mSplash.timer--;
      if (this.mSplash.timer === 0) {
        clearInterval(skipWait);
        this.skip();
      }
    }, 1000)
  }
}

自定義組件定義完成后，還需要在模塊的index.ets中將組件導出，代碼如下所示：

export { Splash, SplashPage } from './src/main/ets/components/splashpage/SplashPage';

在entry模塊引入自定義模塊teui，打開entry目錄下的package.json并在dependencies依賴列中加入如下代碼：

"@tetcl/teui": "file:../teui"

注：其中"@tetcl/teui"中"tetcl/teui"需要和自定義模塊teui中package.json中name屬性一致。若提交到npm中心倉可直接使用"@tetcl/teui": "版本號"方式引入。引入完成后需要執行編輯器上的Sync now或者npm install進行下載同步。

在具體的頁面中導入自定義啟動頁組件代碼如下所示：

import { Splash as SplashObj, SplashPage } from '@tetcl/teui'
import router from '@ohos.router';

注：為了和頁面名稱不沖突，對Splash作別名處理。

在頁面中引入自定義組件SplashPage并填寫相關屬性值及跳轉方法，代碼如下所示：

@Entry
@Component
struct Splash {

  // 跳轉到Index頁面
  onSkip() {
    router.replaceUrl({
      url: 'pages/Index'
    })
  }

  build() {
    Row() {
      SplashPage({ mSplash: new SplashObj(5, true, $r('app.media.icon'),
        'xxxx有限公司', 0x666666), skip: this.onSkip})
      // 常規圖
      // SplashPage({ mSplash: new SplashObj(5, false, $r('app.media.default_bg'), 
      //  'xxxx有限公司', 0xF5F5F5), skip: this.onSkip})
    }
    .height('100%')
  }
}

預覽效果如下圖所示：