微信小程序 - iphone适配底部安全距离

页面结构

在使用之前先介绍一下用到的api：

wx.getWindowInfo()

基础库 2.20.1 开始支持，低版本需做兼容处理。

小程序插件：支持，需要小程序基础库版本不低于 2.21.3

微信 Windows 版：支持

微信 Mac 版：支持

在这里放一下api地址

用到的参数

属性	类型	说明
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

有什么补充欢迎评论区讨论