微信小程序

2023-07-25 13:46| 来源: 网络整理| 查看: 265

在苹果 iPhoneX 、iPhone XR等设备上，可以看到物理Home键被取消，改为底部小黑条替代home键功能。微信小程序和 h5 网页需要针对这种情况进行适配，否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况，如下图。在这里插入图片描述在微信小程序上适配安全区域

三种方案：

使用已知底部小黑条高度34px/68rpx来适配（不推荐）使用微信官方API，getSystemInfo()中的safeArea对象进行适配（推荐）使用苹果官方推出的css函数env()、constant()适配（推荐）

方案一：使用已知底部小黑条高度34px/68rpx来适配（不推荐）

这是比较老的方法，跟方案2、3比已经不推荐了，大家可以了解了解，着急可以直接看方案2和3。

从网上了解到，iPhone底部的小黑条（Home Indicator）高度是34px，实际我也在真机确认了是34px，所以可以根据该值，设置底部按钮或选项卡的margin-bottom、padding-bottom、height等，或者添加一个div来占位小黑条的位置。

这样做要有一个前提，需要判断当前机型是需要适配安全区域的机型。

问题：如何判断当前机型是需要适配安全区域

2种方案：使用wx.getSystemInfoSync()的model属性判断使用wx.getSystemInfoSync()中的screenHeight和safeArea对象的bottom属性判断方法一：使用wx.getSystemInfoSync()的model属性判断已知市面上已有的带安全区域的苹果设备包括iPhone X、iPhone XR、iPhone XS Max、iPhone 11、iPhone 11 Pro、iPhone 11 Pro Max，所以可以直接从getSystemInfoSync()方法中拿到model属性进行判断。iPhone系列微信还未适配手机的model返回值为unknown(iphone)，也可以提前做适配。

let IPHONE_X = /iphone x/i let IPHONE_X_11 = /iphone 11/i let IPHONE_UNKNOWN = /unknown\(iphone\)/i //方法一：使用model判断是否是IPhoneX及其他包含安全区域的机型手机 const isIPhoneX = () => { let model = wx.getSystemInfoSync().model return (model.search(IPHONE_X) > -1 || model.search(IPHONE_X_11) > -1 || model.search(IPHONE_UNKNOWN) > -1) } //也可以使用正则表达式判断 const isIPhoneXRegex = () => { let model = wx.getSystemInfoSync().model return (/iphone\sx/i.test(model) || (/iphone/i.test(model) && /unknown/.test(model)) || /iphone\s11/i.test(model)) }

方法二：使用wx.getSystemInfoSync()中的screenHeight和safeArea对象的bottom属性判断这里使用screenHeight而不是windowHeight，因为bottom是以屏幕左上角为原点开始计算的，所以需要的是屏幕高度，对比screenHeight和bottom，如果相等则说明不需要适配，不相等则需要适配。

**注意：**如果使用微信开发者工具中的模拟器，screenHeight和bottom始终是相等的，需要用真机来测试。

//方法二：使用wx.getSystemInfoSync()中的screenHeight和safeArea的bottom判断

const isIPhoneX = () => { let screenHeight = wx.getSystemInfoSync().screenHeight let bottom = wx.getSystemInfoSync().safeArea.bottom return screenHeight !== bottom }

解决了如何判断设备是iPhoneX的问题，就可以写代码了。

【本文地址】

微信小程序

微信小程序

今日新闻

推荐新闻