uniapp多端小程序中中各部分尺寸的计算方法_uniapp 计算height

因为各小程序平台能给到的api有一定的差异。

而当小程序用于多端的时候，对于某些设计，可能需要对各部分的尺寸进行精确计算。
这种情况下，就需要针对不同的小程序做不同的处理了。

先说说几个可能用到的api及支持情况

1、可以直接获取的参数(各家小程序都支持的)
statusBarHeight(获取状态栏高度)

2、部分小程序支持或支持不好的参数
titleBarHeight(标题栏高度，支付宝小程序支持)
navigationBarHeight(导航栏高度，百度小程序支持)
getMenuButtonBoundingClientRect(获取胶囊位置，各家小程序都支持，但是部分小程序存在有时候获取不到的问题，所以可以加一个延时获取的方法)
safeArea/safeAreaInsets (获取安全区数据，QQ小程序没有，支付宝小程序的实际结果可能不准确)

另外，已知支付宝小程序和头条小程序不支持完全自定义导航栏，只能对导航的部分参数进行设置。

下面是计算方法：

1、状态栏高度
statusBarHeight已知，不需计算

2、底部导航栏高度
tabBar因为可以完全自定义，一般做设计图的时候，根据设计情况，固定一个高度就可以，不参与计算。

3、安全区高度

safeAreasafeBottom
这个可以直接获取，一般的小程序都是safeAreaInsets.bottom
支付宝小程序参数有时候是safeArea.bottom有时候是safeAreaInsets.bottom
另外，QQ小程序没有，用0即可。

4、标题栏高度

titleBarHeight支付宝直接获取，百度可以用navigationBarHeight(导航栏高度)-statusBarHeight(状态栏高度)
QQ/微信可以用胶囊位置搭配statusBarHeight获取，具体计算方法是:
胶囊高度+2*(胶囊顶部-statusBarHeight)
这种方法在自定义导航栏模式( "navigationStyle": "custom",)下可行。
但头条小程序不支持完整的自定义导航，暂时没找到方法精确计算标题栏高度，只能根据胶囊位置算一个大概值。
如果哪位大神知道可以计算的方法，望告知。

5、页面内容区域
QQ/微信 因为全部可以自定义，所以是整个screenHeight
支付宝可以用screenHeight(屏幕高度)-statusBarHeight(状态栏高度)-titleBarHeight(标题栏高度)
其他的类似，但是头条的因为titleBarHeight算不出来，也没有具体给定，暂时没法计算。

目前，实际使用的方法是，对于头条和支付宝，按页面内容100%计算，其他的有顶部导航的，就用页面100%减去顶部导航的高度。底部导航直接包在页面内容里面，使用一个同样高度的占位元素进行处理的。这样可以规避内容区实际大小的精确计算。