一、前言

这两天正在开发商城小程序-商品详情页，在做设备测试的时候突然发现详情页底部—— 购物车 和 购买区域在苹果手机上不适配，并且还存在小黑条。 底部功能没有办法正常使用。 如下图所示：

解决后效果，如下图所示：

二、解决方案

使用小程序开发获取系统信息的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，也是对项目的认可与支持！

github.com/yundianzixu…