@TOC
前面完成了歡迎頁的簡單UI和邏輯處理并實現(xiàn)了Har模塊和Hap模塊之間的依賴和關聯(lián)伐蒋。今天张足，對遺留問題做一些處理和優(yōu)化。
沉浸式效果
典型應用全屏窗口UI元素包括狀態(tài)欄趾诗、應用界面和底部導航條句旱，其中狀態(tài)欄和導航條魄眉，通常在沉浸式布局下稱為避讓區(qū)；避讓區(qū)之外的區(qū)域稱為安全區(qū)。開發(fā)應用沉浸式效果主要指通過調整狀態(tài)欄序目、應用界面和導航條的顯示效果來減少狀態(tài)欄導航條等系統(tǒng)界面的突兀感臂痕，從而使用戶獲得最佳的UI體驗。
我們前一篇文章帶大家實現(xiàn)的歡迎頁只填充了應用界面猿涨，狀態(tài)欄和導航欄沒有被填充握童，由于背景色差別較大，頁面看起來很突兀叛赚，所有很有必要調整布局系統(tǒng)為全屏布局澡绩，界面元素延伸到狀態(tài)欄和導航條區(qū)域實現(xiàn)沉浸式效果。實現(xiàn)方案（也可根據(jù)實際情況在具體頁面進行全屏設置）：
export default class EntryAbility extends UIAbility {
......
onWindowStageCreate(windowStage: window.WindowStage): void {
// Main window is created, set main page for this ability
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
//設置全屏
windowStage.getMainWindow((err: BusinessError, data) => {
let errCode: number = err.code;
if (errCode) {
hilog.error(0x0000, 'testTag', 'Failed to obtain the main window. Cause: ' + JSON.stringify(err));
return;
}
hilog.info(0x0000, 'testTag', 'Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));
data.setWindowLayoutFullScreen(true)
});
windowStage.loadContent('pages/Splash', (err) => {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
});
}
......
}
這樣配置后再運行項目俺附，就會發(fā)現(xiàn)歡迎頁全屏顯示肥卡，狀態(tài)欄、導航欄背景不再是默認白色事镣。但是會發(fā)現(xiàn)啟動過程中步鉴，會有一個應用icon一閃而過，這個體驗不是很好璃哟，有必要進一步優(yōu)化氛琢，這就需要找到entry模塊下的src -> main -> module.json5進行配置。
{
"module": {
"name": "entry",
...
"abilities": [
{
"name": "EntryAbility",
...
"icon": "$media:start_icon", // EntryAbility組件的圖標
"label": "$string:EntryAbility_label", // EntryAbility組件的標簽
"startWindowIcon": "$media:splash", //啟動頁面圖標資源
"startWindowBackground": "$color:start_window_background", // 啟動頁面背景顏色
...
}
],
...
}
}
- icon對應的是entry為主模塊的啟動圖標沮稚，大家可以自行替換（很多渠道都可以獲取艺沼，比如 iconfont）;
- label對應的是當前entry為主模塊的應用名稱册舞，也可自行替換（可直接定位到zh_CN目錄下的sstring.json進行修改）蕴掏。
- startWindowIcon就是啟動過程中一閃而過的那個圖標，而這個屬性無法刪除调鲸，和很多其它開發(fā)者一樣的方案盛杰，在這里可以設置一個純色背景的icon，啟動過程中該圖標對用戶無感知藐石。也可以把啟動icon設置為歡迎頁即供，這樣用戶體驗可能更好，但需要注意冷啟動相關的性能問題于微。
- startWindowBackground默認為純白色逗嫡，開發(fā)者可根據(jù)需求自行設置。
注：startWindowIcon建議使用不超過256256分辨率的圖片作為啟動頁面圖標株依，以減少圖片解碼帶來的時延驱证。*
優(yōu)化完成之后，效果如下：
至此恋腕，歡迎頁基本完成抹锄，此處還有優(yōu)化空間，但對當前項目非重點，后期在應用冷啟動優(yōu)化分析相關的文章中會繼續(xù)講解伙单，關于沉浸式效果的處理获高，在接下來的項目開發(fā)中依然會涉及到，所以也會繼續(xù)講解吻育。
