六月份實在太忙，只能把遇到的問題簡單記錄，今天小程序二期的開發基本上結束了，纔有空來總結整理在開發過程當中遇到的問題。
在上一篇博客小程序學習實踐總結中，我覺得小程序的開發沒太多可說的，使用mpvue，只要瞭解vue和小程序的api就能夠了。事實證實我仍是太年輕了，當時只是作一些簡單維護，6月份開發小程序二期的時候，才發現有不少坑點。這裏邊有本身不熟悉的坑，有mpvue的坑，甚至還有微信開發者工具的坑。還有一些不算坑，可是瞭解到的小知識點，也一併記錄在這裏。css
1.圖片不顯示的問題html
問題描述： 小程序圖片不顯示。
問題緣由： webpack使用了url-loader將圖片轉換爲base64，limit默認是10000，約爲10kb，圖片大小超出責轉換失敗，因此就不顯示了。
解決方案： 在webpack.base.conf.js文件中查找url-loader，修改limit字段；或使用較小的圖片。vue
2.小程序的input的placeholder-class屬性無效node
問題描述： 小程序的input組件能夠設置placeholder-class來增長placeholder的樣式，但設置後不生效。
問題緣由： vue單文件組件的<style>標籤能夠加上scoped，表示私有樣式。webpack編譯時會給這些css加上後綴並修改相應的html中的class，但漏掉了placeholder-class。
解決方案： 須要時單獨寫一個不帶scoped的<style>標籤，將placeholder-class中的class寫在裏邊。webpack
3.開發環境使用http或假證書web
問題描述： 開發環境使用http或假證書時，ajax失敗。
問題緣由： 爲保證安全，小程序要求使用https協議。
解決方案： 開發環境能夠在開發工具-詳情-項目設置中勾選「不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書」便可。ajax
4.wx.getUserInfo提示npm
問題描述： 直接使用wx.getUserInfo接口，會報警告。
問題緣由： 微信改變了wx.getUserInfo接口。
解決方案： 第一次要使用<button open-type="getUserInfo"></button>來讓用戶點擊，以後就能夠直接調用了。json
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中。