我們?cè)谧鲆恍┢┤缫曨l播放等功能的時(shí)候，有時(shí)候是期望可以全屏展示視頻的，微信小程序?yàn)槲覀兲峁┝诉@樣的功能黍翎。
設(shè)置全屏
設(shè)置方法
我們可以在選擇將整個(gè)小程序設(shè)置為全屏或者只把某個(gè)頁(yè)面設(shè)置為全屏或详。
- 修改
app.json中window屬性的navigationStyle屬性
{
"window": {
"navigationStyle":"custom"
}
}
- 修改
index頁(yè)面的index.json中navigationStyle屬性
{
"navigationStyle":"custom"
}
需要注意的點(diǎn)是
關(guān)于
navigationStyle
- 客戶端 7.0.0 以下版本，
navigationStyle只在app.json中生效柒竞。- 客戶端 6.7.2 版本開(kāi)始政供，
navigationStyle: custom對(duì) [web-view]- 開(kāi)啟 custom 后，低版本客戶端需要做好兼容。開(kāi)發(fā)者工具基礎(chǔ)庫(kù)版本切到 1.7.0（不代表最低版本布隔，只供調(diào)試用）可方便切到舊視覺(jué)
如何自定義左上角返回按鈕
有些時(shí)候离陶，我們需要在全屏狀態(tài)下，自定義一個(gè)左上角膠囊或者返回按鈕衅檀，來(lái)實(shí)現(xiàn)頁(yè)面的返回或別的功能招刨。為了美觀，我們需要把這個(gè)按鈕和右上角的膠囊對(duì)齊哀军。
小程序標(biāo)題欄
從圖中我們可以看到沉眶，小程序頂部的標(biāo)題欄，主要包括紅色的手機(jī)狀態(tài)欄和綠色的頁(yè)面標(biāo)題欄部分杉适。我們需要獲取到的是手機(jī)狀態(tài)欄的高度谎倔，以及綠色部分的高度，好讓我們自己的控件和標(biāo)題對(duì)齊猿推。
- 獲取手機(jī)狀態(tài)欄高度
我們可以使用wx.getSystemInfo這個(gè)接口片习，來(lái)獲取手機(jī)狀態(tài)欄的高度，至于同步異步蹬叭，大家自己選擇藕咏。
wx.getSystemInfo({
success (res) {
console.log(res.statusBarHeight) //狀態(tài)欄的高度，單位px
console.log(res.pixelRatio)
console.log(res.windowWidth)
console.log(res.windowHeight)
console.log(res.language)
console.log(res.version)
}
})
- 獲取標(biāo)題欄高度
這個(gè)東西沒(méi)有辦法獲取到秽五，經(jīng)過(guò)我們的調(diào)查和測(cè)量侈离，發(fā)現(xiàn)44px是極好的哈哈哈哈。
PS：小程序在wx.getSystemInfo這個(gè)方法的[2.7.0]基礎(chǔ)庫(kù)上新增了幾個(gè)屬性筝蚕，其中有一個(gè)如下：
image.png
由于我們使用的是2.6的基礎(chǔ)庫(kù)卦碾，并不敢升到2.7上去，所以沒(méi)有辦法去試一下起宽，不過(guò)大膽猜測(cè)一下這幾個(gè)屬性跟這個(gè)標(biāo)題欄高度是不是相關(guān)洲胖？哈哈哈~
