參與微信小程序開發有一段時間了，先后完成信息查詢類和交易類的兩個不同性質的小程序產品的開發；期間遇到各種各樣的小程序開發的坑，有的是小程序基礎功能不斷改進完善而需要業務持續的適配，有的是小程序使用上的一些坑；下面針對小程序開發過程中遇到的一些坑跟大家分享，有些沒有深究具體原因；
1、原生組件遮蓋的問題
由於原生組件層級最高，即使設置了其z-index也於事無補；不能隨意在其層級上展示信息，只能通過cover-view和cover-image組件(其實這兩個組件也是原生組件)來進行遮蓋；
例如,下圖在map原生組件上遮蓋層：上方banner、地圖上的氣泡指針以及右下角的歸位。
另外需要注意一點，若要在覆蓋原生組件上，還需要保證一點：
由於`cover-view`和`cover-image`也是原生組件，需要保證他們插入頁面的時機晚於要覆蓋的原生組件，即先要插入原生組件。
例如上圖中，地圖上的banner遮蓋層若不是包含在map原生組件內，那么就需要在map出現后插入，否則map組件也會覆蓋cover-veiw
2、不支持base64格式的圖片問題
小程序有些圖片是不支持base64格式的，例如cover-image，地圖marker的iconPath等。在配合webpack構建小程序代碼時需要注意不要對這些圖片進行base64轉換。
3、地圖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函數沒法刪除
4、onError捕獲錯誤的問題
小程序通過App實例的onError方法來捕獲小程序的異常信息，通過該方法能收集異常從而實現小程序的異常監控；
小程序的錯誤收集內部具體的實現：
- 視圖渲染層是通過
window.onerror來捕獲前端錯誤 - 服務層是通過
try-catch來捕獲錯誤的
那么可以知道:
小程序對promise的
unhandledrejection異常是無法捕獲的，需要開發者自己catch promise拋出的異常;
5、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%;
6、自定義組件用slot插入cover-view的問題
自定義組件使用slot嵌套cover-view 時，自定義組件的 slot 及其父節點暫不支持通過 wx:if 控制顯隱，否則會導致 cover-view 不顯示。例如：
<!-- ComponentA -->
<cover-view wx:if="{{ status === 'fail' }}">
<slot name="before"></slot>
<cover-view>{{ failDesc }}</cover-view>
<slot name="after"></slot>
</cover-view>
<!-- PageA -->
<ComponentA>
<cover-image src="xxx.png" slot="before"/>
<cover-view slot="after">hellow word</cover-view>
</ComponentA>
上面自定義組件ComponentA因為使用了slot來嵌套cover-view，而其父節點使用了wx:if控制顯隱，導致在真機環境slot的cover-image和cover-view內容不顯示。
7、mapCtx.includePoints方法配置回調函數在2.6.4版本下不執行
小程序地圖上下文方法MapContext.includePoints(Object object)配置的任何回調函數success、fail和complete均不執行，有人為此提出過類似問題this.mapCtx.includePoints回調無效。
目前官方已經在>= 2.6.4版本修復了該問題，低於該版本仍然存在這個問題。
8、小程序訂閱消息方法wx.requestSubscribeMessage
微信小程序消息推送模板改為訂閱消息后，需要事先讓用戶進行消息訂閱，代碼層面是調用wx.requestSubscribeMessage方法，需要注意以下兩點：
- wx.requestSubscribeMessage方法只能在tap事件中觸發
- wx.requestSubscribeMessage方法只能在事件中同步調用。
否則會報requestSubscribeMessage:fail can only be invoked by user TAP gesture錯誤