一、前言
这两天正在开发商城小程序-商品详情页，在做设备测试的时候突然发现详情页底部—— 购物车 和 购买区域在苹果手机上不适配，并且还存在小黑条。 底部功能没有办法正常使用。 如下图所示：
解决后效果，如下图所示：
二、解决方案
使用小程序开发获取系统信息的API: wx.getSystemInfoSync()，通过该API可以获取到屏幕的高度，如下图所示：
还有竖屏正方向下的安全区域safeArea对象的bottom属性判断，如下图所示：
由screenHeight减去safeArea对象的bottom属性，则是底部小黑条的高度。
1. 在app.js的onLanuch函数中添加以下代码获取高度值：
wx.getSystemInfo({
success: res => {
this.globalData.bottomHeight = res.screenHeight - res.safeArea.bottom;
},
fail(err) {
console.log(err);
}
})
2. 为了方便全局使用我们需要创建一个全局存储高度的属性：bottomHeight
globalData: {
bottomHeight:0
}
3. 在需要兼容底部安全区域的js文件中获取设置的全局变量高度
xx.js
onLoad: function (options) {
this.setData({
bottomHeight : app.globalData.bottomHeight
})
}
如图所示例，小编在详情页的js增加了上述代码：
4. 最后在所需页面的wxml里面增加以下代码：
<view class="container" style="padding-bottom:{{bottomHeight}}px">
总结
小编测试了部分安卓机、iPhone11、iPhoneX、iPhone12 等多个机型可以完美适配有需要代码的可以从下方获取：
开源不易，大家给项目
点个Star，也是对项目的认可与支持！
