mpvue 採坑

這是第一次用mpvue寫項目啊，雖然項目難度不大，可是碰到的問題不小，並且項目還沒上線，估計到時候還會碰到問題，因此這篇應該還會更新。

 

小程序，跟瀏覽器的環境是有挺多差別的，好比沒有window對象，頁面也不是在body元素裏，而是page元素裏，div變成了view，而圖片的引入，小程序是沒有img標籤的，mpvue會自動把img轉成小程序的image，有一點比較坑的就是小程序的這個標籤的寬高會有預設 

width: 320px; height: 240px;

  因此你像普通的瀏覽器裏那樣，設置一個圖片的寬，而後高度會自適應是不現實的，解決辦法的話，要否則就是寬高你的設定好，可是這樣比較侷限，好在image 有個屬性 

mode="widthFix"

 設置了這個屬性後，image 就 能夠像img標籤同樣了。

 

mpvue裏能使用npm 裝部分的插件，但有些東西裝不了，例如vue全家桶裏的vue-router，據官網說，是由於小程序原生的路由已經很完善了，因此直接使用小程序路由就好，還有表單組件啊，ajax啊，網上都有推薦用小程序原生的，可是我項目裏ajax使用了flyio，由於要考慮這個項目能夠移植到H5上。

 

還有微信裏常常的拖動頁面致使出現空白部分的，能夠想要禁止的頁面建一個main.json  而後設置 

{
    "disableScroll": true   
}

 

我項目因爲是個重構項目 以前這個項目的用到了canvas，小程序裏也有，可是就是和瀏覽器有些許差別，好比  canvas.getContext('2d')  在mpvue 也就是小程序裏是這樣的 wx.createCanvasContext(canvas)  而後須要一個draw() 方法纔會繪製，這些查文檔都有，可是有個比較坑的，在web是  fillStyle 在小程序裏是  setFillStyle，不知道是否是我粗枝大葉，我沒在文檔裏查到， 卡了有段時間，本身網上找例子找到了。

 

總結 mpvue 不能徹底模擬vue來寫小程序，但我感受比直接學原生要更快接受一點，好些vue的東西均可以使用，好比slot v-html（官網還說不能使用...我去問了人才知道可使用），但也多是我這個項目不復雜，若是大型項目，應該仍是要斟酌一下，是直接原生，仍是學習這種流行庫轉小程序或者說是用流行庫語法來寫小程序的。目前市面上有不少這種，截止今天18/09/04，我知道的就有小程序官方wepy、美團mpvue，這是vue方面的，react的有taro、anujs（在正美羣裏每天看正美髮...），五花八門，選都選不過來，固然最後這些都是會轉爲小程序的，因此若是繼續作小程序下去，學習原生語法是必定不會虧的，就怕微信常常改API就完蛋了！