商城小程序踩坑（一）：iPhone 11、iPhoneX 等设备底部安全区域/小黑条适配

本文链接：https://blog.csdn.net/zhenghhgz/article/details/132021405

文章介绍了在开发小程序商品详情页时遇到的苹果手机底部购物车和购买区域不适配的问题，以及如何通过wx.getSystemInfoSync()API获取屏幕和安全区域信息，动态计算底部黑条高度并设置全局变量，实现不同机型的适配。解决方案包括获取屏幕高度、设置全局底部高度、在页面中应用该高度值进行适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

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

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

二、解决方案

使用小程序开发获取系统信息的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…