啟動(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)；消息信息懶加載等。
??想了解更多關(guān)于開(kāi)源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：??
??51CTO 開(kāi)源基礎(chǔ)軟件社區(qū)??
??https://ost.51cto.com??
啟動(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ù)如下表所示：
屬性 | 類(lèi)型 | 描述 | 必填 |
timer | number | 倒計(jì)時(shí)時(shí)長(zhǎng)，默認(rèn)3秒 | Y |
isLogo | boolean | 顯示圖片類(lèi)型。 false：常規(guī)圖，默認(rèn)； true：logo圖 | N |
backgroundImg | ResourceStr | 顯示圖片地址 | N |
companyName | string | 企業(yè)名稱(chēng) | N |
mfontColor | ResourceColor | 企業(yè)名稱(chēng)字體顏色 | N |
常見(jiàn)啟動(dòng)頁(yè)方法如下表所示：
方法 | 類(lèi)型 | 描述 | 必填 |
skip | void | 跳轉(zhuǎn)方法 | 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ù)覽效果如下圖所示：
??想了解更多關(guān)于開(kāi)源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：??
??51CTO 開(kāi)源基礎(chǔ)軟件社區(qū)??
??https://ost.51cto.com??
