小程序(微信/字节)苹果手机底部小黑条优化

START

  • 最近番茄在开发小程序(字节跳动的),遇到苹果手机底部有一个小黑条,看着很不舒服,坚决要把它优化一下。

  • 如下图

小程序(微信/字节)苹果手机底部小黑条优化_第1张图片

  • 记录一下,解决方案,以及自己研究的结果。

解决方案

百度到,有很多方案,去解决这个问题,太多,太杂了。有很多讲的是网页,而不是小程序,而我的需求是小程序,所以这里我就简单的列举一下,两种我尝试多次的方法。

  • 方案一
    • 苹果官方推荐使用env(),constant()来适配,而env()和constant()函数有个必要的使用前提,当网页设置viewport-fit=cover的时候才生效。

    • padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
      padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
      /* 顺序不可变*/
      
  • 方案二
    • 简单来说,就是判断手机型号(写死的,有点蠢,但是没找到更好的方案),如果是特定的手机型号,就给底部的元素添加一个padding即可。

    • 具体操作如下:

      • app.js

        App({
          globalData: {
            isFullSucreen: false,
          },
          onLaunch: function (options) {
            const self = this;
            wx.getSystemInfo({
              success: function (res) {
                let modelmes = res.model;
                let iphoneArr = ['iPhone X', 'iPhone 11', 'iPhone 11 Pro Max',]
                iphoneArr.forEach(function (item) {
                  if (modelmes.search(item) != -1) {
                    self.globalData.isFullSucreen = true
                  }
                })    
              },
            });
          },
        });
        
        
      • page.js

        const app = getApp();
        
        Page({
          data: {
          },
          onLoad() {
            let {isFullSucreen} = app.globalData
            if(isFullSucreen){
              this.setData({
                bottomLift:68,
              })
            }
          }
          ,
          onShow() {},
          onReady() {
          },
          onHide() {},
          onUnload() {},
        });
        
        
      • page.wxml

        <view class="bottom" style="padding-bottom: {{ bottomLift }}rpx">
        view>
        

解决后的效果

小程序(微信/字节)苹果手机底部小黑条优化_第2张图片

上述解决方案实际使用情况

方案一
  • 实践过后,微信小程序上是可以使用的,
  • 猜测微信小程序默认就是viewport-fit=cover
  • 可是我开发的是,字节跳动的小程序,被恶心到了o(╥﹏╥)o,尝试了很多遍,都以失败告终。这条路走不通,换条路。(看它后续什么时候修复吧,20210310)

总结

方案一,简单明了快捷,在微信小程序中推荐使用。(毕竟是苹果官方推荐的解决方案)

方案二
  • 第二种,微信,字节都是可以使用的,没有问题,就是手机型号写死了,有点笨笨的感觉。

总结

方案二,略微复杂,但是也是有效的,扩展性不行。

题外话时间

下面说说题外话,写一写自己,在实践的过程中,遇到的情况。

苹果12怎么处理
  • 现在都2021年了,考虑到苹果11,所以添加了如下代码

    let iphoneArr = ['iPhone X', 'iPhone 11', 'iPhone 11 Pro Max',]

  • 我身边的小伙伴都是12pm,我就在思考,这种固定手机型号的方式针对12的用户怎么做?

    举一反三,如法炮制?就像这样?

    let iphoneArr = ['iPhone X', 'iPhone 11', 'iPhone 11 Pro Max','iPhone 12']

  • 结果失败了

  • 为了方便调试原因,我在页面上打印了wx.getSystemInfo方法获取到的手机号,见下图(全部都是真机调试)。


小米8,没有底部小黑条没有问题
小程序(微信/字节)苹果手机底部小黑条优化_第3张图片


iPhone XR,padding出现,没有问题
小程序(微信/字节)苹果手机底部小黑条优化_第4张图片

iPhone 11 ,padding出现,没有问题

小程序(微信/字节)苹果手机底部小黑条优化_第5张图片


iPhone 12 ,没有padding,有问题,打印的居然是13,2

小程序(微信/字节)苹果手机底部小黑条优化_第6张图片


  • 发现苹果12,打印出来的居然是,iPhone13,2

  • 查阅相关博客

小程序(微信/字节)苹果手机底部小黑条优化_第7张图片

  • 由上图得知,苹果12的设备型号iPhone13,2

  • 但理论上来说, wx.getSystemInfo返回的 res.model 。正确的应该是设备名称,即iPhone 12,才符合之前的规则。这有可能是一个bug,而且微信,字节(wx.getSystemInfo,tt.getSystemInfo)都是返回iPhone 13,2

  • 后续查阅了相关文档,如下图说明:

小程序(微信/字节)苹果手机底部小黑条优化_第8张图片

有关微信小程序和字节小程序
  • 我在开发字节跳动的小程序,使用wx.getSystemInfo()获取手机信息的时候。由于疏忽,没有将wx替换为tt(字节跳动的简称),程序居然正常运行,这中间原理,我是不太理解了。。。可能做了某些处理吧。
  • 总的来说,字节跳动的小程序槽点太多了,而且还没有相关博客文档(有,那也很简陋)。
  • 吐槽归吐槽,也希望它逐步完善吧,加油。

END

  • 就写到这里了,一是记录一下苹果底部安全距离优化;二是吐槽一下字节跳动小程序。
  • 写于2021/03/10,后续看官方会不会修复了。

你可能感兴趣的:(小程序,小程序,iphone)