uniapp系列-改變底部安全區-頂部的手機信號、時間、電池欄顏色樣式

語言: CN / TW / HK

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

今天就寫到這裏啦~

  • 小夥伴們,( ̄ω ̄( ̄ω ̄〃 ( ̄ω ̄〃)ゝ我們明天再見啦~~
  • 大家要天天開心哦

歡迎大家指出文章需要改正之處~
學無止境,合作共贏

在這裏插入圖片描述

歡迎路過的小哥哥小姐姐們提出更好的意見哇~~