在移动端开发过程中，经常遇到iphone11、iphoneX底部小黑条遮挡页面底部，纯css实现设备的适配。详见我的上篇文章。
在开发微信小程序中，也会遇到iPhone全面屏手机，底部小黑条会遮挡页面底部，尽管微信小程序已经实现部分页面的适配，但个别页面仍旧需要做适配处理。
解决方案：使用wx.getSystemInfoSync()中的screenHeight和safeArea对象的bottom属性判断
screenHeight是获取屏幕的高度，因为bottom是以屏幕左上角为原点开始计算的，所以需要的是屏幕高度。
safeArea对象的bottom属性是安全区域右下角纵坐标。
screenHeight减去safeArea对象的bottom属性，则是底部小黑条的高度。
获取底部小黑条的高度,全局存储使用。
在全局app.js里，需要全局存储一个数据
globalData: {
bottomHeight:0
}2.在全局app.js的onLaunch函数：
wx.getSystemInfo({
success: res => {
this.globalData.bottomHeight = res.screenHeight - res.safeArea.bottom;
},
fail(err) {
console.log(err);
}
})3.在所需页面的js文件从全局变量中获取
onLoad: function (options) {
this.setData({
bottomHeight : app.globalData.bottomHeight
})
}4.在所需页面的wxml里面使用：文章来源：https://www.toymoban.com/news/detail-538958.html
<view class="page" style="padding-bottom:{{bottomHeight }}px">完美实现适配！文章来源地址https://www.toymoban.com/news/detail-538958.html
到了这里，关于(保姆级)微信小程序 iPhone 11、iPhoneX 底部安全区域（底部小黑条）适配的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
