參與微信小程序開發有一段時間了,前後完成信息查詢類和交易類的兩個不一樣性質的小程序產品的開發;期間遇到各類各樣的小程序開發的坑,有的是小程序基礎功能不斷改進完善而須要業務持續的適配,有的是小程序使用上的一些坑;下面針對小程序開發過程當中遇到的一些坑跟你們分享,有些沒有深究具體緣由;css
因爲原生組件層級最高,即便設置了其z-index
也於事無補;不能隨意在其層級上展現信息,只能經過cover-view
和cover-image
組件(其實這兩個組件也是原生組件)來進行遮蓋;html
例如,下圖在map原生組件上遮蓋層:上方banner、地圖上的氣泡指針以及右下角的歸位。前端
另外須要注意一點,若要在覆蓋原生組件上,還須要保證一點:webpack
因爲`cover-view`和`cover-image`也是原生組件,須要保證他們插入頁面的時機晚於要覆蓋的原生組件,即先要插入原生組件。
例如上圖中,地圖上的banner遮蓋層若不是包含在map原生組件內,那麼就須要在map出現後插入,不然map組件也會覆蓋cover-veiwios
小程序有些圖片是不支持base64格式的,例如cover-image
,地圖marker的iconPath
等。在配合webpack構建小程序代碼時須要注意不要對這些圖片進行base64轉換。web
小程序打開AB兩個頁面,B頁面由A頁面navigateTo
而來,A、B兩個頁面都有地圖組件,而且兩個頁面都經過wx.createMapContext
建立了地圖的mapContext。chrome
在小程序基礎庫2.3.0~2.6.2
版本下產生一個問題:小程序
B頁面返回A頁面,A頁面地圖的mapContext提供方法的回調都不會執行,在2.6.0版本下會每次調用mapContext的方法,都會在mapContext上生成一堆callback。微信小程序
例如由B頁面返回的A頁面屢次調用mapContext提供的方法,會在其上掛載callback,由於回調方法得不到執行,因此掛載其上的callback函數無法刪除
promise
小程序經過App實例的onError方法來捕獲小程序的異常信息,經過該方法能收集異常從而實現小程序的異常監控;
小程序的錯誤收集內部具體的實現:
window.onerror
來捕獲前端錯誤try-catch
來捕獲錯誤的那麼能夠知道:
小程序對promise的
unhandledrejection
異常是沒法捕獲的,須要開發者本身catch promise拋出的異常;
小程序在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也出現過相似問題,如:
解決辦法是父類容器設置position:relative; 子元素設置:position:absolute;width:100%,height:100%;