小程序踩坑記錄

小程序踩坑記錄

小程序現階段缺陷還不少，在安卓手機上的性能也是很糟糕，估計實用性還不高。

一步一步都是坑，這裏做爲我的踩坑收集用（內含吐槽），也是經驗分享，歡迎issues討論。

框架部分

一、殘念的數據綁定

要實現頁面數據響應必須經過setData設定值，若是直接設定data裏的值則無頁面響應。

不能像其餘MVVM框架那樣自動響應，無語也無解。

二、setData()沒法進行動態數組操做

這也是因爲js對象的key部分必定是字符串形成的。

setDate只支持對靜態key的解析，沒法傳入參數實現動態遍歷。

好比：

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

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

若是你照上面這麼寫的話就會報下面的錯誤。

官方的意思就是隻能這樣寫：

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

解決辦法：

不在遍歷中使用setData，能夠先遍歷修改完後再用setData完整賦值完成響應。

由於js裏數組是地址傳遞，也就是說實際上已經修改了原數組，用setData只是爲了響應頁面。

三、路由設置必須有序

小程序的頁面都必須在app.json註冊，但這不是隨便登記一下就好了，頁面登記的順序必定是有層級關係的。

若是你把首頁放在了某二級頁面後面，那就會報錯，這個文檔沒寫清楚真心坑爹。

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

建議：

設計時頁面分級要明確，排列按順序，額外頁面（好比提示成功或失敗的頁面）放最後。

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

這個是關閉當前頁跳轉到指定頁的功能，跳到一級頁會致使導航欄消失，而且該一級頁會被當成一次跳轉。

小程序最多五層跳轉，正常一級頁不會算入，但若是一級頁也被當成一次跳轉，那使用幾回後就不能動了，由於五次滿了，很是危險。

這點在新的官方文檔已經說明，並提供wx.switchTab(OBJECT)跳轉到一級頁面，不過因爲wx.switchTab(OBJECT)不能傳參，使用仍是比較有限的。

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

默認header['content-type'] 爲 'application/json'，在get請求中沒有問題。

但若是想要發起POST就必須將header['content-type'] 爲 'application/x-www-form-urlencoded'，不然就收不到返回數據。

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

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

這個是改變頁面標題的接口，必須在onShow觸發時才調用。

若是在onLoad觸發時調用，只會一閃而過，而後又變成頁面配置json裏的名字或全局配置json裏的名字。

建議：

小程序這樣的設計體驗不是很好，每次都會一閃而過的更名字，若是要避免這種狀況就只能在配置json中設置了，不過這樣是靜態的。

樣式部分

一、不支持部分選擇器

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

解決辦法：

這個暫時無解，只能說改變一下樣式命名的習慣，使用橫槓鏈接體現層次，雖然這樣盒子多起來會變得很長。

若是使用預處理，好比我用SASS能夠這樣寫，稍微省點力：

.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;
}

二、button沒法正常改樣式

使用button標籤默認是沒法更改樣式，加上類名也會由於優先級問題不能覆蓋原樣式，搞不懂這樣設計的用意，十分不便。

解決辦法：

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"]:not([disabled]):active	按下樣式（可選，沒有則使用上面的做爲按下樣式，[plain]默認有，需覆蓋）
button[disabled][type=" primary"]	禁用樣式

按下操做觸發順序是：

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

三、button的默認邊框

button的默認邊框是使用after僞類，新建了一個2倍大小的空白content，設置了border，再縮小爲0.5倍，恰好蓋在元素上面，下面就是默認按鈕的樣式。

這是一種爲了在不一樣設備實現1px的作法，但自己小程序就有rpx啊，還用這雞肋的辦法讓人不解（笑）。
也給更改button樣式一點阻礙，須要把after設置display:none才能去掉邊框。

四、button不一樣設備上表現差別

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

五、rem在真機設備上的表現有差別

即便在根元素page上設置了字體大小，rem在不一樣設備上的表現仍是沒法統一。

建議：

使用rpx做爲響應式字體的單位，效果比較好，rpx做爲小程序的特性仍是在不一樣設備的表現上仍是很實用的。