微信小程序--iphone全面屏手机底部小黑条安全区域适配方案

在开发微信小程序中，遇到iPhone全面屏手机，底部小黑条会遮挡页面底部，因此需要做适配处理。

解决方案：使用wx.getSystemInfoSync()中的screenHeight和safeArea对象的bottom属性判断

screenHeight是获取屏幕的高度，因为bottom是以屏幕左上角为原点开始计算的，所以需要的是屏幕高度。

safeArea对象的bottom属性是安全区域右下角纵坐标。

screenHeight减去safeArea对象的bottom属性，则是底部小黑条的高度。

获取底部小黑条的高度,全局存储使用。

app.js的onLaunch函数：

wx.getSystemInfo({
　　success: res => {
　　　　this.globalData.bottomHeight = res.screenHeight - res.safeArea.bottom;
　　},
　　fail(err) {
　　　　console.log(err);
　　}
})

在所需页面的js文件从全局变量中获取：

onLoad: function (options) {

　　this.setData({
　　　　bottomHeight : app.globalData.bottomHeight 
　　})

}

在所需页面的wxml里面使用：

<view class="page" style="padding-bottom:{{bottomHeight }}px">

适配问题解决。

更多信息参照官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getSystemInfoSync.html