HBuilder設定APP狀態列

2022-02-09 06:57:34 字數 1676 閱讀 8636

一、 前言

圖例:二、狀態列狀態型別

預設變色(設定顏色)

透明(沉浸式)

消失(全屏)

三、狀態列變色

1.效果如圖:

2.根據色調設定狀態列文字顏色,文字顏色只提供兩種值:light(白色)、dark(黑色)

3.設定標題欄背景顏色

4.設定狀態列背景顏色,顏色值為16進製制

示例**:

1

<

link

href

="css/mui.min.css"

rel="stylesheet"

/>

2.mui-bar

3link

>

4<

script

>

5mui.plusready(

function

());

9script

>

view code

注意事項:

背景色終端支援僅:android5及以上系統支援;ios7.0及以上系統支援。

文本色終端支援僅:android5只有小公尺和魅族支援,android6及以上所有安卓支援;ios7及以上支援。

四、狀態列透明(沉浸式)

1.效果如圖:

(將背景和狀態列、標題欄貫通了)

2.運用實戰(登入介面)

<

style

>

html,body

body

style

>

設定頁面背景

mui.plusready(function());
針對背景色的色調設定狀態列文字的顏色

"plus": 

}

開啟應用的manifest.json檔案,切換到**檢視,在plus -> statusbar 下新增immersed節點並設定值為true

3.沉浸式延伸的問題

由於沉浸式模式是在manifest.json檔案配置,作為了乙個固定全域性的設定,沉浸式的設定可能只是針對部分頁面,那麼對其他的頁面都牽連了。

導致的效果如圖:

(狀態列的高度被忽略)

解決**:

mui.plusready(function(),top:0,bottom: 0

});});

background

屬性,設定狀態列的背景色。

五、

全屏顯示

(沒有狀態列)

在應用中可呼叫

5+ api

動態改變應用是否全屏顯示的狀態:

function fullscreen()

function unfullscreen()

function isfullscreen()

HBuilder開發App教程

眾所周知,自從js有nodejs後,前端人員可以華麗的轉身,去開發高併發非阻塞的服務端程式,不過大部分是收費的,強定製的,這裡就不一一枚舉了。這裡推薦dcloud推出的hbuilder,一句話誰用誰知道。通過hbuilder的雲端打包技術 也可以放到本地 無論是bootstrap還是amazeui,...

hbuilder打包app基本流程

宣告 本文可能用到一些工具和第三方 都是為了達到目的而使用的工具,絕不含有廣告成分 基本設定 空模板結構 3.引入.推薦引入打包好的 直接將整個包引入.原來的空模板中的檔案除了 unpackage 和 manifest.json 都可以刪除.然後將打包好的 放入就行 右鍵test,然後開啟檔案所在位...

關於HBuilder打包vue專案 app返回問題

我用的是需要mui.js版本的 再模擬執行的時候可以按手機的返回鍵返回上一級,但是不能按兩次後退出,提示 typeerror cannot read property canback of undefined 後來看文件發現如果引入mui.js的話,就需要重寫back方法,因為muil.back 裡...