uniapp系列-改變底部安全區-頂部的手機訊號、時間、電池欄顏色樣式
uniapp 的預設安全區域的顏色是白色，如果我們做了沉浸式頁面，背景色也是白色的話，就會看不到電池欄，等的顏色，如何修改呢？
首先來說底部安全區域
下圖是底部安全區原始狀態，感覺和整個頁面格格不入
修改程式碼配置safearea
- manifest.json（下面程式碼僅支援ios）
// 在app-plus下配置： "safearea": { //安全區域配置，僅iOS平臺生效 "background": "#F5F6F9", //安全區域外的背景顏色，預設值為"#FFFFFF" "bottom": { // 底部安全區域配置 "offset": "none|auto" // 底部安全區域偏移，"none"表示不空出安全區域，"auto"自動計算空出安全區域，預設值為"none" } }, - manifest.json（下面程式碼支援android）
寫法一： // #ifdef APP-PLUS var Color = plus.android.importClass("android.graphics.Color"); plus.android.importClass("android.view.Window"); var mainActivity = plus.android.runtimeMainActivity(); var window_android = mainActivity.getWindow(); window_android.setNavigationBarColor(Color.parseColor("#eb8c76")); // #endif 寫法二： // #ifdef APP-PLUS let color, ac, c2int, win; color = plus.android.newObject("android.graphics.Color") ac = plus.android.runtimeMainActivity(); c2int = plus.android.invoke(color, "parseColor", "#000000") win = plus.android.invoke(ac, "getWindow"); plus.android.invoke(win, "setNavigationBarColor", c2int) // #endif
底部區域顏色已配置成功（下圖僅供參考，隨便選的顏色，有點醜哈哈）
接下來講一下頂部電池欄的配置
配置頂部導航欄顏色
方案一：僅適用於原生導航配置，非自定義導航
在page.json修改需要配置的頁面的navigationBarTextStyle屬性
"pages": [ { "path": "pages/index/index", "style": { // "navigationStyle": "custom" "navigationBarTitleText": "我是原生title", "navigationBarTextStyle": "white" ,// 僅支援 black/white "navigationBarBackgroundColor": "#aaaaff" } } ],
方案一：通用，也適用於自定義導航
在頁面中使用nativejs的api，native是uni內建的sdk，不需要手動引入，直接用就可以,但是需要注意呼叫時機和條件使用，參考下面的注意事項哦
onReady(){
plus.navigator.setStatusBarStyle("dark"); //只支援dark和light
}
注意事項
注意函式的呼叫時機，如果是自定義導航欄，方法只寫在onReady的話，切換路由再回來以後，你的配置會失效，所以要注意呼叫時機
uniapp中 onReady, onLoad, onShow區別
-
onReady 頁面初次渲染完成了，但是渲染完成了，你才傳送請求獲取資料，顯得有些慢
-
onLoad 只加載一次，監聽頁面載入，其引數為上個頁面傳遞的資料，引數型別為Object
-
onShow 監聽頁面顯示。頁面每次出現都觸發，包括從下級頁面點返回露出當前頁面
目前我是這樣配置（舉個栗子：配置頂部導航欄背景顏色為黑色）
``` import { onLoad, onShow, onReady} from '@dcloudio/uni-app'; onReady(() => { / #ifdef APP-PLUS / plus.navigator.setStatusBarStyle('dark'); / #endif / });
onShow(() => { / #ifdef APP-PLUS / plus.navigator.setStatusBarStyle('dark'); / #endif / }); ```
今天就寫到這裡啦~
- 小夥伴們，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我們明天再見啦~~
- 大家要天天開心哦
歡迎大家指出文章需要改正之處~
學無止境，合作共贏