微信小程序發現的一些小問題以及解決方案集合以及注意點
最近一直在關注小程序開發，目前正在試着將公司的app轉換爲小程序執行，在此期間有遇到的一些小問題以及解決辦法集合。固然這些都是我我的經驗談，對於小程序的底層框架我也是隻知其一;不知其二，不少也都沒法解釋的很清楚，若是有不一樣看法歡迎指出。javascript
一、navigator組件使用flex佈局在安卓機子下是不兼容的。css
解決方案：在navigator組件內先添加一個view組件使用flex佈局，或者直接使用inline-block轉換view子組件。具體也能夠看我以前寫的博客http://blog.csdn.net/eadio/article/details/53169145html
二、form組件設置padding無效前端
解決方案：通過反覆測試發現小程序的form組件是隸屬於行內元素範圍的。java
由於我設置了padding屬性一點效果都沒有，我改成view有效，在改回form組件仍是沒有效果，判斷form組件和咱們所認爲的正常html的form表單塊元素是不同的。並且小程序中的組件不知道爲啥始終是在最頂層，觀察了下wxml面板，併爲發現自有css屬性ios
所以能夠將form組件改成block化，或者在form組件內先使用空的view來設置padding在根據頁面需求進行下一步佈局。git
三、switch組件垂直居中問題小程序
解決方案：使用flex佈局，設置父元素align-items屬性爲center，或者父元素不設置高度直接padding屬性撐開後端
由於在使用這個組件的過程，發現組件是沒法設定寬高的。而我在父元素設置line-hieght屬性，想要讓文本垂直居中的過程發現switch在line-height不是很大的狀況下始終居頂。給switch組件設置背景色的時候發現自己有個父元素包裹致使設置的一些屬性都無效。數組
四、wx:for循環使用wx:key致使數據渲染不出來的
解決方案：直接不使用wx:key忽略控制檯的警告，或者wx:key不要使用*this，而且wx:key指定的屬性必定要是惟一的，
由於wx:key=*this的時候會致使沒法預料的問題，雖然仍是不知道小程序底層是怎麼實現的，可是我在使用過程發現了一些沒法解決的狀況。
wx:key惟一性即wx:key指定的這個屬性好比id必定要是不重複的數值，不然在分頁的時候你會發現下一頁渲染不出來了。
下面是我作的測試，分頁加載數據我都是用的固定數據，發現一直處於加載中，我把wx:key屬性去掉，或者使用遠程請求，wx:key指向id也正常渲染。
接下來是根據時間戳寫的一個日曆切換程序，發現使用*this，當我點擊下一頁的時候數據的渲染變的很奇怪，並非我想要的，反覆點擊測試發現每月的數據是最後一個月的那組數據，可是我邏輯層打印出來的日曆數組對象又是對的，竟不知道是啥緣由形成的。但當我去掉wx:key或者將wx:key指向惟一的屬性title【yyyy年mm月】的時候，渲染正常了
五、input文本框的placeholder-class不支持多個樣式類名，空格分隔寫法，解決辦法：樣式只能整合在一個類名裏
六、move事件致使navigator組件和tap事件中跳轉地址失效的解決方案。詳情請走：http://blog.csdn.net/eadio/article/details/54290420
七、<text/> 組件內只支持 <text/> 嵌套。一不當心會把image組件放入到text組件內部，每次都要調試很久，才發現改爲view組件包含就能正常顯示了。這個坑必定要注意啊！！
八、使用wx.saveFile要注意沒法直接下載網絡資源到本地上，須要先使用wx.downloadFile下載資源獲得臨時文件路徑【wxfile://開頭的路徑】，而後才能使用wx.saveFile接口，不然會提示以下錯誤：
===========================2017-11-08更新===========================
九、map組件show-location和wx.getlocation不在一個定位點。開發者工具上沒有發現問題，等到了真機上出現問題了。最後去官方論壇發帖獲得解答，只要給wx.getlocation制定type=gcj02類型就能夠了。演示以下：
左圖是真機上調試，右圖是開發者工具上調試結果，兩個明顯存在差別。
最後也能夠在map組件的tips裏面看到提醒：
===========================2018-1-22更新===========================
十、最近有個需求是永不顯示map組件上的markers氣泡，不論是點擊後仍是初始化。解決方案：不要指定markers的title屬性和name屬性和callout屬性。
十一、ios上使用wx.backgroundAudioManager對象報錯，緣由是沒有設置title致使的。安卓沒有報錯，目前發現微信調試基礎庫1.7.2版本，蘋果8有這問題。
===========================2018-2-7更新===========================
十二、近期有發現全局定義wx.backgroundAudioManager，若是設置了title可是沒有設置src的話，真機上都會報錯。爲了兼容ios機子，我等到設置src的時候同步設置title標題。
===========================2018-2-24更新===========================
1三、真機上發現請求服務器API得不到數據，提醒請求超時，致使我頁面一直處於加載中狀態。然而開發者工具表現正常。 最終才發現是wifi網段不一樣問題致使的。有遇到次問題的能夠看看是否是這緣由致使的。踩過兩次坑啊！！！【下面左圖是真機表現右圖是開發者工具正常表現】
===========================2018-3-1更新===========================
1四、關於setData的回調傳遞問題。
文檔描述不是很明白，找了好久調試了好久才發現正確的使用方法是如下的方式調用的：
this.setData({
a: 1,
},
() => {
console.log('yyyy')
})
===========================2018-4-24更新===========================
1五、ios真機上發現地圖縮放過程當中markers標記點有時候會平白無故消失，最後調試發現是js中動態設置scale縮放級別致使的。解決方案：直接固定scale縮放級別
1六、真機上發現data變量存儲的文本帶有\u02028的unicode碼，開發者工具能正常渲染，可是真機上會沒法正常渲染。解決方案：正則搜索替換該unicode碼。或者是後端前端不要返回帶有unicode的文本串。
1七、ios上發現cover-view對transform的支持性很差。解決方案：不要動畫，使用hidden或者wx:if代替transform
===========================2018-05-07更新===========================
1八、同一組polyline對象數組，在開發者工具和ios上能正常選擇，而在安卓真機沒法渲染。經調試發現polyline對象中必定不能存在有空的points數組對象。會致使安卓真機沒法渲染
解決方案：給points數組默認設置一組{latitude:0, longitude: 0}的對象，便可解決安卓不兼容的狀況