自定義HarmonyOS啟動(dòng)頁(yè)組件

啟動(dòng)頁(yè)作為應(yīng)用程序首次出現(xiàn)的頁(yè)面，該頁(yè)面提供一些預(yù)加載數(shù)據(jù)的提前獲取，防止應(yīng)用程序出現(xiàn)白屏等異常，如是否第一次訪問(wèn)應(yīng)用程序并開(kāi)啟應(yīng)用歡迎頁(yè)；判斷用戶(hù)登錄信息進(jìn)行頁(yè)面跳轉(zhuǎn)；消息信息懶加載等。

常見(jiàn)啟動(dòng)頁(yè)參數(shù)如下表所示：

常見(jiàn)啟動(dòng)頁(yè)方法如下表所示：

封裝啟動(dòng)頁(yè)參數(shù)類(lèi)代碼如下所示：

export class Splash {
  // 倒計(jì)時(shí)時(shí)長(zhǎng)
  timer: number;
  // 顯示Logo
  isLogo?: boolean = false;
  // 頁(yè)面顯示圖片
  backgroundImg?: ResourceStr;
  // 企業(yè)名稱(chēng)
  companyName?: string;
  // 企業(yè)名稱(chēng)字體顏色
  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;
  }
}

自定義啟動(dòng)頁(yè)組件代碼如下所示：

@Component
export struct SplashPage {

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

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

  build() {
    // 底部企業(yè)名稱(chēng)顯示堆疊組件
    Stack({ alignContent: Alignment.Bottom }) {
      // 圖片和倒計(jì)時(shí)跳轉(zhuǎn)頁(yè)面堆疊組件
      Stack({ alignContent: Alignment.TopEnd }) {
        if (this.mSplash.isLogo) {
          Image(this.mSplash.backgroundImg).objectFit(ImageFit.None)
        }
        Button(`跳過(guò) | ${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() {
    // 倒計(jì)時(shí)處理
    let skipWait = setInterval(() => {
      this.mSplash.timer--;
      if (this.mSplash.timer === 0) {
        clearInterval(skipWait);
        this.skip();
      }
    }, 1000)
  }
}

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

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

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

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

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

在具體的頁(yè)面中導(dǎo)入自定義啟動(dòng)頁(yè)組件代碼如下所示：

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

注：為了和頁(yè)面名稱(chēng)不沖突，對(duì)Splash作別名處理。

在頁(yè)面中引入自定義組件SplashPage并填寫(xiě)相關(guān)屬性值及跳轉(zhuǎn)方法，代碼如下所示：

@Entry
@Component
struct Splash {

  // 跳轉(zhuǎn)到Index頁(yè)面
  onSkip() {
    router.replaceUrl({
      url: 'pages/Index'
    })
  }

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

預(yù)覽效果如下圖所示：