啟動頁作為應用程序首次出現的頁面，該頁面提供一些預加載數據的提前獲取，防止應用程序出現白屏等異常，如是否第一次訪問應用程序并開啟應用歡迎頁；判斷用戶登錄信息進行頁面跳轉；消息信息懶加載等。
??想了解更多關于開源的內容，請訪問：??
??51CTO 開源基礎軟件社區??
??https://ost.51cto.com??
啟動頁作為應用程序首次出現的頁面，該頁面提供一些預加載數據的提前獲取，防止應用程序出現白屏等異常，如是否第一次訪問應用程序并開啟應用歡迎頁；判斷用戶登錄信息進行頁面跳轉；消息信息懶加載等。
常見啟動頁參數如下表所示：
屬性 | 類型 | 描述 | 必填 |
timer | number | 倒計時時長，默認3秒 | Y |
isLogo | boolean | 顯示圖片類型。 false：常規圖，默認； true：logo圖 | N |
backgroundImg | ResourceStr | 顯示圖片地址 | N |
companyName | string | 企業名稱 | N |
mfontColor | ResourceColor | 企業名稱字體顏色 | N |
常見啟動頁方法如下表所示：
封裝啟動頁參數類代碼如下所示：
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%')
}
}
預覽效果如下圖所示：
??想了解更多關于開源的內容，請訪問：??
??51CTO 開源基礎軟件社區??
??https://ost.51cto.com??
