小程序可以通过wx.getSystemInfo获取系统信息
1. windowHeight
概念
可使用窗口高度,即:屏幕高度(screenHeight
) - 导航(tabbar
)高度 - 导航栏高度 - 状态栏高度。
在不含导航(tabbar)的页面,
windowHeight =屏幕高度(screenHeight
) - 导航栏高度 - 状态栏高度
了解规则
iPhone X : 导航栏高度 44 、 状态栏高度 44 、tabBar高度 83
其他机型 : 导航栏高度 44 、 状态栏高度 20 、 tabBar高度 49
2.使用windoeHeight
在页面中调用wx.getSystemInfo即可获取当前页面的屏幕高度,
wx.getSystemInfo({
success: function (res) {
console.log('--------------获取系统信息,获取屏幕高度---------------')
console.log(res)
},
fail: function (res) { },
complete: function (res) { },
})
3.不同页面WINDOWHEIGHT不一致解决办法
但是不同页面获取的屏幕高度不同,为了方便使用,将WINDOWHEIGHT写入全局变量,在含有的TabBar页面正常调用,在不含的TabBar页面加上的TabBar的高度使用
app.js
onLaunch(){
// 获取屏幕高度
wx.getSystemInfo({
success: function (res) {
that.globalData.windowHeight = res.windowHeight
},
})
},
globalData: {
windowHeight:''
}
含有的TabBar的页面
xxx.js
var app = getApp();
data:{
windowHeight: app.globalData.windowHeight,
}
不含的TabBar的页面
xxx.js
var app = getApp();
data:{
windowHeight: app.globalData.windowHeight + 48,
}
页面使用
xxx.wxml
<view style='height:{{windowHeight+"px"}}'>
在app.js中获取到的WINDOWHEIGHT包含的TabBar的高度
所以在不含的TabBar的页面比含的TabBar页面需要多加一个的TabBar的高度
以下为小程序官方文档wx.getSystemInfo的介绍
wx.getSystemInfo(Object object)
获取系统信息
参数
对象对象
属性 | 类型 | 默认值 | 是否必填 | 说明 | 支持版本 |
---|---|---|---|---|---|
成功 | 功能 | 否 | 接口调用成功的回调函数 | ||
失败 | 功能 | 否 | 接口调用失败的回调函数 | ||
完成 | 功能 | 否 | 接口调用结束的回调函数(调用成功,失败都会执行) |
object.success回调函数
参数
对象资源
属性 | 类型 | 说明 | 支持版本 |
---|---|---|---|
牌 | 串 | 手机品牌 | > = 1.5.0 |
模型 | 串 | 手机型号 | |
pixelRatio | 数 | 设备像素比 | |
屏幕宽度 | 数 | 屏幕宽度 | > = 1.1.0 |
screenHeight | 数 | 屏幕高度 | > = 1.1.0 |
WINDOWWIDTH | 数 | 可使用窗口宽度 | |
WINDOWHEIGHT | 数 | 可使用窗口高度 | |
statusBarHeight | 数 | 状态栏的高度 | > = 1.9.0 |
语言 | 串 | 微信设置的语言 | |
版 | 串 | 微信版本号 | |
系统 | 串 | 操作系统版本 | |
平台 | 串 | 客户端平台 | |
fontSizeSetting | 数 | 用户字体大小设置。以“我 - 设置 - 通用 - 字体大小”中的设置为准,单位px。 | > = 1.5.0 |
SDKVersion | 串 | 客户端基础库版本 | > = 1.1.0 |
benchmarkLevel | 数 | (仅Android)性能等级,-2或0:该设备无法运行小游戏,-1:性能未知,> = 1设备性能值,该值越高,设备性能越好(目前设备最高不到50) | > = 1.8.0 |