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 */
});

“uniapp怎么改變底部安全區和頂部手機信號時間電池欄顏色”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！