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

參與微信小程序開發有一段時間了，前後完成信息查詢類和交易類的兩個不一樣性質的小程序產品的開發；期間遇到各類各樣的小程序開發的坑，有的是小程序基礎功能不斷改進完善而須要業務持續的適配，有的是小程序使用上的一些坑；下面針對小程序開發過程當中遇到的一些坑跟你們分享，有些沒有深究具體緣由；

一、原生組件遮蓋的問題

因爲原生組件層級最高，即便設置了其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%;