小程序現階段缺陷還很多，在安卓手機上的性能也是很糟糕，估計實用性還不高。
一(yi)步(bu)一(yi)步(bu)都是坑(keng)，這里(li)作為(wei)個人踩坑(keng)收集(ji)用（內含吐槽），也是經驗(yan)分享(xiang)，歡迎(ying)issues討論。

框架部分

1、殘念的數據綁定

要實現頁面數據響應必須通過setData設定值，如果直接設定data里的值則無頁面響應。
不能像其(qi)他MVVM框(kuang)架那樣自動響應(ying)，無語也無解。

2、setData()無法進行動態數組操作

這也是由于js對象的key部分一定是字符串造成的。
setDate只支持對(dui)靜態key的解析(xi)，無法(fa)傳入參數(shu)實現動(dong)態遍歷。

比如：

有一個數組需要更改其中的值，循(xun)環傳入i將無效的，只(zhi)能是固定數字。

for(var i=0; i<3; i++){
  this.setData({
      array[i]:‘hello’
    }
  })
}

如果你照上面這么寫的話就會報下面的錯誤。 官方的意(yi)就(jiu)是只(zhi)能這樣寫：

this.setData({
    'array[1]':‘hello’
  }
})

解決辦法：

不在遍歷中使用setData，可以先遍歷修改完后再用setData完整賦值完成響應。
因(yin)為js里數(shu)組是地址(zhi)傳(chuan)遞，也就是說實際上已經(jing)修改(gai)了原(yuan)數(shu)組，用(yong)setData只是為了響應頁面。

3、路由設置必須有序

小程序的頁面都必須在app.json注冊，但這不是隨便登記一下就行了，頁面登記的順序一定是有層級關系的。
如果你把首頁放在了某二級頁面后(hou)面，那就(jiu)會報錯，這個文檔沒寫清楚真心坑爹。

"pages": [
  "pages/index/index",   //一級頁面
  "pages/list/list",     //二級頁面
  "pages/detail/detail", //三級頁面
  "pages/msg/msg"        //額外頁面
],

建議：

 設計時頁面分級(ji)要明確，排列按順序，額(e)外頁面（比如提(ti)示成功或失敗(bai)的頁面）放最后(hou)。

4、wx.redirectTo(OBJECT)不可跳一級頁

這個是關閉當前頁跳轉到指定頁的功能，跳到一級頁會導致導航欄消失，并且該一級頁會被當成一次跳轉。
小程序最多五層跳轉，正常一級頁不會算入，但如果一級頁也被當成一次跳轉，那使用幾次后就不能動了，因為五次滿了，非常危(wei)險(xian)。
這點(dian)在新的(de)官(guan)方(fang)文檔(dang)已(yi)經說明，并提供wx.switchTab(OBJECT)跳(tiao)轉到一級頁(ye)面，不(bu)過(guo)由于wx.switchTab(OBJECT)不(bu)能傳參，使用還是比(bi)較有(you)限的(de)。

5、發起POST請求必須改默認參數  

默認header['content-type'] 為 'application/json'，在get請求中沒有問題。
但如果想要發起POST就(jiu)必須將header['content-type'] 為(wei) 'application/x-www-form-urlencoded'，否則就(jiu)收不到返回數據(ju)。

wx.request({
  url: 'test.php', //僅為示例，并非真實的接口地址
  data: yourData,
  header: {
      'content-type': 'application/x-www-form-urlencoded' //這里必須改
      },
  success: function(res) {
    console.log(res.data)
  }
})

6、wx.setNavigationBarTitle(OBJECT)的調用時機  

這個是改變頁面標題的接口，必須在onShow觸發時才調用。
如果在onLoad觸(chu)發時調用，只(zhi)會一閃(shan)而(er)過，然后(hou)又變(bian)成(cheng)頁面(mian)配置json里的名(ming)字或全(quan)局配置json里的名(ming)字。  

建議：

小程(cheng)序這樣的(de)(de)(de)設(she)計體驗不(bu)是(shi)很好(hao)，每次都(dou)會一閃而(er)過(guo)的(de)(de)(de)改名(ming)字，如果要避免這種情(qing)況就只(zhi)能在配置json中設(she)置了，不(bu)過(guo)這樣是(shi)靜態的(de)(de)(de)。

樣式部分

1、不支持部分選擇器  

樣式(shi)部分的缺陷是比較嚴重的，不支(zhi)持(chi)相鄰兄弟選擇(ze)器，不支(zhi)持(chi)級聯選擇(ze)器。。。  

解決辦法：

這個暫時無解，只能說改變一下樣式命名的習慣，使用橫杠連接體現層次，雖然這樣盒子多起來會變得很長。
如果使用預(yu)處理，比如我(wo)用SASS可(ke)以這樣寫，稍微省點(dian)力：

.list {
  padding: 20rpx;
  &-name {
    color: red;
    &-number {
      color: blue;
      &-info {
        font-size: 16rpx;
      }
    }
  }
}
// 編譯結果
.list {
  padding: 20rpx;
}
.list-name {
  color: red;
}
.list-name-number {
  color: blue;
}
.list-name-number-info {
  font-size: 16rpx;
}

2、button無法正常改樣式

使用(yong)button標簽默(mo)認是(shi)無法更(geng)改樣(yang)式，加上類(lei)名也會因為(wei)優先(xian)級問題不(bu)能覆(fu)蓋原樣(yang)式，搞不(bu)懂這(zhe)樣(yang)設計的用(yong)意，十分不(bu)便。

解決辦法：

1. 可以通過!important提升優先級強行覆蓋，不推薦，因為會影響其他默認樣式；
2. 也可以仿照默認樣式寫法，進行覆蓋，基本需要覆蓋的樣式如下（以primary為例，其他的以此類推），加上[plain]或[size=”min”]即是其他鏤空版和縮小版的樣式；
3. 推薦做法，盡量不破壞原有樣式，可以自定義一個type，然后仿照默認樣式的寫法，就可以自定義button了；
4. 使用view仿照一個button，把默認的樣式復制一份即可，會增加無意義的代碼量，而且沒有默認的交互事件(active)。

按下操作觸發順序是：

button[type="primary"] > button[type="primary"].button-hover > button[type="primary"][plain]:not([disabled]):active

3、button的默認邊框  

button的默(mo)認(ren)邊框是使(shi)用after偽類，新建了(le)一個2倍大小的空白content，設(she)置了(le)border，再縮小為0.5倍，剛好(hao)蓋在元素上面，下面就是默(mo)認(ren)按鈕的樣(yang)式。  

這是一種為了在不同設備實(shi)現1px的(de)做法，但本身小程序就有(you)rpx啊，還用(yong)這雞肋的(de)辦法讓(rang)人(ren)不解（笑）。   也給更改button樣式一點阻礙(ai)，需要把after設置display:none才能去掉邊(bian)框(kuang)。

4、button不同設備上表現差異  

1. 真機上會出現button內文字高度偏高的問題（安卓機，iOS未測），而模擬器上表現正常（居中），嘗試覆蓋默認樣式進行修正（改為padding撐開盒子的方法代替原來的line-height），并沒有效果。所以暫無解決辦法；
2. min按鈕在真機上會出現左右邊框消失的情況，暫無解決辦法。

5、rem在真機設備上的表現有差異  

即使在(zai)(zai)根元素page上設置了字體大(da)小，rem在(zai)(zai)不同設備上的表(biao)現還是無(wu)法統一。

建議：  

使(shi)用rpx作為響應式字體的(de)單位，效果比較好(hao)，rpx作為小程序的(de)特性還是在(zai)不同設備的(de)表現上(shang)還是很實用的(de)。