mpvue實現微信小程序（歡迎踩坑）

最近剛使用mpvue完成了微信小程序的開發，寫點東西，作個記錄。

首先依舊是兩個傳送門：

微信小程序文檔:[https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html][1]
mpvue的官網連接:[http://mpvue.com/][2]

踩坑記錄：

• 真機調試的時候，小程序的本地圖片不顯示；
  如：頁面路徑爲：/pages/index/index.vue,圖片路徑：/static/img/1.png;最初在index.vue頁面裏面圖片的src爲「../../../static/img/1.png;而後發如今小程序的調試環境可顯示，可是在真機上不顯示；（可是放在components裏面用這種方式寫的圖片沒有這個問題）

  解決方式：把pages引用的圖片地址都改成'/static/',以根目錄開頭

• 以前設置顏色的時候，很喜歡rgba(0,0,0,.1),這樣，而後真機測試的時候，個人手機是華爲mate9（ios測試過沒有問題，多是安卓的問題）輸入的時候是空白的可是有佔位，點了回車才能顯示，不能邊輸邊顯示；debug了半天，最後才發現我字體顏色設置爲rgba的時候會致使錯誤

  解決方式：把color的rgba設置改成#設置

• 使用微信小程序的picker組件實現省-城市選擇；原本想直接用picker的城市mode的，可是這個數據要後臺返回的並且也沒有到區；picker還有一個多列選擇器，感受傳入的數據實在是麻煩；最後用picker-view；清清爽爽；就設置兩列，分別傳入列數組就行了；這裏遇到的一個坑就是，在綁定的change函數上，我沒法取到當前change的是哪一列的數據；由於這裏要作判斷，若是是第一列的話，要替換第二列的數組內容；

  解決方式：新建變量，在change函數中賦值，在watch裏面監聽；

• 無論用onload仍是onshow方法，小程序的data裏面的值始終沒有被初始化；就好比我設置了一個狀態變量，初值爲false，我在頁面操做後變爲true；回退再打開時，它依然是true值；這個問題不知道是否是我哪裏沒有考慮到，暫時只是用了一個不是辦法的辦法解決

  解決辦法：在onload方法內重置狀態變量

• 底部導航切換的時候，onshow每次都會調用，可是onload只會調用一次；
• 對image來講，height：auto這個屬性是不生效的；圖片自適應的問題搞了半天；由於是一個富文本字符串，所以沒有辦法像官方文檔設置mode；最後升級了我用的轉換插件 (mpvue-wxparse)的版本；它支持富文本內設置圖片的mode屬性。
• 搜索回車以前用的是@keyup.native 在小程序裏面要換成@confirm
• 還有跳轉外鏈，小程序是有提供一個組件的<web-view :url=""></web-view>,實現的時候，只要單獨作一個外鏈的頁面只包含上面這個標籤，傳入url就能夠了。這個標籤是當即執行的，有這個的話，就會在當前頁面直接跳轉，因此我單獨把它寫成一個頁面。專門用於外鏈跳轉；可是外鏈跳轉仍是個坑，微信僅能支持跳到在它那邊註冊過的https的網址，其餘仍是不行，暫時沒有找到好的方式；看了知乎，它的外鏈直接轉成了文本，不可點擊了。

最後的話

好了，暫時就寫到這麼多啦,第一次寫小程序，雖然用了mpvue少了不少學習成本，可是轉化的時候仍是遇到了挺多問題，過程當中都一直在網上搜索解決方式啊，也會發問題問問你們；感受收穫還挺大的；據說wepy也挺好用的，下次開發小程序的時候，能夠看看試着用用。