(保姆级)微信小程序 iPhone 11、iPhoneX 底部安全区域底部小黑条适配

在开发微信小程序中，也会遇到iPhone全面屏手机，底部小黑条会遮挡页面底部，尽管微信小程序已经实现部分页面的适配，但个别页面仍旧需要做适配处理。

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

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

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

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

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

1. 在全局app.js里，需要全局存储一个数据

1.  
   globalData: {
2.  
   bottomHeight:0
3.  
   }

2.在全局app.js的onLaunch函数：

1.  
   wx.getSystemInfo({
2.  
   　　success: res => {
3.  
   　　　　this.globalData.bottomHeight = res.screenHeight - res.safeArea.bottom;
4.  
   　　},
5.  
   　　fail(err) {
6.  
   　　　　console.log(err);
7.  
   　　}
8.  
   })

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

1.  
   onLoad: function (options) {
2.  
    
3.  
   　　this.setData({
4.  
   　　　　bottomHeight : app.globalData.bottomHeight
5.  
   　　})
6.  
    
7.  
   }

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

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

完美实现适配！