小程序疑难杂症破解(一)

由于公司的的业务基本是围绕微信生态的，小菜酱我开发小程序也有快3年左右的时间了，借此机会想和大家分享一下我开发和迭代小程序时，遇到的问题时如何处理的，也欢迎各位童鞋可以留言你们遇到的问题哟～，文章内容会持续更新哟>_<

1.苹果底部黑边兼容代码

这种情况是当时我们老板用的是苹果x手机，然后发现手机底部有黑色的安全区域，很难触碰到按钮，才发现有这个样式兼容问题的。后来有在网上找了一下，我总结了兼容苹果底部安全区域的方法有2种。

第一种是通过js去动态判断底部需要的高度。首先可以通过wx.getSystemInfo获取设备的信息，可以通过手机的型号或者判断他的system(操作系统名称及版本)字段是否为ios10及其以上 然后在元素上动态绑定需要的高度。

// 获取手机设备信息
wx.getSystemInfo({
      success: function (res) {
        console.log('device-model:', res)
        if (res.model.indexOf('iPhone X') != -1 || res.model.indexOf('iPhone 11') != -1) {
          _this.globalData.deviceType = 1, // 手机是否需要抬高
        }
      }
    })


// ps: 这是1年多前写的代码了，当时只兼容了iphonex 和 iphone 11。
// 缺点就是比较麻烦，而且随着手机型的更新迭代，后续会出更多的型号，不好维护。

第二种，ios新增特性： CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：
safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离 (默认的是34px)
我自己一般比较常用的就是safe-area-inset-bottom。

.m-fixed {
  padding: 16rpx 20rpx 10rpx 0;
  background-color: #fff;
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
  padding-bottom: calc(constant(safe-area-inset-bottom)); /*兼容 IOS<11.2*/
  padding-bottom: calc(env(safe-area-inset-bottom)); /*兼容 IOS>11.2*/
}

对比图：

2.阻止冒泡事件

假如一个场景：页面数据很多，出现了滚动条，此时页面有一个弹窗(背景是个遮罩层)，当滑动遮罩层的时候，页面也会跟着拖动，这种操作是不友好的。可以把点击遮罩层的事件bindtap改为catchtap，就可以避免页面随着遮罩层的滑动而滚动了。

还有一种场景，比如嵌套的标签里有多个事件触发，避免冒泡事件，可以把子标签的bindtap改为catchtap，就可以避免事件往上传播到父标签，从而触发了父标签的事件。

 

持续更新中......