微信小程序 - iphone适配底部安全距离
页面结构
在使用之前先介绍一下用到的api:
wx.getWindowInfo()
基础库 2.20.1 开始支持,低版本需做兼容处理。
小程序插件:支持,需要小程序基础库版本不低于 2.21.3
微信 Windows 版:支持
微信 Mac 版:支持
用到的参数
属性 类型 说明 pixelRatio number 设备像素比 safeArea Object 在竖屏正方向下的安全区域。部分机型没有安全区域概念,也不会返回 safeArea 字段,开发者需自行兼容 safeArea.bottom number 安全区域右下角纵坐标 screenHeight number 屏幕高度,单位px windowWidth number 可使用窗口宽度,单位px
在main.js 中引入全局变量
- 虚拟home键区域高度 = 屏幕高度-安全区域的右下角坐标
import {
createSSRApp
} from 'vue'
export function createApp() {
const app = createSSRApp(App)
// 将变量$safeHeight引入uni.$u 指向uview全局
// ------------------------------------------
// uni.$u.$safeHeight = () => new Promise((resolve,reject)=>{
// wx.getSystemInfo({ //
// success: res => {
// resolve ((res.screenHeight - res.safeArea.bottom) * res.pixelRatio)
// },
// fail: err => {
// console.log(err);
// }
// })
// })
// 由于历史原因 wx.getSystemInfo() 是异步的调用格式,但是是同步返回,需要用Promise的格式调用,从基础库 [2.20.1] 开始,停止维护, 使用wx.getWindowInfo()代替
uni.$u.$safeHeight = () => {
const sysInfo = wx.getWindowInfo()
// return (sysInfo.screenHeight - sysInfo.safeArea.bottom) * sysInfo.pixelRatio 由于pixelRatio数值不准确
return (sysInfo.screenHeight - sysInfo.safeArea.bottom) * (750 / sysInfo.windowWidth)
}
// 引入请求封装
initRequest(app)
//引入uviewPlue库
app.use(uviewPlus)
return {
app
}
}
在需要调用的页面调用
const safeHeight = uni.$u.$safeHeight() // 获得底部虚拟home键的高度 单位rpx
有什么补充欢迎评论区讨论