微信小程序的坑(持续更新中)

参与微信小程序开发有一段时间了，前后完成信息查询类和交易类的两个不一样性质的小程序产品的开发；期间遇到各类各样的小程序开发的坑，有的是小程序基础功能不断改进完善而须要业务持续的适配，有的是小程序使用上的一些坑；下面针对小程序开发过程当中遇到的一些坑跟你们分享，有些没有深究具体缘由；

一、原生组件遮盖的问题

因为原生组件层级最高，即便设置了其z-index也于事无补；不能随意在其层级上展现信息，只能经过cover-view和cover-image组件(其实这两个组件也是原生组件)来进行遮盖；

例如,下图在map原生组件上遮盖层：上方banner、地图上的气泡指针以及右下角的归位。

另外须要注意一点，若要在覆盖原生组件上，还须要保证一点：

因为`cover-view`和`cover-image`也是原生组件，须要保证他们插入页面的时机晚于要覆盖的原生组件，即先要插入原生组件。

例如上图中，地图上的banner遮盖层若不是包含在map原生组件内，那么就须要在map出现后插入，不然map组件也会覆盖cover-veiw

二、不支持base64格式的图片问题

小程序有些图片是不支持base64格式的，例如cover-image，地图marker的iconPath等。在配合webpack构建小程序代码时须要注意不要对这些图片进行base64转换。

三、地图mapContext的问题

小程序打开AB两个页面，B页面由A页面navigateTo而来，A、B两个页面都有地图组件，而且两个页面都经过wx.createMapContext建立了地图的mapContext。

在小程序基础库2.3.0~2.6.2版本下产生一个问题：

B页面返回A页面，A页面地图的mapContext提供方法的回调都不会执行，在2.6.0版本下会每次调用mapContext的方法，都会在mapContext上生成一堆callback。

例如由B页面返回的A页面屡次调用mapContext提供的方法，会在其上挂载callback，由于回调方法得不到执行，因此挂载其上的callback函数无法删除

四、onError捕获错误的问题

小程序经过App实例的onError方法来捕获小程序的异常信息，经过该方法能收集异常从而实现小程序的异常监控；

小程序的错误收集内部具体的实现：

• 视图渲染层是经过window.onerror来捕获前端错误
• 服务层是经过try-catch来捕获错误的

那么能够知道:

小程序对promise的unhandledrejection异常是没法捕获的，须要开发者本身catch promise抛出的异常;

五、ios10系统下flex:1的父元素，其子元素height:100%未充满父元素

小程序在ios10系统下，对于以下结构的模板：

<!-- 页面内容 -->
<template>
  <view class="test">
    <view class="test1">
      <view class="child">haha</view>
    </view>
    <view class="test2"></view>
  </view>
</template>

.test
    width: 100%
    height: 100%
    flex-direction: column
    display: flex

    .test1
      flex 1
      width 100%
       border 1px solid #000
      .child
        height 100%
        background #fc9153
    .test2
      width 100%
      height 226px
      border 1px solid #eee

在ios10的设备下，其展现效果结果以下图所示：

能够看见，在ios10系统下，父元素view.test1的子元素view.child并未充满整个父元素，其实这个问题在web也出现过相似问题，如:

• 父容器display:flex后，子元素的内部元素height:100%无效解决方法
• chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%没法充满父元素

解决办法是父类容器设置position:relative; 子元素设置：position:absolute;width:100%,height:100%;