本文轉(zhuǎn)自：http://blog.csdn.net/eadio/article/details/53468096

前瞻：

最近一直在關(guān)注小程序開發(fā)，目前正在試著將公司的app轉(zhuǎn)換為小程序執(zhí)行，在此期間有遇到的一些小問題以及解決辦法集合。當然這些都是我個人經(jīng)驗談，對于小程序的底層框架我也是一知半解，很多也都無法解釋的很清楚，如果有不同見解歡迎指出。

• navigator組件使用flex布局在安卓機子下是不兼容的。
  解決方案：在navigator組件內(nèi)先添加一個view組件使用flex布局，或者直接使用inline-block轉(zhuǎn)換view子組件。具體也可以看我之前寫的博客http://blog.csdn.net/eadio/article/details/53169145

• form組件設(shè)置padding無效
  解決方案：經(jīng)過反復(fù)測試發(fā)現(xiàn)小程序的form組件是隸屬于行內(nèi)元素范圍的。
  因為我設(shè)置了padding屬性一點效果都沒有，我改為view有效，在改回form組件還是沒有效果，判斷form組件和我們所認為的正常html的form表單塊元素是不一樣的。而且小程序中的組件不知道為啥始終是在最頂層，觀察了下wxml面板，并為發(fā)現(xiàn)自有css屬性
  因此可以將form組件改為block化，或者在form組件內(nèi)先使用空的view來設(shè)置padding在根據(jù)頁面需求進行下一步布局。

  
  

• switch組件垂直居中問題
  解決方案：使用flex布局，設(shè)置父元素align-items屬性為center，或者父元素不設(shè)置高度直接padding屬性撐開
  因為在使用這個組件的過程，發(fā)現(xiàn)組件是無法設(shè)定寬高的。而我在父元素設(shè)置line-hieght屬性，想要讓文本垂直居中的過程發(fā)現(xiàn)switch在line-height不是很大的情況下始終居頂。給switch組件設(shè)置背景色的時候發(fā)現(xiàn)本身有個父元素包裹導(dǎo)致設(shè)置的一些屬性都無效。

  
  
• wx:for循環(huán)使用wx:key導(dǎo)致數(shù)據(jù)渲染不出來的
  解決方案：直接不使用wx:key忽略控制臺的警告，或者wx:key不要使用this，并且wx:key指定的屬性一定要是唯一的，
  因為wx:key=this的時候會導(dǎo)致無法預(yù)料的問題，雖然還是不知道小程序底層是怎么實現(xiàn)的，但是我在使用過程發(fā)現(xiàn)了一些無法解決的情況。
  wx:key唯一性即wx:key指定的這個屬性比如id一定要是不重復(fù)的數(shù)值，否則在分頁的時候你會發(fā)現(xiàn)下一頁渲染不出來了。
  下面是我做的測試，分頁加載數(shù)據(jù)我都是用的固定數(shù)據(jù)，發(fā)現(xiàn)一直處于加載中，我把wx:key屬性去掉，或者使用遠程請求，wx:key指向id也正常渲染。
  
  
  
  
  接下來是根據(jù)時間戳寫的一個日歷切換程序，發(fā)現(xiàn)使用*this，當我點擊下一頁的時候數(shù)據(jù)的渲染變的很奇怪，并不是我想要的，反復(fù)點擊測試發(fā)現(xiàn)每個月的數(shù)據(jù)是最后一個月的那組數(shù)據(jù)，但是我邏輯層打印出來的日歷數(shù)組對象又是對的，竟不知道是啥原因造成的。但當我去掉wx:key或者將wx:key指向唯一的屬性title【yyyy年mm月】的時候，渲染正常了