uniapp可视化区域的坑？

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

最近在使用uniapp进行开发，记录一下开发过程中所遇到的坑

提示：以下是本篇文章正文内容，下面案例可供参考

一、uniapp可视化区域的坑？

uniapp众所周知，可写多端，但是每一端都有不同的兼容，首先我们看一下可视化区域的兼容

二、获取可视化区域

1.内置api

代码如下（示例）：

const res = uni.getSystemInfoSync();
console.log(res.platform, res.statusBarHeight);
if (system === 'ios') {
		return 40 + res.statusBarHeight
	} else if (system === 'android') {
		return 48 + res.statusBarHeight
	} else {
		return 0;
	}

注：该处使用的是同步获取app的设置，可以获取到（res.platform）手机端（ios端或andriod），和状态栏的高(res.statusBarHeight) *40是ios手机头部区域，48是andriod头部区域

2.获取可视化区域

代码如下（示例）：

uni.getSystemInfo({
	success: (res) => {
		this.clentHeight = res.windowHeight -uni.upx2px(80) - this.getClientHeight()
		}
	})

注:获取的可视化高度为，内置api获取的视图高度(包括头部和状态栏)，所以要减去状态栏和头部还要减去我们的topBar的高
所得为我们所满足的可视区域

---

总结

提示：这里对文章进行总结：
uniapp既方便又快捷可以开发多端，但是也有不少的坑，后面开发会继续记录所遇到的坑，欢迎大佬们指点