微信小程序系统信息API重构:从单一接口到五大专项API
微信官方对系统信息获取能力进行了拆分重构,将原本通过 wx.getSystemInfoSync 一次性返回几十项字段(涵盖布局、设备、版本、权限等)的臃肿模式,优化为5个职责单一的同步API。新方案支持按需获取数据,无需 success 回调,使代码逻辑更清晰,维护成本更低。
以下5个接口均无入参,采用同步调用方式直接返回结果。
1. wx.getWindowInfo():UI适配核心
作用:获取窗口布局、状态栏高度、安全区域及屏幕尺寸,是进行UI适配的首选接口。
// 获取窗口信息
const winInfo = wx.getWindowInfo()
// 计算iPhone底部安全距离(避开手势条)
const bottomSafePadding = winInfo.safeArea ? winInfo.windowHeight - winInfo.safeArea.bottom : 0
console.log('状态栏高度:', winInfo.statusBarHeight)
console.log('底部安全距离:', bottomSafePadding)
// 单独获取状态栏高度示例
const winInfo = wx.getWindowInfo()
const statusBarHeight = winInfo.statusBarHeight
console.log('状态栏高度:', statusBarHeight)
2. wx.getDeviceInfo():设备特征识别
作用:获取设备品牌、型号及系统平台,常用于区分 iOS 与 Android 环境。
const deviceInfo = wx.getDeviceInfo()
// 判断平台
if(deviceInfo.platform === 'ios') {
console.log('当前是苹果设备')
}else if(deviceInfo.platform === 'android') {
console.log('当前是安卓设备')
}
3. wx.getAppBaseInfo():应用基础环境
作用:获取微信客户端版本、基础库版本、深色主题状态及字体缩放比例。
const appBaseInfo = wx.getAppBaseInfo()
// 深色模式判断
if (appBaseInfo.theme === 'dark') {
console.log('用户开启深色模式,切换深色样式')
}
// 基础库版本兼容判断
console.log('当前基础库版本:', appBaseInfo.SDKVersion)
4. wx.getSystemSetting():系统开关检测
作用:读取定位、蓝牙、WiFi等功能的系统级总开关状态(注意:此为非小程序授权层面的系统设置)。
const systemSetting = wx.getSystemSetting()
// 检测系统定位开关是否打开
if (!systemSetting.locationEnabled) {
wx.showToast({
title: '请先在手机设置开启定位',
icon: 'none'
})
}
5. wx.getMenuButtonBoundingClientRect():胶囊按钮坐标
作用:获取右上角胶囊按钮的位置信息,是实现自定义导航栏的核心接口。
const winInfo = wx.getWindowInfo()
const capsule = wx.getMenuButtonBoundingClientRect()
// 计算自定义导航栏高度(行业通用公式)
const navHeight = winInfo.statusBarHeight + capsule.height + (capsule.top - winInfo.statusBarHeight) * 2
console.log('导航栏高度:', navHeight)
总结:各司其职,按需调用
新版API体系告别了 getSystemInfoSync 全量返回的冗余写法,实现了模块化分工:
- UI布局数据(状态栏、安全区):使用
wx.getWindowInfo - 设备平台判断:使用
wx.getDeviceInfo - 环境与主题(深色模式、基础库版本):使用
wx.getAppBaseInfo - 系统功能开关(定位、蓝牙):使用
wx.getSystemSetting - 自定义导航栏:搭配
wx.getMenuButtonBoundingClientRect获取胶囊位置
这种按需调用的方式不仅让代码更加清爽,也极大地提升了后续逻辑维护与新特性适配的效率。
#微信小程序

