六月份實在太忙，只能把遇到的問題簡單記錄，今天小程式二期的開發基本上結束了，才有空來總結整理在開發過程中遇到的問題。
在上一篇部落格小程式學習實踐總結中，我以為小程式的開發沒太多可說的，使用mpvue，只要瞭解vue和小程式的api就可以了。事實證明我還是太年輕了，當時只是做一些簡單維護，6月份開發小程式二期的時候，才發現有很多坑點。這裡邊有自己不熟悉的坑，有mpvue的坑，甚至還有微信開發者工具的坑。還有一些不算坑，但是瞭解到的小知識點，也一併記錄在這裡。

值得記錄的問題

1.圖片不顯示的問題

問題描述： 小程式圖片不顯示。
問題原因： webpack使用了url-loader將圖片轉換為base64，limit預設是10000，約為10kb，圖片大小超出責轉換失敗，所以就不顯示了。
解決方案：

2.小程式的input的placeholder-class屬性無效

問題描述： 小程式的input元件可以設定placeholder-class來增加placeholder的樣式，但設定後不生效。
問題原因： vue單檔案元件的<style>標籤可以加上scoped，表示私有樣式。webpack編譯時會給這些css加上字尾並修改相應的html中的class，但漏掉了placeholder-class。
解決方案： 需要時單獨寫一個不帶scoped的<style>

3.開發環境使用http或假證書

問題描述： 開發環境使用http或假證書時，ajax失敗。
問題原因： 為保證安全，小程式要求使用https協議。
解決方案： 開發環境可以在開發工具-詳情-專案設定中勾選“不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書”即可。

4.wx.getUserInfo提示

問題描述： 直接使用wx.getUserInfo介面，會報警告。
問題原因： 微信改變了wx.getUserInfo介面。
解決方案： 第一次要使用<button open-type="getUserInfo"></button>

5. mpvue 使用wx.getUserInfo報錯

問題描述： 直接使用wx.getUserInfo介面，會報錯說onGetUserInfo函式未定義。
問題原因： mpvue的bug。
解決方案： 修改原始碼。

6. npm run dev 報錯

問題描述： 改變網路環境之後，執行npm run dev報錯。
問題原因： 似乎是node獲取本機ip出錯，但一直顯示的是埠被佔用類似的錯誤。
解決方案： 檢視本機ip，然後在dev-server.js檔案中查詢app.listen，將其中的'localhost'改為本機ip即可。

7. v-model 效率低，快速輸入提交資料不全

問題描述： 使用v-model雙向繫結導致效能差或游標重設。
問題原因： mpvue 建議使用 v-model.lazy ，lazy會把資料繫結放在change事件上，優化效能。但這樣會導致，如果快速輸入並點選提交，輸入的資料還沒有完成的傳入。
解決方案： 使用 v-model.lazy進行雙向繫結，或者用value替代v-model，在需要時直接取value的值即可，不需要隨時更新到vue。

8. textarea 中@focus獲取鍵盤高度報錯

問題描述： textarea 中bindfocus獲取鍵盤高度，文件中有height屬性，但在微信開發者工具中沒有，導致報錯。
問題原因： 微信開發者工具的bug。
解決方案： 使用真機配合console.log進行除錯，注意返回的是單位是px，*2 轉為rpx。

9. tabBar中icon圖片找不到

問題描述： 使用微信自帶的tabBar元件，可以設定icon，但在開發者工具中報錯。
問題原因： webpack會把本地圖片轉為base64，而tabBar中使用的圖片打包之後是在app.json檔案當中的，導致路徑不對，並且沒有圖片。
解決方案： 將這種靜態圖片放入static/img資料夾中，webpack會直接複製到dist/static/img中。