一、前言
dai ga hou??！我是 ??????是江迪呀。我們?cè)谶M(jìn)行微信小程序開(kāi)發(fā)時(shí)，常常需要自定義一些東西，比如自定義頂部導(dǎo)航、自定義底部導(dǎo)航等等。那么知道這些自定義內(nèi)容的具體位置、以及如何適配不同的機(jī)型就變得尤為重要。下面讓我以在iPhone機(jī)型，來(lái)給大家介紹下微信小程序如何獲取自定義內(nèi)容的位置信息。
二、開(kāi)啟自定義
如果需要自定義頂部和底部導(dǎo)航。那么如何在自定義后能夠適配不同的機(jī)型而不會(huì)出現(xiàn)樣式問(wèn)題呢？我們可以通過(guò)wx.getSystemInfo({})方法來(lái)獲取頁(yè)面的信息來(lái)保證樣式的正確性。此方法常用于app.js文件中的onLanch()方法中，保證這些信息優(yōu)先被加載，并把獲取到的頁(yè)面信息放到全局變量中，方便其他頁(yè)面的獲取使用。
在此之前需要開(kāi)啟自定義頂部和底部導(dǎo)航欄。如下所示：
{
"pages": [
"pages/index/index",
"pages/index2/index2"
],
//自定義頂部導(dǎo)航 "navigationStyle": "custom",
"window": {
"navigationStyle": "custom",
"navigationBarTextStyle": "white",
"backgroundTextStyle": "light"
},
//自定義底部導(dǎo)航 "navigationStyle": "custom",這里注意在設(shè)置自定義底部導(dǎo)航欄時(shí)，list中至少包含兩個(gè)頁(yè)面
"tabBar": {
"custom": true,
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁(yè)"
},
{
"pagePath": "pages/index2/index2",
"text": "首頁(yè)2"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
2.1 整個(gè)頁(yè)面
1.位置
2.如何獲取
頁(yè)面代碼：
<view style="height: {{screenHeight}}px;background-color: aliceblue;">
</view>
頁(yè)面js代碼：
const app = getApp()
Page({
data: {
screenHeight: app.globalData.screenHeight,
}
})
app.js文件代碼：
onLaunch: function() {
wx.getSystemInfo({
success: e => {
//獲取整個(gè)頁(yè)面的高度
this.globalData.screenHeight = e.screenHeight;
}
},
)}
2.1 狀態(tài)欄
1.位置
狀態(tài)欄就是手機(jī)最頂部顯示時(shí)間、信號(hào)、電量等信息的區(qū)域。一般狀態(tài)欄的信息我們不單獨(dú)獲取設(shè)置，因?yàn)?strong>頂部導(dǎo)航欄包含了狀態(tài)欄。
2.如何獲取
頁(yè)面代碼：
<!--index.wxml-->
<view style="height: {{screenHeight}}px;background-color: aliceblue;">
<!--狀態(tài)欄高度-->
<view style="height: {{statusBarHeight}}px;background-color: red;"></view>
</view>
頁(yè)面js代碼：
// index.js
const app = getApp()
Page({
data: {
screenHeight: app.globalData.screenHeight,
statusBarHeight: app.globalData.statusBarHeight
}
})
app.js文件代碼：
onLaunch: function() {
wx.getSystemInfo({
success: e => {
this.globalData.screenHeight = e.screenHeight;
//獲取狀態(tài)欄的高度
this.globalData.StatusBar = e.statusBarHeight;
}
},
)}
2.2 頂部導(dǎo)航欄
1.位置
頂部導(dǎo)航欄的高度是包含膠囊體的。
2.如何獲取
首先獲取膠囊體的信息，如果不存在膠囊體，頂部導(dǎo)航欄高度 = 狀態(tài)欄高度 + 50；如果存在頂部導(dǎo)航欄高度 = 膠囊體離頁(yè)面頂部的距離 + 膠囊體離頁(yè)面底部的距離 - 狀態(tài)欄高度
頁(yè)面代碼：
<view style="height: {{screenHeight}}px;background-color: aliceblue;">
<!--頂部導(dǎo)航高度-->
<view style="height: {{customBar}}px;background-color: blue;"></view>
</view>
頁(yè)面js代碼：
const app = getApp()
Page({
data: {
screenHeight: app.globalData.screenHeight,
customBar: app.globalData.CustomBar
}
})
app.js代碼：
// app.js
App({
globalData:{
},
onLaunch: function() {
wx.getSystemInfo({
success: e => {
let capsule = wx.getMenuButtonBoundingClientRect();
if (capsule) {
this.globalData.Custom = capsule;
this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
} else {
this.globalData.CustomBar = e.statusBarHeight + 50;
}
}
},
)}
})
2.4 內(nèi)容區(qū)域
1.位置
如果你做的小程序沒(méi)有底部導(dǎo)航欄的話(huà)，那么內(nèi)容區(qū)域 = 頁(yè)面總高度 - 頂部導(dǎo)航欄高度
但是如果你需要底部導(dǎo)航的話(huà)那么內(nèi)容區(qū)域 = 頁(yè)面總高度 - 頂部導(dǎo)航欄高度 - 底部導(dǎo)航欄高度
2.如何獲取
頁(yè)面代碼：
<view style="height:{{screenHeight}}px;width: 100%;background-color: rgb(255, 255, 255);">
<!--頂部導(dǎo)航欄-->
<view class="" style="height: {{CustomBar}}px;background-color: blue;"></view>
<!--內(nèi)容區(qū)域-->
<view class="" style="height: {{screenHeight - CustomBar}}px;background-color: black;"></view>
<!--內(nèi)容區(qū)域 包含底部導(dǎo)航-->
<view class="" style="height: {{screenHeight - CustomBar - tabBarHeight}}px;background-color: black;"></view>
</view>
頁(yè)面js代碼：
const app = getApp()
Page({
data: {
screenHeight: app.globalData.screenHeight,
CustomBar: app.globalData.CustomBar,
tabBarHeight: app.globalData.tabBarHeight,
}
})
app.js代碼：
// app.js
App({
globalData:{
},
onLaunch: function() {
// 獲取系統(tǒng)狀態(tài)欄信息
wx.getSystemInfo({
success: e => {
this.globalData.screenHeight = e.screenHeight;
this.globalData.tabBarHeight = e.screenHeight - e.safeArea.bottom + 50
let capsule = wx.getMenuButtonBoundingClientRect();
if (capsule) {
this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
} else {
this.globalData.CustomBar = e.statusBarHeight + 50;
}
}
},
)}
})
2.3 底部導(dǎo)航欄
1.位置
2.如何獲取
頁(yè)面代碼：
<view style="height: {{screenHeight}}px;background-color: aliceblue;">
<!--頂部導(dǎo)航高度-->
<view style="height: {{customBar}}px;background-color: blue;"></view>
<!--內(nèi)容高度 包含底部導(dǎo)航-->
<view style="height: {{screenHeight - customBar - tabBar}}px;background-color: black;"></view>
<!--底部導(dǎo)航高度-->
<view style="height: {{tabBarHeight}}px;background-color: red;"></view>
</view>
頁(yè)面js代碼：
const app = getApp()
Page({
data: {
screenHeight: app.globalData.screenHeight,
statusBarHeight: app.globalData.statusBarHeight,
customBar: app.globalData.CustomBar,
tabBar: app.globalData.tabBarHeight,
tabBarHeight: app.globalData.tabBarHeight
}
})
app.js代碼：
onLaunch: function() {
wx.getSystemInfo({
success: e => {
this.globalData.screenHeight = e.screenHeight;
this.globalData.tabBarHeight = e.screenHeight-e.safeArea.bottom + 50
let capsule = wx.getMenuButtonBoundingClientRect();
if (capsule) {
this.globalData.Custom = capsule;
this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
} else {
this.globalData.CustomBar = e.statusBarHeight + 50;
}
}
},
)}
這個(gè)底部導(dǎo)航欄之所以+50，我是從小程序框架中獲取的，可以直接拿來(lái)用。
三、膠囊體
3.1 什么是膠囊體？
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-786669.html
我們?cè)僮鲎远x頂部導(dǎo)航時(shí)，在一些場(chǎng)景下需要在導(dǎo)航中設(shè)置返回按鈕以及其他信息：
這些按鈕和信息需要和膠囊體對(duì)齊才完美，所以我們需要獲取到膠囊體的位置信息。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-786669.html
3.2 如何獲?。?/h3>
// app.js
App({
globalData:{
},
onLaunch: function() {
// 獲取系統(tǒng)狀態(tài)欄信息
wx.getSystemInfo({
success: e => {
//膠囊體距離頂部距離
this.globalData.capsuleTop = wx.getMenuButtonBoundingClientRect().top;
//膠囊體的高度
this.globalData.capsuleHeight = wx.getMenuButtonBoundingClientRect().height;
//膠囊體的寬度
this.globalData.capsuleWidth = wx.getMenuButtonBoundingClientRect().width;
}
},
wx.onKeyboardHeightChange((res) => {
console.log('鍵盤(pán)高度111111：', res.height)
wx.setStorageSync('keyBordHeight', res.height)
})
)}
})
// app.js
App({
globalData:{
},
onLaunch: function() {
// 獲取系統(tǒng)狀態(tài)欄信息
wx.getSystemInfo({
success: e => {
//膠囊體距離頂部距離
this.globalData.capsuleTop = wx.getMenuButtonBoundingClientRect().top;
//膠囊體的高度
this.globalData.capsuleHeight = wx.getMenuButtonBoundingClientRect().height;
//膠囊體的寬度
this.globalData.capsuleWidth = wx.getMenuButtonBoundingClientRect().width;
}
},
wx.onKeyboardHeightChange((res) => {
console.log('鍵盤(pán)高度111111：', res.height)
wx.setStorageSync('keyBordHeight', res.height)
})
)}
})
到了這里，關(guān)于微信小程序第一節(jié) —— 自定義頂部、底部導(dǎo)航欄以及獲取膠囊體位置信息。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
