1. 程式人生 > >Mui 沈浸模式以及狀態欄顏色改變

Mui 沈浸模式以及狀態欄顏色改變

改變 使用場景 ima 雲端 b2c 手機屏幕 col android test

手機的頂部狀態欄,也就是信號、電量那條,有4種狀態,分別是正常、變色、透明(也稱沈浸式狀態欄)、消失(也就是全屏)。
後3種特殊用法,具體見下:

狀態欄變色

技術分享圖片

常見的就是把狀態欄設置為tilte的顏色,這樣看著大氣;

寫法:
使用5+API plus.navigator.setStatusBarBackground)。

首頁配置
首頁需要在manifest.json文件中,plus->launchwebview下添加statusbar節點,並配置background的值(格式為#RRGGBB)。

技術分享圖片

若首頁為secondwebview,則調整launchwebview為secondwebview即可。

終端支持:
- Android5及以上系統支持;
- iOS7.0及以上系統支持。

高度處理:此時webview高度沒有全屏,webview高度+狀態欄高度=手機屏幕高度。
也就是轉場動畫時,webview動畫是不會通頂的,狀態欄不會在轉場時變化。

狀態欄透明(沈浸式)

常見使用場景:如果頁面頂部是圖片,一般會把狀態欄變成透明,此時同時會處理成滾動後恢復為純色title,

技術分享圖片

寫法:

HBuilder創建的應用默認不使用沈浸式狀態欄樣式,需要進行如下配置開啟:
打開應用的manifest.json文件,切換到代碼視圖,在plus -> statusbar 下添加immersed節點並設置值為true。

技術分享圖片

如果不生效,在distribute節點下的apple和goole兩個節點下添加:

"UIReserveStatusbarOffset": true,(apple節點下添加)

"ImmersedStatusbar": true,/*設置為沈浸欄模式*/(goole節點下添加)

技術分享圖片

終端支持:
- Android4.4及以上系統支持;
- iOS7.0及以上系統支持。
前景色處理:
與背景色調整相同,如果背景圖顏色不當,會造成前景的信號欄文字顏色與背景太相近,看不清前景,此時需要調整前景色。
前景色的使用限制更多些,只能設置黑或白,通過plus.navigator.setStatusBarStyle(‘dark‘);設前景為黑色,‘dark‘換成light則前景色變為白色。
同時前景色處理在終端支持方面:
- Android5只有小米和魅族支持,Android6及以上所有安卓支持;
- iOS7及以上支持

高度處理:
註意,此時webview高度為全屏,狀態欄高度為0,也就是webview高度=屏幕高度。
狀態欄背景透明後前景圖標覆蓋在webview頂部。
尤其註意此時dom裏涉及fix定位計算的元素,可能需要重新排高度。
在狀態欄透明的情況下,轉場動畫時,webview動畫是會通頂的,狀態欄那裏也會有條線左右移動。

其他註意:
沈浸式狀態欄不支持動態調整,屬於應用級,真機運行不生效,需要提交到雲端打包後有效。
一個app設置了沈浸式,就意味著裏面的每個webview都變成沈浸式。
這可能會造成很多頁面都需要調整高度,此時有一種方案,就是在webview創建時,允許通過一個參數設置把這個webview的狀態條再模擬顯示出來,plus.webview.create(‘http://m.weibo.cn/u/3196963860‘, ‘test‘, {statusbar:{background:"#D4D4D4"}})。這樣設置後,webview的高度重新回到狀態欄下方,不再頂到屏幕頂部。
此api從HBuilder8.1 alpha版起生效。

全屏顯示 (沒有狀態欄)
常見使用場景:如果頁面是全屏遊戲,一般會直接讓狀態欄消失,也就是頁面全屏。webview高度全屏了,狀態欄沒有了。
寫法:
設置應用全屏顯示

如果想要全屏模式,在應用的manifest.json文件中添加“fullscreen”節點:
Boolea值類型,true表示全屏,false表示非全屏,默認值為false。

App雲端打包支持全屏操作方式:
雙擊應用的manifest.json文件,切換到“代碼視圖”,在根節點下添加fullscreen節點:**

技術分享圖片

Ctrl+S保存,並提交App雲端打包

在應用中可調用5+ API動態改變應用是否全屏顯示的狀態

function fullscreen(){
        // 設置應用全屏顯示!
        plus.navigator.setFullscreen(true);
}
function unfullscreen(){
        // 設置應用非全屏顯示!
        plus.navigator.setFullscreen(false);
}
function isfullscreen(){
        // 查詢應用當前是否全屏顯示!
        console.log( "是否全屏:"+(plus.navigator.isFullscreen()?"是":"否") );
}


終端支持:
沒有終端類型限制
高度處理:與狀態欄透明相同,webview高度=屏幕高度,狀態欄高度為0且不顯示前景內容。需要註意dom裏fix元素的調整。

Mui 沈浸模式以及狀態欄顏色改變