小程序 顶部,底部兼容 ios

1:小程序开发中，ios系统如 iphoneX  iphone11 iphone12  都有底部安全区域，所以在做的过程中要做兼容，使页面看起来更美观。

（1）：第一种方法直接给对应的类  设置样式便可以。

.class{ 
    padding-top: env( safe-area-inset-top);安全区域距离顶部边界距离
    padding-bottom: env(safe-area-inset-bottom);//安全区域距离底部边界距离
}


//其他属性
 safe-area-inset-left：安全区域距离左边边界距离
 safe-area-inset-right：安全区域距离右边边界距离
 safe-area-inset-top：安全区域距离顶部边界距离
  safe-area-inset-bottom：安全区域距离底部边界距离

（2）：也可以通过判断手机系统型号，定义对应的变量，然后去控制底部的高度。 我这里是设置的小程序全部变量 isIphoneX   然后在页面中获取，再去控制底部高度。

//app.js
App({
  onLaunch: function (res) { 
   wx.getSystemInfo({
      success: (res) => { 
        let modelmes = res.model; 
        if (/iPhone X/i.test(modelmes)||/iPhone 11/i.test(modelmes)||/iPhone 12/i.test(modelmes)) {
          that.globalData.isIphoneX = true
        }   
      }
    });
  },
  globalData: { 
    isIphoneX: false, 
  }
})
 


//页面中js的data
data:{
   isIphoneX: getApp().globalData.isIphoneX,
}
//控制样式 一般都是68rpx 可根据自己需求调整
<view class="ex_botm" style="padding-bottom:{{isIphoneX?'68rpx':'0'}};">
	<button class="yanlv-bc" data-id="shareBtn" open-type="share">分享给好友</button>
</view>