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

START

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

• 如下图

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

解决方案

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

• 方案一

  • 苹果官方推荐使用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>
      

解决后的效果

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

方案一

• 实践过后，微信小程序上是可以使用的，
• 猜测微信小程序默认就是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,没有底部小黑条没有问题

---

iPhone XR，padding出现，没有问题

iPhone 11 ，padding出现，没有问题

---

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

---

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

• 查阅相关博客

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

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

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

有关微信小程序和字节小程序

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

END

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