前言 
微信小程序自去年公測以來，我司也申請了一個帳號開發(fā)，春節(jié)前后開始開發(fā)，現(xiàn)在終于告一個段落了。謹以此文記錄下踩過的坑。

坑1：scroll-view與onPullDownRefresh沖突 
由于有幾個頁面需要將導(dǎo)航tab欄自動置頂，所以使用了scroll-view。然而又想要下拉刷新，本來想直接使用onPullDownRefresh，結(jié)果卻發(fā)現(xiàn)下拉的時候onPullDownRefresh根本沒有！囧！

研究了半天，最終監(jiān)聽touchXXX自己模擬了個下拉刷新。（具體實現(xiàn)方案改日再分享。）為了盡量接近微信原生的下拉刷新，還特意抄了半天微信原生的下拉刷新動畫...

1. <div class="loading"><div class="dot"></div></div>

1. .loading{
2. display: block;
3. width: 100%;
4. height: 20px;
5. padding: 20px 0;
6. text-align: center;
7. background: #eee;
8. }
9. .loading::before,
10. .loading .dot,
11. .loading::after
12. {
13. content: '';
14. display: inline-block;
15. color: transparent;
16. width: 14px;
17. height: 14px;
18. border-radius: 14px;
19. background: #fff;
20. overflow: hidden;
21. margin: 0 8px;
22. }
23.  
24. .loading::before,
25. .loading .dot,
26. .loading::after{
27. -webkit-animation: pulldown-refresh-loader 1.4s infinite ease-in-out;
28. animation: pulldown-refresh-loader 1.4s infinite ease-in-out;
29. -webkit-animation-fill-mode: both;
30. animation-fill-mode: both;
31. }
32. .loading::before{
33. -webkit-animation-delay: -0.32s;
34. animation-delay: -0.32s;
35. }
36. .loading .dot{
37. -webkit-animation-delay: -0.16s;
38. animation-delay: -0.16s;
39. }
40.  
41. @-webkit-keyframes pulldown-refresh-loader {
42. 0%, 80%, 100% { background-color: #f0f0f0; }
43. 40% { background-color: #fff; }
44. }
45.  
46. @keyframes pulldown-refresh-loader {
47. 0%, 80%, 100% { background-color: #f0f0f0; }
48. 40% { background-color: #fff; }
49. }

坑2：無法獲取元素的高度  本來有個頁面是要做成監(jiān)聽滾動，然后自動切換頂部tab的，類似 bootstrap的滾動監(jiān)聽 的效果。 然而里面有大段的文本，而文本的高度根本算不來，囧。還是放棄這個效果吧。

坑3：無法在bindXXX的事件處理的時候阻止冒泡  有人說，你可以使用catchXXX呀！然而，我在某些時候才需要阻止事件冒泡，另外一些時候是不需要阻止冒泡的，是需要默認行為...

最終采用了一個很挫的方案來“解決” -- 復(fù)制那個根據(jù)是否組織冒泡分別渲染成bindXXX或catchXXX...：

1. <view class="{{preventDefault && 'hide'}}" catchXXX="yyy" >zzz</view>
2. <view class="{{!preventDefault && 'hide'}}" bindXXX="yyy" >zzz</view>

這個還不能簡單地使用wx:if，否則切換的成本太高了點。

坑4： 預(yù)覽前構(gòu)建時間比較長  貌似沒有好辦法，預(yù)覽的構(gòu)建貌似不是增量的，希望微信官方啥時候能改成增量的就好了。點擊預(yù)覽按鈕后去倒杯水喝吧。

坑5： 組件復(fù)用好蛋疼  小程序里面雖然提供了<template>可以復(fù)用一部分模版，但是我們要是想復(fù)用一個具有完整功能組件（比如一個對話框 ）就會非常蛋疼 -- 數(shù)據(jù)怎么傳呢？業(yè)務(wù)邏輯代碼寫在哪里？樣式如何加載？

目前解決方法是將組件封裝成 xxx.js， xxx.wxml 和 xxx.wxss，用的時候都要引用下... 好麻煩！很懷念React里面的組件。

回頭考慮通過在微信小程序前面加一道構(gòu)建，以便自動引用組件相關(guān)東東。

坑6：不支持webview直接嵌入html代碼  像后臺通過富文本編輯器錄入的文章頁面沒法直接顯示了... 還好有wxParse。盡管樣式調(diào)起來很蛋疼，起碼能看了。

坑7：測試與發(fā)布  微信開發(fā)者工具的預(yù)覽版本只能誰登錄誰來掃，其他人掃根本開不了 --- 同是一個小程序的開發(fā)者也不行，囧。為了讓測試人員方便測試，還得教會測試人員如何登錄微信開發(fā)者工具，如何更新代碼，如何構(gòu)建并預(yù)覽小程序。。。

啥，你說有“預(yù)覽版本”，預(yù)覽版本更麻煩，上傳的時候只能管理員才能上傳，上傳完還必須選擇為預(yù)覽版本，預(yù)覽版本還不是每個人能看的，而是加到預(yù)覽者里面的才能看（開發(fā)者居然默認沒有加到預(yù)覽者里面?。?-- 每一個操作都是要管理員掃碼...

后記  微信小程序坑還有很多，未完待續(xù)...